✨
ブラウザ操作を自動でコードに落とし込む強力なE2EテストツールPlaywright
TL;DR
ブラウザ操作をコード化して欲しいときにこれでOK
npx playwright codegen
Recordingをクリックして画面をポチポチすれば、勝手にコードにしてくれる。
Playwrightとは
Playwrightは、マイクロソフトが開発したE2E(End-to-End)テストツールです。
とにかく便利なツールで、テストを効率化してくれます
自動コード生成を試す
- Playwrightをインストールします
npm init playwright@latest
-
codegen
コマンドを実行します
npx playwright codegen
-
表示されたブラウザで
Record
をクリックして操作を記録。- クリックやフォーム入力などの操作が自動でコードとして出力されます。
-
記録が終わったら、コードをエクスポートして使用。
以下は、簡単な例として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