検索

ホームページ  >  記事  >  ウェブフロントエンド  >  Playwright、TypeScript、JavaScript を使用した自動化

Playwright、TypeScript、JavaScript を使用した自動化

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-10-24 04:50:011076ブラウズ

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 のネイティブ モバイル エミュレーション。同じレンダリング エンジンがデスクトップとクラウドで動作します。

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

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

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

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

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

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

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

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

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

  1. 完全な分離 • 高速実行

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

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

  1. 強力なツール

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

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

トレースビューア。テストの失敗を調査するためにすべての情報を収集します。 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'],
チャンネル: 'クロム'
}、
}、
]、
});
これで、テスト スクリプトは、記録、トレース ビューア オプションを備えた非ヘッドレス モードで、構成ファイルに記載されているブラウザ上でテストを実行できるようになりました。

楽しく学んでください!!ハッピーオートメーション!!テストを楽しんでください

情報や質問があれば、santoshvqa@gmail.com および LinkedIn プロフィールまでお気軽にご連絡ください

https://www.linkedin.com/in/santosh-kulkarni-ab571639/

以上がPlaywright、TypeScript、JavaScript を使用した自動化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Python Java JavaScript typescript json firefox chrome safari html npm webkit yarn edge if for select format require const auto goto using class channel JS undefined default dom this input github windows macos android http https websocket microsoft linux ubuntu ui debian everything prompt
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jQuery の .click イベントを使用して関数にパラメータを渡す方法次の記事：jQuery の .click イベントを使用して関数にパラメータを渡す方法

関連記事

続きを見る