🎭劇作家

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

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

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

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

取り付け

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

init コマンドの使用

プレイライトテストを開始する最も簡単な方法は、initコマンドを実行することです。

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

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

手動

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

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

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

• はじめ
• インストール構成
• API リファレンス

資格

弾力性 • 不安定なテストなし

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

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

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

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

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

複数のすべて。複数のタブ、複数の配信元、複数のユーザーにまたがるテスト シナリオ。ユーザーごとに異なるコンテキストを持つシナリオを作成し、サーバーに対してすべて 1 つのテストで実行します。

信頼されたイベント。要素をホバーし、ダイナミックコントロールと対話し、信頼できるイベントを生成します。Playwrightは、実際のユーザーと区別がつかない実際のブラウザ入力パイプラインを使用します。

フレームをテストし、シャドウDOMを突き刺します。 プレイライトセレクターはシャドウDOMを突き刺し、フレームをシームレスに入力できるようにします。

完全な分離 • 高速実行

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

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

強力なツーリング

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

劇作家の警部。ページの検査、セレクターの生成、テスト実行のステップ実行、クリックポイントの確認、実行ログの探索を行います。

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

TypeScript、JavaScript、Python、.NET、Javaの劇作家をお探しですか?

例

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

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

このコード スニペットは [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');
});

リソース

• ドキュメンテーション
• API リファレンス
• コミュニティショーケース
• 投稿ガイド
• 変更履歴