【Playwright】 何ができるのか

Playwrightとは

Playwrightは、Microsoftが開発・メンテナンスしているオープンソースのブラウザ自動化ツールです。
E2EやWebスクレイピング、ブラウザ操作の自動化などに利用できます。

E2Eテスト（End-to-End Testing：エンドツーエンドテスト):ユーザーの操作を再現して、アプリケーション全体が正しく動作するかを確認するテスト手法

主な特徴

• 複数ブラウザ対応: Chromium、Firefox、WebKitに対応しており、クロスブラウザテストが可能
• 自動待機機能: 要素が表示されるまで自動的に待機してくれるため、テストが安定しやすい
• 高速実行: ヘッドレスモード（画面を表示せずに実行するモード）での高速実行が可能
• 強力なセレクタ: テキスト、CSS、XPathなど多様なセレクタをサポート
• スクリーンショット・動画撮影: テスト実行時の画面を記録可能
• ネットワークのモック: APIレスポンスを模擬できる
• 多言語サポート: JavaScript/TypeScript、Python、.NET、Javaに対応

何ができるのか

Playwrightを使うと、以下のようなことが実現できます。

1. E2Eテスト

ユーザーの操作をコードで再現し、アプリケーション全体が期待通りに動作するかをテストできます。

test.spec.ts

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

test('ログインテスト', async ({ page }) => {
  // ページにアクセス
  await page.goto('https://example.com/login');
  
  // フォームに入力
  await page.fill('input[name="username"]', 'testuser');
  await page.fill('input[name="password"]', 'password123');
  
  // ログインボタンをクリック
  await page.click('button[type="submit"]');
  
  // ログイン後のページに遷移したことを確認
  await expect(page).toHaveURL('https://example.com/trends');
  await expect(page.locator('h1')).toHaveText('トレンド');
});

2. Webスクレイピング

Webページから情報を自動で収集できます。

scraping.ts

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com/news');
  
  // ニュースのタイトルを取得
  const titles = await page.$$eval('h2.news-title', elements => 
    elements.map(el => el.textContent)
  );
  
  console.log(titles);
  await browser.close();
})();

3. スクリーンショットの自動取得

ページ全体や特定要素のスクリーンショットを撮影できます。

screenshot.ts

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com');
  
  // ページ全体のスクリーンショット
  await page.screenshot({ path: 'full-page.png', fullPage: true });
  
  // 特定要素のスクリーンショット
  const element = page.locator('.hero-section');
  await element.screenshot({ path: 'hero.png' });
  
  await browser.close();
})();

Playwrightのメリット

1. セットアップが簡単

npm init playwright@latest

このコマンド一つで、必要な設定やサンプルテストが自動生成されます。

2. 自動待機が優秀

従来のSeleniumなどでは、要素の表示を待つために明示的に待機処理を書く必要がありましたが、Playwrightは自動的に要素が操作可能になるまで待機してくれます。

3. デバッグが容易

• Playwrightインスペクタ: テスト実行をステップバイステップで確認できる
• Trace Viewer: テストの実行履歴を可視化して分析できる
• コードジェネレータ: 手動でブラウザ操作を行うと、その操作に対応するコードを自動生成

# デバッグモードで実行
npx playwright test --debug

# コードジェネレータの起動
npx playwright codegen https://example.com

4. 並列実行に対応

デフォルトで複数のテストを並列実行でき、テスト時間を大幅に短縮できます。

Playwrightのデメリット

1. リソース消費

複数ブラウザを同時起動するため、メモリやCPUの使用量が多くなる場合があります。

2. 動的コンテンツへの対応

非常に複雑な動的コンテンツの場合、適切な待機条件を設定する必要があることがあります。

まとめ

Playwrightは、モダンなブラウザ自動化ツールとして以下の点で優れています。

• セットアップが簡単: コマンド一つで環境構築完了
• 自動待機: 不安定なテストを減らせる
• クロスブラウザ: 複数ブラウザで同じテストを実行可能
• 充実したデバッグツール: 問題の特定が容易
• 高速実行: 並列実行で時間短縮

E2Eテストの導入を検討している方、既存のテストツールに不満がある方は、ぜひPlaywrightを試してみてください。

参考資料