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

时间:2021-03-29 14:54:25

标签: javascript authentication cypress

我对 Cypress 还很陌生,两天前我才开始使用它;先登录后,我正在尝试对网站进行一些测试。

在此 answer 之后,我添加了包 cypress-localstorage-commands 并在 cypress/support/command.js 中创建了此代码,除了以下内容外都是空的:

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)
    })
})

我在 integration/backoffice/backoffice.test.jsbackoffice 是目前唯一的文件夹)中有这个简单的代码:

/// <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)
    })
  })
})

http://localhost:1337/auth/local 的正确负载是:

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

并且通过不记名令牌进行身份验证。

当我启动cypress测试时,第一时间说:

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

localhost:1337 上的服务器说:

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

如果我尝试通过刷新按钮再次运行它,cypress 会残酷地崩溃并停止。

如果我尝试在 command.js 中使用“用户名”而不是“标识符”,服务器会以 401 响应。

我想要做的就是测试身份验证,并为我将意识到的以下测试保留此身份验证。我做错了什么?

1 个答案:

答案 0 :(得分:0)

解决了。 问题是我用过

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

但那是错误的,因为我没有将用户名和密码放在请求正文中。我需要使用这个:

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

所以 commands.js 中的完整函数是

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)
        })
    })

它的用途是:

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)

    })

  })