テストでPage Objectを使う

作成したPage Objectをテストで使う方法を学びます。

基本的な使い方

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

test('ログインできる', async ({ page }) => {
  // Page Objectのインスタンスを作成
  const loginPage = new LoginPage(page);

  // Page Objectのメソッドを使う
  await loginPage.goto();
  await loginPage.login('testuser', 'password123');

  // アサーション
  await expect(page).toHaveURL('/dashboard');
});

複数のPage Objectを使う

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

test('ログイン後にダッシュボードが表示される', async ({ page }) => {
  const loginPage = new LoginPage(page);
  const dashboardPage = new DashboardPage(page);

  // ログイン
  await loginPage.goto();
  await loginPage.login('testuser', 'password123');

  // ダッシュボードの確認
  await expect(dashboardPage.welcomeMessage).toBeVisible();
  const username = await dashboardPage.getUsername();
  expect(username).toBe('testuser');
});

beforeEachでPage Objectを初期化

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

test.describe('ログイン機能', () => {
  let loginPage: LoginPage;

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

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

  test('間違ったパスワードでエラーが表示される', async () => {
    await loginPage.login('user', 'wrong');
    await expect(loginPage.errorMessage).toBeVisible();
  });

  test('空のフォームでエラーが表示される', async () => {
    await loginPage.submit();
    await expect(loginPage.errorMessage).toBeVisible();
  });
});

Page Objectの要素を直接使う

Page Objectのプロパティ（Locator）を直接使うこともできます。

test('ログインボタンが表示されている', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();

  // Page Objectの要素を直接使ってアサーション
  await expect(loginPage.loginButton).toBeVisible();
  await expect(loginPage.loginButton).toHaveText('ログイン');
});

テストの構成例

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

test.describe('認証フロー', () => {
  test('新規ユーザーがログインできる', async ({ page }) => {
    const loginPage = new LoginPage(page);
    const dashboardPage = new DashboardPage(page);

    await loginPage.goto();
    await loginPage.login('newuser', 'password');

    await expect(dashboardPage.welcomeMessage).toContainText('ようこそ');
  });

  test('無効な認証情報でエラーになる', async ({ page }) => {
    const loginPage = new LoginPage(page);

    await loginPage.goto();
    await loginPage.login('invalid', 'invalid');

    const error = await loginPage.getErrorMessage();
    expect(error).toContain('認証に失敗しました');
  });
});