Playwrightがブラウザ自動化を制覇する理由：徹底解析

Last updated at 2024-12-23Posted at 2024-12-23

Playwrightの概要

Playwrightは、Microsoftが開発したWeb UI自動化テストフレームワークです。
Playwrightは、クロスプラットフォーム、クロス言語、クロスブラウザをサポートし、モバイルブラウザにも対応しています。

公式サイトに記載されている内容:

自動待機、ページ要素に対するインテリジェントなアサーション、実行トレース機能により、Webページの不安定さを効果的に扱うことができます。
テストを実行しているプロセスとは異なるプロセスでブラウザを制御することで、インプロセステストランナーの制限を排除し、Shadow DOMの操作もサポートします。
Playwrightは各テストに対してブラウザコンテキストを作成します。ブラウザコンテキストは新しいブラウザプロフィールと同じ意味を持ち、ゼロコストで完全なテストの隔離を提供します。新しいブラウザコンテキストの作成には数ミリ秒しかかかりません。
コード生成、ステップバイステップデバッグ、トレースビューワーなどの機能を提供しています。

Playwright vs. Selenium vs. Cypress

現在利用可能な最も優れたWeb UI自動化テストフレームワークには、10年以上の歴史を持つSelenium、最近人気のCypress、そしてここで紹介するPlaywrightがあります。これらはどのように異なるのでしょうか？以下に比較をまとめました。

特徴	Playwright	Selenium	Cypress
サポートされている言語	JavaScript, Java, C#, Python	JavaScript, Java, C#, Python, Ruby	JavaScript/TypeScript
サポートされているブラウザ	Chrome, Edge, Firefox, Safari	Chrome, Edge, Firefox, Safari, IE	Chrome, Edge, Firefox, Safari
テストフレームワーク	言語ごとのフレームワーク	言語ごとのフレームワーク	言語ごとのフレームワーク
使いやすさ	簡単に使える	設定が複雑で学習曲線がある	簡単に使える
コードの複雑さ	シンプル	やや複雑	シンプル
DOM操作	シンプル	やや複雑	シンプル
コミュニティの成熟度	徐々に成長中	高い成熟度	かなり成熟している
ヘッドレスモードサポート	はい	はい	はい
並列処理サポート	サポートあり	サポートあり	CI/CDツールによる
iframeサポート	サポートあり	サポートあり	プラグインを通じてサポート
ドライバ	必要なし	ブラウザ固有のドライバが必要	必要なし
複数タブ操作	サポートあり	サポートなし	サポートあり
ドラッグ＆ドロップ	サポートあり	サポートあり	サポートあり
組み込みレポーティング	はい	いいえ	はい
クロスオリジンサポート	サポートあり	サポートあり	サポートあり
組み込みデバッグ	はい	いいえ	はい
自動待機	はい	いいえ	はい
組み込みスクリーンショット/ビデオ	はい	ビデオ録画なし	はい

主要な比較:

サポートされている言語: PlaywrightとSeleniumはJava、C#、Pythonをサポートしており、これらの言語に精通しているテストエンジニアにとって人気があります。
技術的アプローチ: PlaywrightとSeleniumは、Googleのリモートデバッグプロトコルを使ってChromiumベースのブラウザを制御します。Firefoxなどのブラウザには、JavaScriptインジェクションを使用します。Seleniumはこれをドライバでカプセル化し、Playwrightは直接呼び出します。CypressはJavaScriptを使ってブラウザを制御します。
ブラウザのサポート: SeleniumはInternet Explorerもサポートしていますが、IEは廃止されつつあるため、あまり意味はありません。
使いやすさ: すべてのフレームワークに学習曲線がありますが、PlaywrightとCypressはSeleniumよりも簡単に使えると感じる人が多いです。

始め方

Playwrightは複数の言語をサポートしていますが、特にNode.jsに依存しています。PythonやJavaを使用する場合でも、初期化時にNode.js環境が必要で、Node.jsドライバをダウンロードします。そのため、ここではJavaScript/TypeScriptを中心に説明します。

インストールとデモ

Node.jsがインストールされていることを確認します。

Playwrightプロジェクトをnpmまたはyarnで初期化します:

# npmを使用
npm init playwright@latest

# yarnを使用
yarn create playwright

