Fixtureを使ったページの注入

Playwrightのfixtureを使って、Page Objectを効率的に管理する方法を学びます。

Fixtureとは？

Fixtureは、テストに必要なオブジェクトを自動的に準備・提供する仕組みです。

カスタムFixtureの作成

// fixtures.ts
import { test as base } from '@playwright/test';
import { LoginPage } from './pages/LoginPage';
import { DashboardPage } from './pages/DashboardPage';

// カスタムfixtureの型定義
type MyFixtures = {
  loginPage: LoginPage;
  dashboardPage: DashboardPage;
};

// fixtureを拡張
export const test = base.extend<MyFixtures>({
  loginPage: async ({ page }, use) => {
    const loginPage = new LoginPage(page);
    await use(loginPage);
  },
  dashboardPage: async ({ page }, use) => {
    const dashboardPage = new DashboardPage(page);
    await use(dashboardPage);
  },
});

export { expect } from '@playwright/test';

Fixtureを使ったテスト

// tests/login.spec.ts
import { test, expect } from '../fixtures';

test('ログインできる', async ({ loginPage, dashboardPage }) => {
  // Page Objectが自動的に注入される
  await loginPage.goto();
  await loginPage.login('user', 'password');

  await expect(dashboardPage.welcomeMessage).toBeVisible();
});

Fixtureのメリット

Before

// 毎回Page Objectを作成する必要がある
test('テスト1', async ({ page }) => {
  const loginPage = new LoginPage(page);
  const dashboardPage = new DashboardPage(page);
  // ...
});

test('テスト2', async ({ page }) => {
  const loginPage = new LoginPage(page);  // 同じコード
  const dashboardPage = new DashboardPage(page);  // 同じコード
  // ...
});

After

// Fixtureから自動的に受け取る
test('テスト1', async ({ loginPage, dashboardPage }) => {
  // すぐに使える
});

test('テスト2', async ({ loginPage, dashboardPage }) => {
  // すぐに使える
});

ログイン済み状態のFixture

よく使うパターン: ログイン済みの状態からテストを開始する

// fixtures.ts
export const test = base.extend<MyFixtures>({
  // ログイン済みのページ
  authenticatedPage: async ({ page }, use) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login('testuser', 'password');
    await page.waitForURL('/dashboard');
    await use(page);
  },

  // ログイン済み状態のダッシュボード
  dashboardPage: async ({ authenticatedPage }, use) => {
    const dashboardPage = new DashboardPage(authenticatedPage);
    await use(dashboardPage);
  },
});