SAKURUG TECHBLOG

Nuxt3とPlaywrightを使ったE2Eテスト_⑥Cookie認証保持方法

技術記事

2024-08-06 author-name

Toki

はじめに

SAKURUGのTokiです。

本記事ではPlaywrightでCookieの情報を活用した認証方法についてステップバイステップでご紹介します！

総8回でNuxt3環境におけるPlaywrightを使用したE2Eテストについてご紹介してます。

基本編

応用編

5.Basic認証

6.Cookie認証 (本記事)

7.テスト結果動画保存方法

8.Nuxt(SSR)に対応した待機処理

この記事を読んで欲しい人

Cookieを利用してログイン状態を保持する方法を学びたい方

紹介すること / 紹介しないこと

紹介すること : PlaywrightにてCookieを使用した認証の保持方法

紹介しないこと : Playwrightの環境構築・テスト生成・テスト実行・テスト結果確認

※第1回～第4回の基本編でご紹介してます。

動作環境

OS	Windows 11
Node.js	20.14.0
Nuxt.js	38.1
Playwright / Tes	1.45.1
nuxt / test-utils	3.13.1

認証処理

setup.tsファイルについて

playwrightのUIモードを使用すると、setupの適用を切り替えることができます。

もし、【setup】にチェックがついている場合は、【test.ts】ファイルが実行されると先に実行されるファイルとなります。

playwright/tests/auth.setup.ts

browserContextのstorageStateでブラウザのストレージ状態を playwright/.auth/user.jsonに保存します。

import { test as setup, expect } from "@playwright/test";

const authFile = "playwright/.auth/user.json";

setup("authenticate", async ({ page }) => {
  await page.goto("<http://localhost:3000/>");
  await page.getByRole("button", { name: "Sign in" }).click();
  await page.waitForURL(/auth\\/signin.*/);
  await page.getByLabel("メールアドレス").fill("test@example.com");
  await page.getByLabel("パスワード").fill("password");
  await page.getByRole("button", { name: "ログイン" }).click();
  await page.waitForURL(/posts/);

　await page.context().storageState({ path: authFile });
});

playwright.config.ts

【{ name: "setup", testMatch: /.*\.setup\.ts/ },】

ファイル名が「.setup.ts 」で終わる TypeScript ファイルが、テストランナーによって setup という名前でグループ化され、特定のセットアップや準備のために使用される

【use: {storageState: "playwright/.auth/user.json",}】

各ブラウザに認証後のストレージ状態を読み込むように設定

【use: {dependencies: ["setup"],},】

テストが実行される前にsetupという名前のスクリプトや設定ファイルが必ず実行されるように指定

import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  /* [...] */
  projects: [
+   { name: "setup", testMatch: /.*\\.setup\\.ts/ },
    {
      name: "chromium",
      use: {
        ...devices["Desktop Chrome"],
+       storageState: "playwright/.auth/user.json",
      },
+     dependencies: ["setup"],
    },

    {
      name: "firefox",
      use: {
        ...devices["Desktop Firefox"],
+       storageState: "playwright/.auth/user.json",
      },
+     dependencies: ["setup"],
    },

    {
      name: "webkit",
      use: {
        ...devices["Desktop Safari"],
+       storageState: "playwright/.auth/user.json",
      },
+     dependencies: ["setup"],
    },
    /* [...] */
});

テスト実行

UIモード

filter→setupにチェック
テストファイルの▷ボタンをクリック

コマンド

npx playwright test

テスト結果

LocalStorageにCookie情報が保存されている

{
  "cookies": [
    {
      "name": "_ga",
      "value": "GA1.Y.YYYYYYYYY.YYYYYYYYYYYY",
      "domain": "localhost",
      "path": "/",
      "expires": 1755063304.794143,
      "httpOnly": false,
      "secure": false,
      "sameSite": "Lax"
    },
    {
      "name": "identifer",
      "value": "WWWWWWWW-WWWW-WWWW-WWWW-WWWWWWWWWWWW",
      "domain": "localhost",
      "path": "/",
      "expires": -1,
      "httpOnly": false,
      "secure": false,
      "sameSite": "Lax"
    },
    {
      "name": "_ga_HDXJ95DSHM",
      "value": "GS1.Z.ZZZZZZZZZZ.Z.Z.ZZZZZZZZZZ.Z.Z.Z",
      "domain": "localhost",
      "path": "/",
      "expires": 1755063304.790792,
      "httpOnly": false,
      "secure": false,
      "sameSite": "Lax"
    },
    {
      "name": "applicant-session",
      "value": "AAAAAAAA-BBBB-ZZZ-YYYY-XXXXXXXXXXXX",
      "domain": "localhost",
      "path": "/",
      "expires": -1,
      "httpOnly": false,
      "secure": false,
      "sameSite": "Lax"
    }
  ],
  "origins": []
}

Cookieの使用を避ける

下記をtestコード前に追加することで、storageStateに保存されたcooki情報を使用せずにテストできる。新規登録のフローをテストする際に有効的。

下記コードはファイル内のテストコードすべてに適用される為、storageStateを使用したいテストを切り離す必要がある。

test.use({ storageState: { cookies: [], origins: [] } });

補足

参考文献や公式ページへのリンク

まとめ

本記事では、playwrightによるBasic認証の通し方についてご紹介しました。

この記事を読んでいただきありがとうございます！

基本編