Playwright、TypeScript、JavaScript を使用した自動化-jsチュートリアル-php.cn

TypeScript を使用した劇作家 | JavaScript のインストール

Playwright は、Puppeteer チームとの協力による Microsoft の最新の Web ベースの API 自動化ツールです。Puppeteer は、DevTools プロトコルまたは WebDriver BiDi を介して Chrome または Firefox を制御するための高レベル API を提供する JavaScript ライブラリです。 Puppeteer はデフォルトでヘッドレス (UI が表示されない) で実行されます。

Playwright は、単一 API による Web アプリケーションの自動化のために最新の Web ベースのブラウザをサポートし、API の自動化もサポートします。

劇作家の建築

Automation using Playwright and TypeScript and JavaScript

Playwright は、接続が確立されると Web ソケットプロトコルで動作し、テストをトリガーし、Web ソケットプロトコルを使用してリクエストを JSON 形式でサーバーに送信します。つまり、Playwright によって接続が確立されると、リクエストを送信するために再度接続を確立する必要はありません。テストの実行が完了するまでサーバーに留まります。 Playwright は、playwright.quit() メソッドで接続を切断する必要があります。

HTTP プロトコル接続と Web ソケットプロトコル接続の違いを理解しましょう

Automation using Playwright and TypeScript and JavaScript

WebSocket と HTTP プロトコルの違い
Playwright の特徴:
任意のブラウザ • 任意のプラットフォーム • 1 つの API
クロスブラウザ。 Playwright は、Chromium、WebKit、Firefox を含むすべての最新のレンダリングエンジンをサポートしています。

クロスプラットフォーム。 Windows、Linux、macOS で、ローカルまたは CI、ヘッドレスまたはヘッドでテストします。

クロスランゲージ。 TypeScript、JavaScript、Python、.NET、Java で Playwright API を使用します。

モバイルウェブをテストします。 Android 用 Google Chrome および Mobile Safari のネイティブモバイルエミュレーション。同じレンダリングエンジンがデスクトップとクラウドで動作します。

回復力がある • 不安定なテストはありません

自動待機。 Playwright は、要素がアクション可能になるまで待ってからアクションを実行します。内観イベントも充実しています。この 2 つを組み合わせることで、不安定なテストの主な原因である人為的なタイムアウトの必要性がなくなります。

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

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

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

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

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

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

テストフレーム、Shadow DOM を貫通します。 Playwright セレクターは Shadow DOM を貫通し、フレームをシームレスに入力できるようにします。

完全な分離 • 高速実行

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

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

強力なツール

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

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

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

TypeScript/JavaScript で Playwright を使ってみましょう

TypeScript/JavaScript 用 Playwright のインストール
インストールの前提条件は次のとおりです: Node.js 18

Windows 10、Windows Server 2016、または Windows Subsystem for Linux (WSL)。
macOS 13 Ventura、または macOS 14 Sonoma。
x86–64 および arm64 アーキテクチャ上の Debian 11、Debian 12、Ubuntu 20.04 または Ubuntu 22.04、Ubuntu 24.04。
npm、yarn、または pnpm を使用して Playwright をインストールすることから始めます。あるいは、VS Code 拡張機能を使用してテストを開始し、実行することもできます。

フォルダーを作成します。たとえば、TypeScriptWithPlaywright も同様に JavaScriptwithPlaywright のフォルダーを作成し、フォルダーに移動して、Windows のコマンドプロンプトを開きます

Automation using Playwright and TypeScript and JavaScript

劇作家のインスタレーション
Enter をクリックすると、次の画面が表示されます。スクリプト言語を選択して Enter キーを押します

Automation using Playwright and TypeScript and JavaScript

スクリプト言語を選択します
スクリプト言語を選択して Enter キーを押すと、次の画面が表示され、エンドツーエンドテストをどこに配置するかを尋ねられます。そうしましょう。

劇作家のインスタレーション
次に、GitHub Actions ワークフローを要求します。設定したい場合は、Y を押すか、N を押します。ブラウザをインストールするように求められます。インストールする場合は、true を意味する Y を選択します。以下の画面が表示されます。

Automation using Playwright and TypeScript and JavaScript

注: Playwright ブラウザは、以下のコマンドを使用して手動でインストールできます

Automation using Playwright and TypeScript and JavaScript

npx プレイライトのインストール

劇作家のインスタレーション
ここで Enter を押すと、次の画面が表示されます。

Automation using Playwright and TypeScript and JavaScript

劇作家のインスタレーション
劇作家インスタレーション

劇作家のインスタレーション

Playwright のインストールが完了しました
Playwright はデフォルトでヘッドレスモードで実行されるテストスクリプトを実行し、次のコマンドは特定のブラウザでの実行とデバッグを探索し、codegen を使用してテストスクリプトを生成します。

