1. Playwrightの基本概念とSeleniumとの比較

Playwrightは、Microsoft社が2020年に公開したNode.js向けブラウザ自動操作ライブラリである。Chrome、Firefox、Safariの3大ブラウザに対応し、単一のAPIで統一的な操作が可能となっている。

1.1 Playwrightの動作アーキテクチャ

Playwrightの動作フローを以下に示す。JavaScriptコードからPlaywright APIを介してブラウザを操作する構造となっている。

1.2 Seleniumとの機能比較

Playwrightの最大の特徴は「自動待機（Auto-waiting）」機能である。従来のSeleniumでは、ページ読み込み完了前に要素操作を試みるとエラーが発生するため、明示的な待機処理の実装が必要であった。

1.3 browserとpageの関係

Playwrightのオブジェクトモデルでは、browserがブラウザ本体、pageがタブに対応する。1つのbrowserインスタンスから複数のpageを生成可能である。

2. 実践的なコード例と操作一覧

2.1 基本的なセットアップ

Playwrightのインストールは以下のコマンドで行う。初回実行時にChrome、Firefox、Safariのブラウザバイナリが自動的にダウンロードされる。

npm install playwright

最小構成のコード例を以下に示す。非同期処理（async/await）を用いてブラウザ操作を記述する。

const { chromium } = require('playwright');

async function main() {
    const browser = await chromium.launch();  // ブラウザ起動
    const page = await browser.newPage();     // 新しいタブを開く
    await page.goto('https://example.com');   // URLにアクセス
    console.log(await page.title());          // タイトルを取得
    await browser.close();                    // ブラウザを閉じる
}

main();

2.2 セレクタと主要操作

要素の指定にはCSSセレクタまたはテキストセレクタを使用する。Playwrightではtext=構文により、表示テキストでの要素指定が可能である。

2.3 ログイン処理のシーケンス

典型的なログイン処理の流れを以下に示す。フォーム入力からページ遷移までの一連の操作を可視化した。

2.4 実行モードの比較

Playwrightには画面表示の有無によって2つの実行モードが存在する。開発・デバッグ時はヘッドフルモード、本番運用時はヘッドレスモードの使用が推奨される。

// ヘッドフルモード（画面表示あり）
const browser = await chromium.launch({ headless: false });

// ヘッドレスモード（画面表示なし、デフォルト）
const browser = await chromium.launch({ headless: true });

3. エラーハンドリングと運用のポイント

3.1 待機処理の設計指針

待機処理の実装においては、固定時間待機（waitForTimeout）の使用を避け、条件ベースの待機を採用すべきである。固定時間待機は、待機時間が短すぎると要素未出現でエラー、長すぎると実行時間の無駄が発生するためである。

3.2 エラーハンドリングパターン

堅牢な自動化スクリプトには、適切なエラーハンドリングが不可欠である。タイムアウト設定、try-catch構文、エラー時のスクリーンショット保存を組み合わせることで、問題発生時の原因特定が容易になる。

async function login(page, username, password) {
    try {
        await page.fill('#username', username);
        await page.fill('#password', password);
        await page.click('#login', { timeout: 5000 });
        await page.waitForNavigation();
        console.log('ログイン成功');
        return true;
    } catch (error) {
        console.log('ログイン失敗:', error.message);
        await page.screenshot({ path: 'error.png' });
        return false;
    }
}

3.3 ページ遷移時の待機テクニック

クリック操作とページ遷移が連動する場合、Promise.allを用いて両方のイベントを同時に待機する手法が有効である。

// クリックとページ遷移を同時に待機
await Promise.all([
    page.waitForNavigation(),
    page.click('#login')
]);

3.4 学習チェックリスト