Playwrightの実践テクニック — ページ操作・待機・認証・API連携

import { test, expect } from '@playwright/test';
 
test('商品をカートに追加できる', async ({ page }) => {
  await page.goto('/products');
 
  await page
    .getByRole('listitem')
    .filter({ hasText: 'ワイヤレスキーボード' })
    .getByRole('button', { name: 'カートに追加' })
    .click();
 
  await expect(page.getByText('カートに追加しました')).toBeVisible();
});

page.getByRole(role, options?)

page.getByLabel(text, options?)

page.getByText(text, options?)
page.getByTestId(testId)

// アプリ側
<button data-testid="profile-menu-button" aria-label="プロフィールメニュー">
  <IconUser />
</button>

// テスト側
await page.getByTestId('profile-menu-button').click();

// 固定時間待ちは不要
await page.getByRole('button', { name: '保存' }).click();
 
// アサーションも一定時間リトライされる
await expect(page.getByText('保存しました')).toBeVisible();

await page.waitForResponse(urlOrPredicate, options?)
await page.waitForURL(urlOrPredicate, options?)
await locator.waitFor(options?)

test('注文を確定できる', async ({ page }) => {
  await page.goto('/checkout');
 
  const responsePromise = page.waitForResponse((response) => {
    return response.url().includes('/api/orders') && response.status() === 201;
  });
 
  await page.getByRole('button', { name: '注文を確定' }).click();
 
  const response = await responsePromise;
  const order = await response.json();
 
  expect(order.id).toMatch(/^order_/);
  await expect(page).toHaveURL(/\/orders\/order_/);
});

// tests/auth.setup.ts
import { test as setup, expect } from '@playwright/test';
 
const authFile = 'playwright/.auth/user.json';
 
setup('認証状態を保存する', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('メールアドレス').fill('alice@example.com');
  await page.getByLabel('パスワード').fill(process.env.E2E_PASSWORD ?? '');
  await page.getByRole('button', { name: 'ログイン' }).click();
 
  await expect(page).toHaveURL('/dashboard');
  await page.context().storageState({ path: authFile });
});

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';
 
export default defineConfig({
  projects: [
    {
      name: 'setup',
      testMatch: /.*\.setup\.ts/,
    },
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        storageState: 'playwright/.auth/user.json',
      },
      dependencies: ['setup'],
    },
  ],
});

// global-setup.ts
import { chromium, type FullConfig } from '@playwright/test';
 
async function globalSetup(config: FullConfig) {
  const baseURL = config.projects[0].use.baseURL ?? 'http://localhost:3000';
  const browser = await chromium.launch();
  const page = await browser.newPage();
 
  await page.goto(`${baseURL}/login`);
  await page.getByLabel('メールアドレス').fill('alice@example.com');
  await page.getByLabel('パスワード').fill(process.env.E2E_PASSWORD ?? '');
  await page.getByRole('button', { name: 'ログイン' }).click();
  await page.waitForURL('**/dashboard');
 
  await page.context().storageState({ path: 'playwright/.auth/user.json' });
  await browser.close();
}
 
export default globalSetup;

// playwright.config.ts
import { defineConfig } from '@playwright/test';
 
export default defineConfig({
  globalSetup: './global-setup.ts',
  use: {
    baseURL: 'http://localhost:3000',
    storageState: 'playwright/.auth/user.json',
  },
});

await page.context().storageState(options?)

await page.route(url, handler, options?)

test('在庫切れの商品を表示できる', async ({ page }) => {
  await page.route('**/api/products/keyboard', async (route) => {
    await route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({
        id: 'keyboard',
        name: 'ワイヤレスキーボード',
        stock: 0,
      }),
    });
  });
 
  await page.goto('/products/keyboard');
 
  await expect(page.getByRole('heading', { name: 'ワイヤレスキーボード' })).toBeVisible();
  await expect(page.getByText('在庫切れ')).toBeVisible();
  await expect(page.getByRole('button', { name: 'カートに追加' })).toBeDisabled();
});

test('キャンペーン価格を表示できる', async ({ page }) => {
  await page.route('**/api/products/*', async (route) => {
    const response = await route.fetch();
    const product = await response.json();
 
    await route.fulfill({
      response,
      json: {
        ...product,
        campaignPrice: 3980,
      },
    });
  });
 
  await page.goto('/products/keyboard');
 
  await expect(page.getByText('キャンペーン価格')).toBeVisible();
  await expect(page.getByText('3,980円')).toBeVisible();
});

// playwright.config.ts
import { defineConfig } from '@playwright/test';
 
export default defineConfig({
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
  },
 
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    timeout: 120 * 1000,
    reuseExistingServer: !process.env.CI,
  },
});

use: {
  baseURL: 'http://localhost:3000'
}

webServer: {
  command: 'npm run dev',
  url: 'http://localhost:3000',
  reuseExistingServer: !process.env.CI,
}

await expect(page).toHaveScreenshot(name?, options?)
await expect(locator).toHaveScreenshot(name?, options?)

test('料金ページの主要レイアウトが崩れていない', async ({ page }) => {
  await page.goto('/pricing');
 
  await expect(page).toHaveScreenshot('pricing-page.png', {
    fullPage: true,
    animations: 'disabled',
    mask: [page.getByTestId('current-time')],
  });
});

// NG — 何を待っているのかわからない
test.setTimeout(60_000);
await page.waitForTimeout(10_000);
 
// OK — 保存APIと完了メッセージを待つ
const responsePromise = page.waitForResponse('**/api/profile');
await page.getByRole('button', { name: '保存' }).click();
await responsePromise;
await expect(page.getByText('保存しました')).toBeVisible();

// NG
await page.getByRole('button', { name: '検索' }).click();
await page.waitForResponse('**/api/search');
 
// OK
const responsePromise = page.waitForResponse('**/api/search');
await page.getByRole('button', { name: '検索' }).click();
await responsePromise;

await page
  .frameLocator('iframe[title="決済フォーム"]')
  .getByLabel('カード番号')
  .fill('4242 4242 4242 4242');

await page.getByRole('button', { name: '詳細を開く' }).click();
await expect(page.getByText('追加情報')).toBeVisible();