npx 劇作家テスト
エンドツーエンドのテストを実行します。

npx プレイライトテスト --ui
インタラクティブ UI モードを開始します。

npx プレイライトテスト --project=chromium
テストはデスクトップ Chrome でのみ実行します。

npx プレイライトテストの例
特定のファイルでテストを実行します。

npx playwright test --debug
デバッグモードでテストを実行します。

npx劇作家コードジェネ
Codegen を使用してテストを自動生成します。

まず次のように入力することをお勧めします。

npx playwright test

ログイン後にコピー

次のコマンドを使用してテストスクリプトを実行し、レポートを表示してみましょう。 Playwright は、Chrome、Firefox、WebKit でテストを並行して実行します。

npx 劇作家テスト

npx劇作家ショーレポート

Playwright レポートはデフォルトで TypeScript/JavaScript のみをサポートします
Playwright はデフォルトで、次のブラウザでヘッドレスモードで実行するようにテストスクリプトを設定します。設定は playwright.config.js

という名前のフォルダーに存在します。

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

/**

ファイルから環境変数を読み取ります。
https://github.com/motdotla/dotenv*/ // dotenv を 'dotenv' からインポートします。 // 'path' からパスをインポートします。 // dotenv.config({ path: path.resolve(__dirname, '.env') });

/**

https://playwright.dev/docs/test-configuration を参照してください。
/
デフォルトのdefineConfigをエクスポート({
testDir: './tests',
/ ファイル内のテストを並行して実行します /
完全に並列: true、
/ ソースコード内に誤って test.only を残した場合、CI でのビルドは失敗します。 /
forbidOnly: !!process.env.CI,
/ CI のみで再試行 /
再試行: process.env.CI ? 2 : 0、
/ CI での並列テストをオプトアウトします。 /
ワーカー: process.env.CI ? 1 : 未定義、
/ 使用するレポーター。 https://playwright.dev/docs/test-reporters /
を参照してください。レポーター: 'html'、
/ 以下のすべてのプロジェクトの共有設定。 https://playwright.dev/docs/api/class-testoptions を参照してください。 /
使用: {
/ await page.goto('/') などのアクションで使用するベース URL。 */
// ベース URL: 'http://127.0.0.1:3000',

/* 失敗したテストを再試行するときにトレースを収集します。 https://playwright.dev/docs/trace-viewer */
を参照してください。トレース: '最初の再試行時',
}、

/* 主要なブラウザ用にプロジェクトを構成します */
プロジェクト: [
{
名前: 'クロム'、
使用: { ...devices['デスクトップ Chrome'] },
}、

npx playwright test

ログイン後にコピー

]、

/* テストを開始する前にローカル開発サーバーを実行します */
// ウェブサーバー: {
// コマンド: 'npm run start',
// URL: 'http://127.0.0.1:3000',
// 再利用既存サーバー: !process.env.CI,
// },
});
次に、非ヘッドリースモード (UI) で、ブラウザを追加してテストスクリプトを実行するように変更してみましょう。 Playwright には、テストスクリプトの実行を記録するオプションと、デバッグに役立つトレースビューオプションも用意されています。トレースビューアオプションを有効にすると、テスト前のステータス、テスト中のステータス、テスト後のステータスを確認できます。 Playwright 構成ファイルを変更しました。以下のようになります:

// @ts-check
const {defineConfig, devices } = require('@playwright/test');

module.exports =defineConfig({
testDir: './tests',
完全に並列: true、
forbidOnly: !!process.env.CI,
再試行: process.env.CI ? 2 : 0、
ワーカー: process.env.CI ? 1 : 未定義、
レポーター: 'html'、
使用: {
トレース: 'on', // トレースを有効にする
video: 'on', // 各テストのビデオを録画します
headless: false, // ヘッドモードでテストを実行します
}、
プロジェクト: [
{
名前: 'クロム'、
使用: { ...devices['デスクトップ Chrome'] },
}、
{
名前: 'Firefox'、
使用: { ...devices['デスクトップ Firefox'] },
}、
{
名前: 'ウェブキット'、
使用: { ...devices['デスクトップ Safari'] },
}、
{
名前: 'Microsoft Edge'、
使用: {
...デバイス['デスクトップエッジ']、
チャンネル: 'msedge'
}、
}、
{
名前: 'Google Chrome'、
使用: {
...デバイス['デスクトップ Chrome'],
チャンネル: 'クロム'
}、
}、
]、
});
これで、テストスクリプトは、記録、トレースビューアオプションを備えた非ヘッドレスモードで、構成ファイルに記載されているブラウザ上でテストを実行できるようになりました。