Playwright でログインフローの E2E テストを書く

概要

Playwright で Page Object Model (POM) パターンを使ったログインフローのテストを実装する。 認証状態を storageState で保存・再利用することで、認証済みテストの高速化を図る。

インストール

npm install --save-dev @playwright/test
npx playwright install

Page Object

// tests/pages/LoginPage.ts
import { type Page, type Locator } from "@playwright/test";

export class LoginPage {
  readonly page: Page;
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly submitButton: Locator;
  readonly errorMessage: Locator;

  constructor(page: Page) {
    this.page = page;
    this.emailInput = page.getByLabel("メールアドレス");
    this.passwordInput = page.getByLabel("パスワード");
    this.submitButton = page.getByRole("button", { name: "ログイン" });
    this.errorMessage = page.getByRole("alert");
  }

  async goto() {
    await this.page.goto("/login");
  }

  async login(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
  }
}

テスト実装

// tests/login.spec.ts
import { test, expect } from "@playwright/test";
import { LoginPage } from "./pages/LoginPage";

test.describe("ログインフォーム", () => {
  test("正常なログイン", async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login("user@example.com", "password123");
    await expect(page).toHaveURL("/dashboard");
  });

  test("バリデーションエラーが表示される", async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login("invalid-email", "short");
    await expect(loginPage.errorMessage).toBeVisible();
  });
});

ポイント

• getByLabel / getByRole を使うことでアクセシビリティに沿ったセレクタにする
• Page Object でページ操作をカプセル化し、テストの可読性と再利用性を高める
• storageState で認証済み状態を保存すれば認証不要なテストを高速化できる