Zenn
🫠

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

2024/12/23に公開
JavaScript
Python
Web
testing
tech

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を中心に説明します。

インストールとデモ

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

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

    # npmを使用
npm init playwright@latest

# yarnを使用
yarn create playwright

  3. プロンプトに従って設定します:

    • 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つのステップがあります：

  1. ドラッグする要素の上にマウスをホバーします。
  2. 左クリックを押します。
  3. ターゲット位置にマウスを移動します。
  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());

Playwrightに最適なプラットフォーム: Leapcell

Leapcell は、分散アプリケーション向けに設計された最新のクラウドコンピューティングプラットフォームです。従量課金制を採用しており、アイドル時間のコストが発生せず、使用したリソースにのみ料金を支払います。

1. 多言語サポート

  • JavaScript、Python、Go、Rustで開発可能。

無制限のプロジェクトを無料でデプロイ

  • 使用量に応じて支払い — リクエストがない場合、料金は発生しません。

2. 圧倒的なコスト効率

  • 従量課金制でアイドル時間の料金は発生しません。
  • 例: $25で、平均応答時間60msで694万件のリクエストをサポート。

3. スムーズな開発者体験

  • 設定が簡単な直感的なUI。
  • 完全自動化されたCI/CDパイプラインとGitOps統合。
  • 実行可能なインサイトを提供するリアルタイムのメトリクスとログ。

4. 効率的なスケーラビリティと高パフォーマンス

  • 高い並列処理を簡単に処理する自動スケーリング。
  • 運用オーバーヘッドゼロ — 開発に集中できます。

詳細はドキュメントをご覧ください！

Leapcell Twitter: https://x.com/LeapcellHQ

Discussion