CypressでLaravel Sanctumなバックエンドにログイン

Cypressでのログイン

ログイン後の画面のテストでは、UIを使ってログインしないでcy.request()などを利用してログインします。

https://docs.cypress.io/guides/getting-started/testing-your-app#Logging-in

Don't use your UI to build up state! It's enormously slow, cumbersome, and unnecessary.

CSRFトークン取得とOriginヘッダー

まずはSanctumのEnsureFrontendRequestsAreStateful::fromFrontendが通らなかったので、通すためにOriginヘッダーを設定してCSRFトークンを取得します。

cy.request({
    method: 'GET',
    url: `${Cypress.env().apiUrl}/sanctum/csrf-cookie`,
    headers: {
        ['Origin']: `${Cypress.config().baseUrl}`
    }
})

これでCSRFトークンの入ったクッキーが保持されます。

X-XSRF-TOKENヘッダー

CSRFトークンはクッキーに入っていますが、axiosのように自動でX-XSRF-TOKENヘッダーに設定してくれないので手動で設定します。

cy.getCookie('XSRF-TOKEN').then(({ value }) => {
    cy.request({
        method: 'POST',
        url: `${Cypress.env().apiUrl}/login`,
        body: {
            user_id: Cypress.env().testUserId,
            password: Cypress.env().testUserPassword,
        },
        headers: {
            ['Origin']: `${Cypress.config().baseUrl}`,
            ['X-XSRF-TOKEN']: decodeURIComponent(value),
            ['Content-Type']: 'application/json'
        }
    })
})

以上をコマンド登録して置けばログイン後の画面のテストでさっくりログインできます。