POMのディレクトリ構成

POMを使ったプロジェクトの典型的なディレクトリ構成を紹介します。

基本的な構成

project/
├── pages/                    # Page Objectを格納
│   ├── LoginPage.ts
│   ├── HomePage.ts
│   └── index.ts             # エクスポート用
├── tests/                    # テストファイル
│   ├── login.spec.ts
│   └── home.spec.ts
├── playwright.config.ts
└── package.json

各ファイルの役割

pages/LoginPage.ts

ログインページの要素とアクションを定義:

import { Page, Locator } from '@playwright/test';

export class LoginPage {
  readonly page: Page;
  readonly usernameInput: Locator;
  readonly passwordInput: Locator;
  readonly loginButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.usernameInput = page.locator('#username');
    this.passwordInput = page.locator('#password');
    this.loginButton = page.locator('button[type="submit"]');
  }

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

  async login(username: string, password: string) {
    await this.usernameInput.fill(username);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
  }
}

pages/index.ts

Page Objectをまとめてエクスポート:

export { LoginPage } from './LoginPage';
export { HomePage } from './HomePage';

tests/login.spec.ts

Page Objectを使ったテスト:

import { test, expect } from '@playwright/test';
import { LoginPage } from '../pages';

test('ログインできる', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login('user', 'password');
  await expect(page).toHaveURL('/dashboard');
});

より大規模なプロジェクトの構成

project/
├── pages/
│   ├── components/          # 共通コンポーネント
│   │   ├── Header.ts
│   │   └── Footer.ts
│   ├── auth/                # 認証関連ページ
│   │   ├── LoginPage.ts
│   │   └── RegisterPage.ts
│   ├── BasePage.ts          # 基底クラス
│   └── index.ts
├── tests/
│   ├── auth/
│   │   ├── login.spec.ts
│   │   └── register.spec.ts
│   └── ...
├── helpers/                  # ユーティリティ
│   └── testData.ts
└── fixtures/                 # カスタムfixture
    └── index.ts