cypress - 由于无效的 csrf 导致登录请求失败

Question

我正在测试 keystonejs ( http://demo.keystonejs.com/ ) 的登录页面，并且无法通过 cypress 获得成功的请求。没有 cypress 的登录请求具有以下请求标头：

而带有 cypress 测试的请求具有以下请求标头：

我能看到的唯一区别是 cookie 没有在 cypress 测试请求中设置。因此，请求得到 403。我实际上使用的是该服务器的本地版本，其中我将电子邮件/密码配置为图像中的那个。演示站点使用该页面中提供的不同集合。

测试很简单：

describe('The Keystone Admin UI Signin Page', function () {
  before(function() {
        cy.visit('http://localhost:3000/keystone/signin')
    })

    it('should signin successfully with valid email/password', function () {
        cy.get('#signin-view input[name=email]').clear().type('user@test.e2e');
        cy.get('#signin-view input[name=password]').clear().type('test');
        cy.get('#signin-view button[type=submit]').click();
        cy.get('#react-root').should('be.visible');
    })
})

无论如何要解决这个问题？

Answer 1

我知道这是一个较老的问题，但我会发布这个以防它对任何人有帮助。

为我解决此问题的关键是赛普拉斯在每次测试之前清除所有 cookie ( https://docs.cypress.io/api/commands/clearcookies.html# )。

所以在上面的例子中（根据我的经验）：

• 第一个测试（加载页面）运行并顺利通过 - 此时浏览器已设置csrftokencookie
• 第二个测试（提交表单）运行，但在此之前赛普拉斯已删除csrftokencookie - 因此出现错误

为了解决这个问题，我必须csrftoken在赛普拉斯配置中将 cookie 列入白名单，这意味着它将免于此清除过程：

Cypress.Cookies.defaults({
    whitelist: "csrftoken"
})

您可以在测试文件中内联执行此操作，但文档建议使用support文件：

放置此配置的好地方是在您的 cypress/support/index.js 文件中，因为它是在评估任何测试文件之前加载的。

希望这会有所帮助，斯蒂芬。

Answer 2

继 FlatSteve 的回答之后，使用 Laravel 和更新的道具名称使用；

Cypress.Cookies.defaults({
    preserve: ["XSRF-TOKEN", "your_laravel_session_name", "remember_token"]
});