title: 演習: ログインページのPOM化

演習: ログインページのPOM化

実際にログインページのPage Objectを作成してみましょう。

対象ページ

以下のような構成のログインページを想定します：

ユーザー名入力フィールド
パスワード入力フィールド
ログインボタン
「パスワードを忘れた」リンク
エラーメッセージ表示エリア

演習1: 基本的なPage Objectを作成

以下のコードを完成させてください。

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

export class LoginPage {
  readonly page: Page;
  // TODO: 要素を定義してください
  // - usernameInput
  // - passwordInput
  // - loginButton
  // - forgotPasswordLink
  // - errorMessage

  constructor(page: Page) {
    this.page = page;
    // TODO: 各要素にロケーターを設定してください
  }

  // TODO: 以下のメソッドを実装してください
  // - goto(): ログインページに移動
  // - login(username, password): ログイン操作
  // - clickForgotPassword(): パスワード忘れリンクをクリック
  // - getErrorMessage(): エラーメッセージを取得
}

解答例

クリックして解答を表示

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

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

  constructor(page: Page) {
    this.page = page;
    this.usernameInput = page.getByRole('textbox', { name: 'ユーザー名' });
    this.passwordInput = page.getByRole('textbox', { name: 'パスワード' });
    this.loginButton = page.getByRole('button', { name: 'ログイン' });
    this.forgotPasswordLink = page.getByRole('link', { name: 'パスワードを忘れた' });
    this.errorMessage = page.locator('.error-message');
  }

  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();
  }

  async clickForgotPassword() {
    await this.forgotPasswordLink.click();
  }

  async getErrorMessage(): Promise<string> {
    return await this.errorMessage.textContent() ?? '';
  }
}

演習2: テストを作成

作成したPage Objectを使って、以下のテストを書いてください。

ログインフォームが表示されることを確認
正しい認証情報でログインできることを確認
間違った認証情報でエラーが表示されることを確認

解答例

クリックして解答を表示

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

test.describe('ログインページ', () => {
  let loginPage: LoginPage;

  test.beforeEach(async ({ page }) => {
    loginPage = new LoginPage(page);
    await loginPage.goto();
  });

  test('ログインフォームが表示される', async () => {
    await expect(loginPage.usernameInput).toBeVisible();
    await expect(loginPage.passwordInput).toBeVisible();
    await expect(loginPage.loginButton).toBeVisible();
  });

  test('正しい認証情報でログインできる', async ({ page }) => {
    await loginPage.login('testuser', 'password123');
    await expect(page).toHaveURL('/dashboard');
  });

  test('間違った認証情報でエラーが表示される', async () => {
    await loginPage.login('wronguser', 'wrongpass');
    await expect(loginPage.errorMessage).toBeVisible();
    const message = await loginPage.getErrorMessage();
    expect(message).toContain('認証に失敗');
  });
});

🎯 チェックポイント

Page Objectにページの要素が正しく定義されているか
メソッドが適切に分割されているか
テストがPage Objectを使って書かれているか