使用 Cypress 和不記名令牌進行身份驗證

Question

我對賽普拉斯還很陌生，兩天前我才開始使用它； 在先登錄后，我正在嘗試對網站進行一些測試。

在這個答案之后，我添加了 package 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.js （ backoffice是目前唯一的文件夾）中有這個簡單的代碼：

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

如果我嘗試通過刷新按鈕再次運行它，賽普拉斯會殘酷地崩潰並停止。

如果我嘗試在command.js中使用“用戶名”而不是“標識符”，服務器會以401響應。

我要做的就是測試身份驗證，並為我將實現的以下測試保留此身份驗證。 我做錯了什么？

Answer 1

解決了。 問題是我用過

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中的完整 function 是

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)

    })

  })