ブラウザ操作を自動でコードに落とし込む強力なE2EテストツールPlaywright

2025/01/19に公開

TL;DR

ブラウザ操作をコード化して欲しいときにこれでOK

npx playwright codegen

Recordingをクリックして画面をポチポチすれば、勝手にコードにしてくれる。

Playwrightとは

https://playwright.dev/docs/intro

Playwrightは、マイクロソフトが開発したE2E(End-to-End)テストツールです。
とにかく便利なツールで、テストを効率化してくれます

自動コード生成を試す

  1. Playwrightをインストールします
npm init playwright@latest
  1. codegenコマンドを実行します
npx playwright codegen
  1. 表示されたブラウザでRecordをクリックして操作を記録。

    • クリックやフォーム入力などの操作が自動でコードとして出力されます。
  2. 記録が終わったら、コードをエクスポートして使用。

以下は、簡単な例としてGoogle検索を自動化するコード:

const { test, expect } = require('@playwright/test');

test('Google検索', async ({ page }) => {
  await page.goto('https://www.google.com');
  await page.fill('input[name="q"]', 'Playwright');
  await page.press('input[name="q"]', 'Enter');
  await page.waitForSelector('text=Playwright');
});

Playwrightの活用例

1. クロスブラウザテスト

Chromium、Firefox、WebKitでの動作確認を一括で行えます。

npx playwright test --browser=all

2. Visual Testing

スクリーンショットを撮影し、ビジュアル差分をチェックすることで、UIの変更を検知できます。

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

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveScreenshot({ maxDiffPixels: 100 });
});

3. CI/CDとの統合

GitHub ActionsやJenkinsなどのCI/CDパイプラインに簡単に組み込めます。

以下はGitHub Actionsの例:

name: Playwright Tests

on:
  push:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test

まとめ

Playwrightは、高速かつ機能な豊富なE2Eテストツールとして、開発効率を飛躍的に向上させてくれそうです。
特にnpx playwright codegenによる自動コード生成機能は、初心者にとっても取っ付きやすく、テストコードの開発時間短縮に役立ちそうです。

Discussion