プロンプトに従って設定します:
- TypeScriptまたはJavaScriptを選択します（デフォルトはTypeScript）。
- テストディレクトリ名を指定します。
- Playwrightサポートブラウザをインストールするかどうかを選択します（デフォルトはTrue）。
ブラウザをダウンロードする場合、PlaywrightはChromium、Firefox、WebKitをダウンロードします。初回セットアップ時に時間がかかりますが、Playwrightのバージョンが更新されない限り、このプロセスは1回のみ実行されます。

プロジェクト構造

初期化後、以下のようなプロジェクトテンプレートが作成されます:

playwright.config.ts    # Playwright設定ファイル
package.json            # Node.js設定ファイル
package-lock.json       # Node.js依存関係ロックファイル
tests/                  # テストディレクトリ
  example.spec.ts       # テンプレートテストケース
tests-examples/         # サンプルテストディレクトリ
  demo-todo-app.spec.ts # サンプルテストケース

サンプルテストを実行:

npx playwright test

テストはサイレント（ヘッドレスモード）で実行され、結果は次のように表示されます:

6つのテストを6ワーカーで実行中

  6つのテストが合格（10秒）

最後のHTMLレポートを開くには、次を実行してください:

  npx playwright show-report

サンプルソースコード

example.spec.tsのテストケース例:

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

test('タイトルがあることを確認', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

test('「Get started」リンクをクリック', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page).toHaveURL(/.*intro/);
});

最初のテスト: ページタイトルに「Playwright」が含まれていることを確認。
2番目のテスト: 「Get started」リンクをクリックし、URLを確認。

各testメソッドは:

テスト名（例: 'タイトルがあることを確認'）。
関数を実行してテストロジックを実行します。

主なメソッド:

page.goto: URLに移動。
expect(page).toHaveTitle: ページタイトルをアサート。
page.getByRole: ロールで要素を探します。
`await

expect(page).toHaveURL`: 現在のページURLをアサート。

タイピングキャラクター

locator.type() メソッドは、文字ごとに入力をシミュレートし、keydown、keyup、および keypress イベントをトリガーします：

await page.locator('#area').type('Hello World!');

特殊キー

特殊キーには locator.press() を使用します：

// Enterキー
await page.getByText('Submit').press('Enter');

// Ctrl+右矢印
await page.getByRole('textbox').press('Control+ArrowRight');

// ドルキー
await page.getByRole('textbox').press('$');

サポートされているキーには、Backquote、Minus、Equal、Backslash、Backspace、Tab、Delete、Escape、ArrowDown、End、Enter、Home、Insert、PageDown、PageUp、ArrowRight、ArrowUp、F1-F12、Digit0-Digit9、KeyA-KeyZ などがあります。

ファイルアップロード

locator.setInputFiles() を使用して、アップロードするファイルを指定します。複数のファイルもサポートされています：

// ファイルのアップロード
await page.getByLabel('Upload file').setInputFiles('myfile.pdf');

// 複数ファイルのアップロード
await page.getByLabel('Upload files').setInputFiles(['file1.txt', 'file2.txt']);

// ファイルの削除
await page.getByLabel('Upload file').setInputFiles([]);

// バッファからのアップロード
await page.getByLabel('Upload file').setInputFiles({
  name: 'file.txt',
  mimeType: 'text/plain',
  buffer: Buffer.from('this is test')
});

フォーカス

locator.focus() を使用して、要素にフォーカスを設定します：

await page.getByLabel('Password').focus();

ドラッグアンドドロップ

ドラッグアンドドロップのプロセスには4つのステップがあります：

ドラッグする要素の上にマウスをホバーします。
左クリックを押します。
ターゲット位置にマウスを移動します。
左クリックを放します。

locator.dragTo() メソッドを使用して実行できます：

await page.locator('#item-to-be-dragged').dragTo(page.locator('#item-to-drop-at'));

または、手動でプロセスを実装することもできます：

await page.locator('#item-to-be-dragged').hover();
await page.mouse.down();
await page.locator('#item-to-drop-at').hover();
await page.mouse.up();

ダイアログ処理

デフォルトでは、Playwrightは alert、confirm、prompt のようなダイアログを自動的にキャンセルします。ダイアログを受け入れるために事前にダイアログハンドラを登録することができます：

page.on('dialog', dialog => dialog.accept());
await page.getByRole('button').click();

新しいページのハンドリング

新しいページがポップアップする場合、popup イベントを使用して処理できます：

const newPagePromise = page.waitForEvent('popup');
await page.getByText('Click me').click();
const newPage = await newPagePromise;
await newPage.waitForLoadState();
console.log(await newPage.title());