PlayWright は、Microsoft によって開発された Web UI 自動テスト フレームワークです。
モバイル ブラウザもサポートする、クロスプラットフォーム、クロス言語、クロスブラウザの自動テスト フレームワークを提供することを目的としています。
公式ホームページに記載されているとおり:
現在利用可能な最高の 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 は複数の言語をサポートしていますが、Node.js に大きく依存しています。 Python バージョンと Java バージョンのどちらを使用するかに関係なく、PlayWright は初期化中に Node.js 環境を必要とし、Node.js ドライバーをダウンロードします。したがって、このガイドでは JavaScript/TypeScript に焦点を当てます。
# Using npm npm init playwright@latest # Using yarn yarn create playwright
ブラウザのダウンロードを選択した場合、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/);
});
各テストメソッドには次のものがあります:
主な方法には以下が含まれます:
一般的なコマンドは次のとおりです:
# 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 メソッドを使用します。主に 、