playwright - Playwright は、Web テストと自動化のためのフレームワークです。単一の API で Chromium、Firefox、および WebKit をテストできます。

(Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API. )

Created at: 2019-11-16 02:32:42
Language: TypeScript
License: Apache-2.0

🎭劇作家

npm バージョン クロムバージョン Firefox のバージョン WebKit バージョン

ドキュメンテーション| API リファレンス

Playwright は、Web テストと自動化のためのフレームワークです。単一の API でChromiumFirefoxおよびWebKitをテストできます。Playwright は、環境に優しく、機能的で、信頼性が高く、高速なクロスブラウザー Web 自動化を可能にするように構築されています。

Linux マックOS ウィンドウズ
クロム 106.0.5249.30
ウェブキット 16.0
Firefox 104.0

ヘッドレス実行は、すべてのプラットフォームのすべてのブラウザでサポートされています。詳細については、システム要件を確認してください。

Python.NET、またはJavaの劇作家をお探しですか?

インストール

Playwright にはエンド ツー エンド テスト用の独自のテスト ランナーがあり、これを Playwright Test と呼んでいます。

init コマンドの使用

Playwright Test を開始する最も簡単な方法は、init コマンドを実行することです。

# Run from your project's root directory
npm init playwright@latest
# Or create a new project
npm init playwright@latest new-project

これにより、構成ファイルが作成され、オプションでサンプル、GitHub Action ワークフロー、および最初のテスト example.spec.ts が追加されます。アサーションの記述セクションに直接ジャンプできるようになりました。

手動で

依存関係を追加し、ブラウザーをインストールします。

npm i -D @playwright/test
# install supported browsers
npx playwright install

必要に応じて、選択したブラウザーのみをインストールできます。詳細については、ブラウザーのインストールを参照してください。または、ブラウザをまったくインストールせず、既存のブラウザ チャネルを使用することもできます。

機能

弾力性 • 不安定なテストはありません

自動待機。プレイライトは、アクションを実行する前に、要素がアクション可能になるのを待ちます。また、イントロスペクション イベントの豊富なセットもあります。この 2 つを組み合わせることで、不安定なテストの主な原因である人為的なタイムアウトが不要になります。

Web ファーストのアサーション。Playwright のアサーションは、特に動的 Web 用に作成されています。必要な条件が満たされるまで、チェックは自動的に再試行されます。

トレース。テストの再試行戦略を構成し、実行トレース、ビデオ、スクリーンショットをキャプチャしてフレークを排除します。

トレードオフなし • 制限なし

ブラウザーは、さまざまなプロセスでさまざまなオリジンに属する Web コンテンツを実行します。Playwright は最新のブラウザー アーキテクチャに対応しており、プロセス外でテストを実行します。これにより、Playwright は典型的なインプロセス テスト ランナーの制限から解放されます。

複数のすべて。複数のタブ、複数のオリジン、複数のユーザーにまたがるシナリオをテストします。さまざまなユーザー向けにさまざまなコンテキストでシナリオを作成し、それらをサーバーに対して実行します。すべて 1 つのテストで行います。

信頼できるイベント。要素をホバーし、動的コントロールと対話し、トラステッド イベントを生成します。Playwright は、実際のユーザーと見分けがつかない実際のブラウザー入力パイプラインを使用します。

フレームをテストし、Shadow DOM を貫通します。プレイライト セレクターは Shadow DOM を貫通し、シームレスにフレームに入ることができます。

完全な分離 • 迅速な実行

ブラウザ コンテキスト。Playwright は、テストごとにブラウザ コンテキストを作成します。ブラウザ コンテキストは、まったく新しいブラウザ プロファイルに相当します。これにより、オーバーヘッドなしで完全なテスト分離が実現します。新しいブラウザ コンテキストの作成には数ミリ秒しかかかりません。

一度ログインします。コンテキストの認証状態を保存し、すべてのテストで再利用します。これにより、各テストで繰り返されるログイン操作が回避されますが、独立したテストは完全に分離されます。

強力なツール

コードゲン。アクションを記録してテストを生成します。それらを任意の言語に保存します。

劇作家 インスペクター。ページの検査、セレクターの生成、テスト実行のステップ実行、クリック ポイントの確認、実行ログの調査。

トレース ビューアー。すべての情報を収集して、テストの失敗を調査します。Playwright トレースには、テスト実行のスクリーンキャスト、ライブ DOM スナップショット、アクション エクスプローラー、テスト ソースなどが含まれます。

TypeScriptJavaScriptPython.NET、またはJavaのプレイライトをお探しですか?

これらの Playwright Test の例を実行する方法については、入門ドキュメントをご覧ください。

ページのスクリーンショット

このコード スニペットは、whatsmyuseragent.org に移動し、スクリーンショットを保存します。

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

test('Page Screenshot', async ({ page }) => {
  await page.goto('http://whatsmyuseragent.org/');
  await page.screenshot({ path: `example.png` });
});

モバイルと位置情報

このスニペットは、特定の位置情報にあるデバイスで Mobile Safari をエミュレートし、maps.google.com に移動してアクションを実行し、スクリーンショットを撮ります。

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

test.use({
  ...devices['iPhone 13 Pro'],
  locale: 'en-US',
  geolocation: { longitude: 12.492507, latitude: 41.889938 },
  permissions: ['geolocation'],
})

test('Mobile and geolocation', async ({ page }) => {
  await page.goto('https://maps.google.com');
  await page.locator('text="Your location"').click();
  await page.waitForRequest(/.*preview\/pwa/);
  await page.screenshot({ path: 'colosseum-iphone.png' });
});

ブラウザ コンテキストで評価する

このコード スニペットは、example.com に移動し、ページ コンテキストでスクリプトを実行します。

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

test('Evaluate in browser context', async ({ page }) => {
  await page.goto('https://www.example.com/');
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    }
  });
  console.log(dimensions);
});

ネットワーク リクエストを傍受する

このコード スニペットは、ページのリクエスト ルーティングを設定して、すべてのネットワーク リクエストをログに記録します。

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

test('Intercept network requests', async ({ page }) => {
  // Log and continue all network requests
  await page.route('**', route => {
    console.log(route.request().url());
    route.continue();
  });
  await page.goto('http://todomvc.com');
});

資力