在赛普拉斯,在测试之前在localStorage中设置一个令牌

Question

我想登录并localStorage在客户端设置令牌(具体jwt)

cy.request如赛普拉斯文档中所建议的,如何使用它来实现此目的？

Answer 1

以下是添加cy.login()可在任何赛普拉斯测试中使用的命令或放入beforeEach钩子的示例.

Cypress.Commands.add('login', () => { 
  cy.request({
    method: 'POST',
    url: 'http://localhost:3000/api/users/login',
    body: {
      user: {
        email: 'jake@jake.jake',
        password: 'jakejake',
      }
    }
  })
  .then((resp) => {
    window.localStorage.setItem('jwt', resp.body.user.token)
  })

})

然后在你的测试中:

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

Answer 2

我已经使用了类似于 bkuceras 答案的东西一段时间了。最近，我在整个测试过程中测试多个角色/登录时遇到了一个问题。基本上发生的事情是我以管理员身份登录并进行一项测试，然后以非管理员身份登录并进行第二次测试。第一个测试运行良好并结束（cypress 清除本地存储），但是当第二个测试开始时，仍然有一些 xhr 请求从第一个测试运行。这些 xhr 请求不再看到触发我的应用程序看到 401 未经授权的错误并清除本地存储（包括我设置的非管理令牌）的令牌。现在，第二个测试失败，因为该非管理令牌在本地存储中不可用。

最终我的解决方案是在测试之前预取令牌，然后在访问的 onBeforeLoad 函数中设置令牌。这可以确保在您的访问命令之前令牌不会被任何竞争条件清除。

cy.visit('/app', {
    onBeforeLoad: function (window) {
        window.localStorage.setItem('token', myToken);
    }
})

实际上，这是一个非常独特的边缘情况，但希望它可以帮助某人，因为我花了很多时间寻找这个解决方案。

Answer 3

另外，您还可以使用cypress-localstorage-commands包在测试之间保留 localStorage，因此登录请求将只发出一次：

在 support/commands.js 中：

import "cypress-localstorage-commands";

Cypress.Commands.add('login', () => { 
  cy.request({
    method: 'POST',
    url: 'http://localhost:3000/api/users/login',
    body: {
      user: {
        email: 'jake@jake.jake',
        password: 'jakejake',
      }
    }
  })
  .its('body')
  .then(body => {
    cy.setLocalStorage("jwt", body.user.token);
  })
});

然后，在您的测试中：

before(() => {
  cy.login();
  cy.saveLocalStorage();
});

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