使用 Cypress 和不记名令牌进行身份验证

Question

I'm pretty new with Cypress, I started using it just two days ago; I'm tryng to realize some tests for a website, after logging on it first.

Following this answer , I added the package cypress-localstorage-commands and I created this code in cypress/support/command.js , which is empty except for the following:

import 'cypress-localstorage-commands'
let user

Cypress.Commands.add('postToken', () => {
  cy.request({
    method: 'POST',
    url: 'http://localhost:1337/auth/local',
    auth: {
      identifier: 'myUsername',
      password: 'myPassword',
    },
  })
    .its('body')
    .then(res => {
      console.log(res)
      user = res.user
      cy.setLocalStorage('identity_token', res.jwt)
    })
})

I have in integration/backoffice/backoffice.test.js ( backoffice is the only folder for now) this simple code:

/// <reference types="cypress" />

const siteUrl = 'http://localhost:3000'

describe('Backoffice with Cypress', () => {
  before(() => {
    cy.postToken()
    cy.saveLocalStorage()
  })

  beforeEach(() => {
    cy.viewport(2048, 1080)
    cy.restoreLocalStorage()
  })

  after(() => {
    // quit and close browser
  })

  describe('Authentication', () => {
    it('should login', () => {
      cy.getLocalStorage('identity_token').should('exist')
      cy.getLocalStorage('identity_token').then(token => {
        console.log('Identity token', token)
      })

      cy.visit(siteUrl)
    })
  })
})

A correct payload for http://localhost:1337/auth/local is:

{identifier: "myUsername", password: "myPassword"}

And authentication is made through bearer token.

When I launch the cypress test, the first time says:

cy.request() failed trying to load:

http://localhost:1337/auth/local

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: no auth mechanism defined

-----------------------------------------------------------

The request we sent was:

Method: POST
URL: http://localhost:1337/auth/local

And the server on localhost:1337 says:

Error during sync with gitlab tag list - TypeError [ERR_HTTP_INVALID_HEADER_VALUE]: Invalid value "undefined" for header "PRIVATE-TOKEN".
POST /auth/local (101 ms) 400

If I try tu run it again through the refresh button, cypress brutally crashes and stops.

If I try to use "username" instead of "identifier" in command.js , the servers responds with 401 .

All I want to do is to test for authentication, and keep this authentication for the following tests i will realize. What I'm doing wrong?

Answer 1

Solved. Problem was that i used

cy.request({
    method: 'POST',
    url: 'http://localhost:1337/auth/local',
    auth: {
      identifier: 'myUsername',
      password: 'myPassword',
    },
  })

but that's wrong, because I'm not putting user and password in the body of the request. I need to use this:

cy.request({
    method: 'POST',
    url: 'http://localhost:1337/auth/local',
    body: {
      identifier: 'myUsername',
      password: 'myPassword',
    },
  })

So the full function in commands.js is

import 'cypress-localstorage-commands'
let user

    Cypress.Commands.add('postToken', () => {
      cy.request({
        method: 'POST',
        url: 'http://localhost:1337/auth/local',
        body: {
          identifier: 'myUsername',
          password: 'myPassword',
        },
      })
        .its('body')
        .then(res => {
          console.log(res)
          user = res.user
          cy.setLocalStorage('identity_token', res.jwt)
        })
    })

and its use is:

before(() => {
    cy.postToken()
    cy.saveLocalStorage()
  })

  beforeEach(() => {
    cy.restoreLocalStorage()
  })

  after(() => {
    // quit and close browser
  })

  describe('Authentication', () => {
    it.only('should login', () => {
      cy.getLocalStorage('identity_token').should('exist')
      cy.getLocalStorage('identity_token').then(token => {
        console.log('Identity token', token)
      })

      cy.visit(siteUrl)

    })

  })