Cypress login command with cy.request causes subsequent cy.visit to fail

Question

I'm trying to make a programmatic login with Cypress before each test. My tokens are persisted in localStorage. If I alter it synchronously, i.e. simpy doing localStorage.setItem without involving cy.request it works fine. However, I would like to use my auth server (http://localhost:3004/login below) to generate tokens.

The token is fetched correctly from the server, but as soon as I use the command below along with cy.visit('/') I get "Failed to visit localhost:8080 - We attempted to make an http request to this URL but the request failed without a response" (see full log below).

As far as I can tell, this is the correct approach when using an auth server for headless authentication. What did I miss?

commands.js

Cypress.Commands.add('login', () => {
  cy.request({
    method: 'POST',
    url: `http://localhost:3004/login`,
    body: {
      username: '[email protected]',
      password: '123'
    }
  }).its('body').then((body) => {
    const vuexData = { user: { authenticationData: { token: body.token } } }
    window.localStorage.setItem('vuex', JSON.stringify(vuexData))
  })
})

test.js

describe('A test', () => {
  beforeEach(() => {
    cy.login()
  })

  it('works', () => {
    cy.visit('/')
    cy.get('h1').contains('All Books')
  })
})

CypressError: cy.visit() failed trying to load:

http://localhost:8080/

We attempted to make an http request to this URL but the request failed without a response.

We received this error at the network level:

Error: connect ECONNREFUSED ::1:8080

Common situations why this would fail: - you don't have internet access - you forgot to run / boot your web server - your web server isn't accessible - you have weird network configuration settings on your computer

The stack trace for this error is:

Error: connect ECONNREFUSED ::1:8080 at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1056:14)

If I use a generic version of your code, logging vuexData within .its('body').then((body), it('works', () => {, and the Vue app mounted() they all have correct values and logs occur in correct order (hitting typicode with the POST). The only thing I can suggest is to log body after the POST and see if it has the correct form. Elsewise, how does the Vue app use the token? — Richard Matsen
@Johan I ended up with some quick workaround so I can get over this is by getting a token from logged in test user then hard-coded it into the test. It will certain be a very bad thing to do, but it lets me get on with writing real code — Tree Nguyen
If you fake out a login using fixtures, then no interaction with an authenticated API server would work. — Cory Danielson
I have set up an example app just as you have described and Cypress works perfectly. Token is written to local storage before any call to service on 8080. Are you sure there is no problem in your app running on 8080. Replace your app with a simple index.html file with the h1 header present (or not) and try re-run the test. — jeeves

Fernando Prado Fernando Prado · Accepted Answer · 2021-02-10T12:31:16

Ok, a couple of mistakes here.

Replace cy.route() by cy.intercept(), since the earlier one was recently deprecated and replace by the later one.
Check the correct syntax for using cy.intercept() since it's a bit different from cy.route()
I'm assuming that you're trying to bypass some sort of authentication. If all your app requires to consider a user "authenticated" is to have those information on the local storage, you don't even need to perform the POST request, but, if you do, then:
Check the usage of cy.intercept() for handling (and stubbing) the request and response objects that are related to your XHR request.
For setting the local storage on your Cypress window, you'll need to use the cy.window() command.

Cypress login command with cy.request causes subsequent cy.visit to fail

2 Answers