Playwright: Web UI 自動テスト フレームワークの包括的な概要

PlayWright は、Microsoft によって開発された Web UI 自動テスト フレームワークです。

モバイル ブラウザもサポートする、クロスプラットフォーム、クロス言語、クロスブラウザの自動テスト フレームワークを提供することを目的としています。

公式ホームページに記載されているとおり:

• 自動待機、ページ要素のインテリジェントなアサーション、実行トレースにより、Web ページの不安定性の処理に非常に効果的です。
• テストを実行しているプロセスとは異なるプロセスでブラウザを制御し、プロセス内テスト ランナーの制限を排除し、Shadow DOM の侵入をサポートします。
• PlayWright は各テストのブラウザ コンテキストを作成します。ブラウザー コンテキストは、まったく新しいブラウザー プロファイルと同等であり、ゼロコストで完全なテスト分離を可能にします。新しいブラウザ コンテキストの作成には、わずか数ミリ秒しかかかりません。
• コード生成、ステップバイステップのデバッグ、トレース ビューアなどの機能を提供します。

---

PlayWright vs. Selenium v​​s. 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 に焦点を当てます。

インストールとデモ

1. Node.js がインストールされていることを確認してください。
2. npm または Yarn を使用して PlayWright プロジェクトを初期化します。

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

1. プロンプトに従います:
   • 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 メソッドを使用します。主に 、、または [contenteditable] 属性を持つ要素を対象とします。<br>

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/);
});

チェックボックスとラジオ

locator.setChecked() または locator.check() を使用して、input[type=checkbox]、input[type=radio]、または [role=checkbox] 属性を持つ要素を操作します。

  npx playwright test

コントロールの選択

locator.selectOption() を使用して を操作します。要素:

  npx playwright test landing-page.spec.ts

マウスのクリック数

基本操作:

  npx playwright test --debug

他の要素によってカバーされている要素については、強制クリックを使用します:

npx playwright codegen https://leapcell.io/

または、クリック イベントをプログラムでトリガーします:

// Text input
await page.getByRole('textbox').fill('Peter');

文字を入力する

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

await page.getByLabel('I agree to the terms above').check();

expect(await page.getByLabel('Subscribe to newsletter').isChecked()).toBeTruthy();

// Uncheck
await page.getByLabel('XL').setChecked(false);

特殊キー

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

// Select by value
await page.getByLabel('Choose a color').selectOption('blue');

// Select by label
await page.getByLabel('Choose a color').selectOption({ label: 'Blue' });

// Multi-select
await page.getByLabel('Choose multiple colors').selectOption(['red', 'green', 'blue']);

サポートされているキーには、逆引用符、マイナス、等号、バックスラッシュ、バックスペース、タブ、削除、エスケープ、ArrowDown、End、Enter、Home、Insert、PageDown、PageUp、ArrowRight、ArrowUp、F1-F12、Digit0-Digit9、および KeyA が含まれます。 -KeyZ.

ファイルのアップロード

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

// Left click
await page.getByRole('button').click();

// Double click
await page.getByText('Item').dblclick();

// Right click
await page.getByText('Item').click({ button: 'right' });

// Shift+click
await page.getByText('Item').click({ modifiers: ['Shift'] });

// Hover
await page.getByText('Item').hover();

// Click at specific position
await page.getByText('Item').click({ position: { x: 0, y: 0 } });

フォーカス要素

要素にフォーカスするには、locator.focus() を使用します。

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

ドラッグアンドドロップ

ドラッグ アンド ドロップのプロセスには 4 つのステップが含まれます:

1. ドラッグ可能な要素の上にマウスを置きます。
2. マウスの左ボタンを押します。
3. マウスを目的の位置に移動します。
4. マウスの左ボタンを放します。

locator.dragTo() メソッドを使用できます。

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

ダイアログの処理

デフォルトでは、Playwright はアラート、確認、プロンプトなどのダイアログを自動的にキャンセルします。ダイアログを受け入れるダイアログ ハンドラーを事前に登録できます:

Running 6 tests using 6 workers

  6 passed (10s)

To open the last HTML report run:

  npx playwright show-report

新しいページの処理

新しいページがポップアップしたとき、ポップアップ イベントを使用してそれを処理できます。

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/);
});

---

劇作家に最適なプラットフォーム: Leapcell

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

Playwright アプリケーションに対する Leapcell の独自の利点

1. コスト効率

   • 従量課金制: トラフィックが少ないときのリソースの無駄を回避し、ピーク時に自動的にスケールアップします。
   • 実際の例: たとえば、getdeploying.com の計算では、従来のクラウド サービスで 1 vCPU と 2 GB RAM の仮想マシンをレンタルすると、月額約 25 ドルかかります。 Leapcell では、25 ドルで、平均応答時間 60 ミリ秒で 694 万件のリクエストを処理するサービスをサポートできるため、よりコストパフォーマンスが高くなります。

2. 開発者エクスペリエンス

   • 使いやすさ: セットアップ要件が最小限の直感的なインターフェイス。
   • 自動化: 開発、テスト、展開を簡素化します。
   • シームレスな統合: Go、Python、Node.js、Rust などをサポートします。

3. スケーラビリティとパフォーマンス

   • 自動スケーリング: 最適なパフォーマンスを維持するためにリソースを動的に調整します。
   • 非同期最適化: 同時実行性の高いタスクを簡単に処理します。
   • グローバル リーチ: 分散データ センターによって低遅延アクセスがサポートされます。

その他の導入例については、ドキュメントを参照してください。

以上がPlaywright: Web UI 自動テスト フレームワークの包括的な概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。