Playwrightを使用してe2eテストの環境を構築

はじめに

ディレクトリ構成は以下を想定しています。

|--app
   |--frontend
   |--backend
   |--e2e

1. 環境構築

詳細は公式を参照

npm init playwright@latest

コンソールで質問に回答する。

✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · false

playwright用の設定ファイルを設定

playwright.config.ts

import { defineConfig, devices } from '@playwright/test';
import 'dotenv/config'

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  timeout: 20000,
  use: {
    baseURL: process.env.CI ? 'http://localhost:8080' : 'http://localhost:5173',
    video: 'on',
    trace: 'on',
  },
  projects: [
    {
      name: 'Google Chrome',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
    },
  ],
});

インストールする

npm install

デフォルトで追加されたサンプルテストを実行

npx playwright test

e2e用のtypescript-eslintをインストール(公式の推奨)

npm install --save-dev eslint @eslint/js @types/eslint__js typescript typescript-eslint

eslintの設定ファイルをe2eディレクトリ直下に作成(公式の設定)

eslint.config.mjs

// @ts-check

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
    eslint.configs.recommended,
    ...tseslint.configs.recommended,
);

2.e2eテストを書く

公式を参考にlogin.spec.tsとlogin.spec.tsを作成。

|--app
   |--frontend
   |--backend
   |--e2e
     |--tests
       |--login.spec.ts
       |--page-objects
         |--login.spec.ts

llogin.page.object.ts

import {Locator, Page} from "@playwright/test"
export class LoginPageObject {
    readonly authLink: Locator;
    constructor(private page: Page) {
        this.authLink = page.getByRole("link", {
            name: "ログイン",
        });

    }
    async goto() {
        await this.page.goto("/");
    }
    async doLogin() {
        await this.goto();
        await this.authLink.click();
        await this.page.waitForURL("/sample");
    }
}

login.spec.ts

import {test} from "@playwright/test";
import {LoginPageObject} from "./page-objects/login.page.object"

test("should display sample page after login is successful", async ({page}) => {
    const loginPageObject = new LoginPageObject(page);

    await loginPageObject.doLogin();
});

アプリを起動した後に、e2eディレクトリで以下のコマンドを実行

npx playwright test