Playwright: Web UI 自動テスト フレームワークの包括的な概要
PlayWright は、Microsoft によって開発された Web UI 自動テスト フレームワークです。
モバイル ブラウザもサポートする、クロスプラットフォーム、クロス言語、クロスブラウザの自動テスト フレームワークを提供することを目的としています。
公式ホームページに記載されているとおり:
- 自動待機、ページ要素のインテリジェントなアサーション、実行トレースにより、Web ページの不安定性の処理に非常に効果的です。
- テストを実行しているプロセスとは異なるプロセスでブラウザを制御し、プロセス内テスト ランナーの制限を排除し、Shadow DOM の侵入をサポートします。
- PlayWright は各テストのブラウザ コンテキストを作成します。ブラウザー コンテキストは、まったく新しいブラウザー プロファイルと同等であり、ゼロコストで完全なテスト分離を可能にします。新しいブラウザ コンテキストの作成には、わずか数ミリ秒しかかかりません。
- コード生成、ステップバイステップのデバッグ、トレース ビューアなどの機能を提供します。
PlayWright vs. Selenium vs. Cypress
現在利用可能な最高の Web UI 自動テスト フレームワークは何ですか?傑出したオプションには、10 年前の Selenium、最近人気のある Cypress、そしてここで紹介する PlayWright が含まれます。どう違うのでしょうか？以下は参考までに比較をまとめたものです
| Feature | PlayWright | Selenium | Cypress |
|---|---|---|---|
| Supported Languages | JavaScript, Java, C#, Python | JavaScript, Java, C#, Python, Ruby | JavaScript/TypeScript |
| Supported Browsers | Chrome, Edge, Firefox, Safari | Chrome, Edge, Firefox, Safari, IE | Chrome, Edge, Firefox, Safari |
| Testing Framework | Frameworks for supported languages | Frameworks for supported languages | Frameworks for supported languages |
| Usability | Easy to use and configure | Complex setup with a learning curve | Easy to use and configure |
| Code Complexity | Simple | Moderate | Simple |
| DOM Manipulation | Simple | Moderate | Simple |
| Community Maturity | Improving gradually | Highly mature | Fairly mature |
| Headless Mode Support | Yes | Yes | Yes |
| Concurrency Support | Supported | Supported | Depends on CI/CD tools |
| iframe Support | Supported | Supported | Supported via plugins |
| Driver | Not required | Requires a browser-specific driver | Not required |
| Multi-Tab Operations | Supported | Not supported | Supported |
| Drag and Drop | Supported | Supported | Supported |
| Built-in Reporting | Yes | No | Yes |
| Cross-Origin Support | Supported | Supported | Supported |
| Built-in Debugging | Yes | No | Yes |
| Automatic Wait | Yes | No | Yes |
| Built-in Screenshot/Video | Yes | No video recording | Yes |
主な比較:
- サポートされている言語: PlayWright と Selenium は Java、C#、Python をサポートしているため、JavaScript/TypeScript に詳しくないテスト エンジニアの間でより人気があります。
- 技術的アプローチ: PlayWright と Selenium はどちらも、Google のリモート デバッグ プロトコルを使用して Chromium ベースのブラウザを制御します。 Firefox などのブラウザの場合、そのようなプロトコルがない場合は、JavaScript インジェクションを使用します。 Selenium はこれを Driver にカプセル化しますが、PlayWright はそれを直接呼び出します。一方、Cypress は JavaScript を使用してブラウザを制御します。
- ブラウザのサポート: Selenium は Internet Explorer をサポートしていますが、IE は段階的に廃止されているため、これは無関係です。
- 使いやすさ: 3 つのフレームワークはすべて、学習曲線があります。ただし、PlayWright と Cypress は、Selenium と比較して、単純なシナリオではよりユーザーフレンドリーです。
はじめる
PlayWright は複数の言語をサポートしていますが、Node.js に大きく依存しています。 Python バージョンと Java バージョンのどちらを使用するかに関係なく、PlayWright は初期化中に Node.js 環境を必要とし、Node.js ドライバーをダウンロードします。したがって、このガイドでは JavaScript/TypeScript に焦点を当てます。
インストールとデモ
- Node.js がインストールされていることを確認してください。
- npm または Yarn を使用して PlayWright プロジェクトを初期化します。
# Using npm npm init playwright@latest # Using yarn yarn create playwright
- プロンプトに従います:
- TypeScript または JavaScript を選択します (デフォルト: TypeScript)。
- テストディレクトリ名を指定します。
- PlayWright がサポートするブラウザをインストールするかどうかを決定します (デフォルト: True)。
ブラウザのダウンロードを選択した場合、PlayWright は Chromium、Firefox、WebKit をダウンロードしますが、これには時間がかかる場合があります。このプロセスは、PlayWright バージョンが更新されない限り、最初のセットアップ中にのみ発生します。
プロジェクトの構造
初期化後、プロジェクト テンプレートを取得します:
playwright.config.ts # PlayWright configuration file package.json # Node.js configuration file package-lock.json # Node.js dependency lock file tests/ # Your test directory example.spec.ts # Template test case tests-examples/ # Example tests directory demo-todo-app.spec.ts # Example test case
サンプル テスト ケースを実行します:
npx playwright test
テストはサイレントに (ヘッドレス モードで) 実行され、結果は次のように表示されます。
Running 6 tests using 6 workers 6 passed (10s) To open the last HTML report run: npx playwright show-report
ソースコードの例
example.spec.ts テスト ケースは次のとおりです:
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
await page.goto('https://playwright.dev/');
await expect(page).toHaveTitle(/Playwright/);
});
test('get started link', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.getByRole('link', { name: 'Get started' }).click();
await expect(page).toHaveURL(/.*intro/);
});
- 最初のテスト: ページのタイトルに「Playwright」が含まれていることを確認します。
- 2 番目のテスト: [開始] リンクをクリックし、URL を確認します。
各テストメソッドには次のものがあります:
- テスト名 (例: 'タイトルあり')。
- テスト ロジックを実行する 関数。
主な方法には以下が含まれます:
- page.goto: URL に移動します。
- Expect(page).toHaveTitle: ページのタイトルをアサートします。
- page.getByRole: 役割によって要素を検索します。
- await: 非同期操作が完了するまで待機します。
コマンドラインからのテストの実行
一般的なコマンドは次のとおりです:
- すべてのテストを実行します。
# Using npm npm init playwright@latest # Using yarn yarn create playwright
- 特定のテスト ファイルを実行します。
playwright.config.ts # PlayWright configuration file package.json # Node.js configuration file package-lock.json # Node.js dependency lock file tests/ # Your test directory example.spec.ts # Template test case tests-examples/ # Example tests directory demo-todo-app.spec.ts # Example test case
- テスト ケースをデバッグします。
npx playwright test
コードの録音
codegen 機能を使用してインタラクションを記録します:
Running 6 tests using 6 workers 6 passed (10s) To open the last HTML report run: npx playwright show-report
記録されたコードはファイルにコピーできます。注: レコーダーはホバリングなどの複雑なアクションを処理できない場合があります。
劇作家の詳細ガイド
行動と行動
このセクションでは、ページ要素を操作するための典型的な Playwright アクションをいくつか紹介します。前に紹介したロケーター オブジェクトは、作成中に実際にはページ上の要素を特定しないことに注意してください。要素がページ上に存在しない場合でも、要素ロケーター メソッドを使用してロケーター オブジェクトを取得しても例外はスローされません。実際の要素の検索は対話中にのみ行われます。これは、ページ上の要素を直接検索し、要素が見つからない場合に例外をスローする Selenium の findElement メソッドとは異なります。
テキスト入力
テキスト入力には fill メソッドを使用します。主に 、