Page Object Modelとは？

Page Object Model（POM）は、E2Eテストのコードを整理するためのデザインパターンです。

基本的な考え方

POMでは、Webページの構造とテストの内容を分離します。

POMなしの場合

test('ログインテスト', async ({ page }) => {
  await page.goto('/login');
  await page.locator('#username').fill('user1');
  await page.locator('#password').fill('pass123');
  await page.locator('button[type="submit"]').click();
  await expect(page.locator('.welcome')).toBeVisible();
});

test('別のログインテスト', async ({ page }) => {
  await page.goto('/login');
  await page.locator('#username').fill('user2');  // 同じコードの繰り返し
  await page.locator('#password').fill('pass456');
  await page.locator('button[type="submit"]').click();
  // ...
});

POMありの場合

// pages/LoginPage.ts
export class LoginPage {
  constructor(private page: Page) {}

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

  async login(username: string, password: string) {
    await this.page.locator('#username').fill(username);
    await this.page.locator('#password').fill(password);
    await this.page.locator('button[type="submit"]').click();
  }
}

// tests/login.spec.ts
test('ログインテスト', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login('user1', 'pass123');
});

POMの構成要素

1. Page Object: ページの要素とアクションを定義するクラス
2. テストファイル: Page Objectを使ってテストを書くファイル

次のステップ

次のチャプターでは、なぜPOMを使うべきかをさらに詳しく説明します。