Playwright は、Web テストと自動化のためのフレームワークです。単一の API で Chromium、Firefox、WebKit をテストできます。 Playwright は、常に環境に優しく、高機能で、信頼性が高く、高速なクロスブラウザー Web オートメーションを可能にするように構築されています。
| Linux | macOS | 窓 | |
|---|---|---|---|
| クロム 131.0.6778.33 | ✅ | ✅ | ✅ |
| ウェブキット 18.0 | ✅ | ✅ | ✅ |
| Firefox 132.0 | ✅ | ✅ | ✅ |
ヘッドレス実行は、すべてのプラットフォームのすべてのブラウザでサポートされています。詳細については、システム要件を確認してください。
Python、.NET、または Java の Playwright をお探しですか?
Playwright にはエンドツーエンド テスト用の独自のテスト ランナーがあり、これを Playwright テストと呼びます。
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オプションで、選択したブラウザのみをインストールできます。詳細については、「ブラウザのインストール」を参照してください。または、ブラウザをまったくインストールせず、既存のブラウザ チャネルを使用することもできます。
自動待機。 Playwright は、要素がアクション可能になるまで待ってからアクションを実行します。内観イベントも充実しています。この 2 つを組み合わせることで、不安定なテストの主な原因である人為的なタイムアウトの必要性がなくなります。
Web ファースト アサーション。 Playwright アサーションは、動的 Web 専用に作成されます。必要な条件が満たされるまで、チェックが自動的に再試行されます。
トレース。テストの再試行戦略を構成し、実行トレース、ビデオ、スクリーンショットをキャプチャしてフレークを排除します。
ブラウザは、異なるプロセスで異なる生成元に属する Web コンテンツを実行します。 Playwright は最新のブラウザのアーキテクチャに準拠しており、アウトプロセスでテストを実行します。これにより、Playwright は一般的なインプロセス テスト ランナーの制限から解放されます。
すべてを複数化します。複数のタブ、複数のオリジン、複数のユーザーにまたがるテスト シナリオ。さまざまなユーザー向けにさまざまなコンテキストを持つシナリオを作成し、それらをサーバーに対してすべて 1 回のテストで実行します。
信頼できるイベント。要素をホバーし、動的コントロールと対話し、信頼できるイベントを生成します。 Playwright は、実際のユーザーと区別できない実際のブラウザ入力パイプラインを使用します。
テスト フレーム、Shadow DOM を貫通します。 Playwright セレクターは Shadow DOM を貫通し、フレームをシームレスに入力できるようにします。
ブラウザのコンテキスト。 Playwright は、テストごとにブラウザー コンテキストを作成します。ブラウザ コンテキストは、新しいブラウザ プロファイルに相当します。これにより、オーバーヘッドなしで完全なテスト分離が実現します。新しいブラウザ コンテキストの作成には数ミリ秒しかかかりません。
一度ログインしてください。コンテキストの認証状態を保存し、すべてのテストで再利用します。これにより、各テストでの反復的なログイン操作が回避されますが、独立したテストは完全に分離されます。
コードジェネ。アクションを記録してテストを生成します。任意の言語で保存します。
劇作家の警部。ページを検査し、セレクターを生成し、テスト実行をステップ実行し、クリック ポイントを確認し、実行ログを調査します。
トレースビューア。テストの失敗を調査するためにすべての情報を収集します。 Playwright トレースには、テスト実行スクリーンキャスト、ライブ DOM スナップショット、アクション エクスプローラー、テスト ソースなどが含まれます。
TypeScript、JavaScript、Python、.NET、または Java の Playwright をお探しですか?
これらの Playwright Test サンプルを実行する方法については、入門ドキュメントをご覧ください。
このコード スニペットは Playwright ホームページに移動し、スクリーンショットを保存します。
import { test } from '@playwright/test' ;
test ( 'Page Screenshot' , async ( { page } ) => {
await page . goto ( 'https://playwright.dev/' ) ;
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 . getByText ( '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' ) ;
} ) ; 
