操り人形師を使用してエンドツーエンドのテストを学びます

このチュートリアルでは、ソフトウェアテストの世界を調査し、Webアプリケーションの効率的なエンドツーエンドテストのために、ノードライブラリであるPuppeteerの使用方法を示しています。 さまざまなテストタイプをカバーし、簡単なカウンターアプリケーションを使用して実用的な例を作成します。

重要な概念：

pupteer：
• devtoolsプロトコルを介してクロムまたはクロムを制御する強力なnode.jsライブラリ。エンドツーエンドのテストとブラウザの自動化に最適です。 デフォルトはヘッドレスモードになりますが、目に見えるブラウザウィンドウで実行できます。 のテストタイプ： 4つの重要なテスト方法を調べます：静的テスト（リナーとタイプシステムを使用）、単体テスト（個々のコードユニットのテスト）、統合テスト（複数のユニットの相互作用のテスト） 、およびエンドツーエンドのテスト（アプリケーション全体で実際のユーザーインタラクションをシミュレートする）。
• 操り人形師によるエンドツーエンドのテスト：チュートリアルでは、操り人形師を使用したエンドツーエンドのテストをセットアップおよび実行するための段階的なガイドを提供します。 これには、ページのナビゲート、特定の要素の待機、データの抽出、アプリケーションの動作の検証が含まれます。
• 操り人形師とは？
Puppeteerは、ChromeまたはChromiumと相互作用するための高レベルAPIを提供します。 主にヘッドレスですが、完全なブラウザエクスペリエンスのために構成できます。

前提条件：

このチュートリアルは、JavaScript（ES6）、Node.js、およびYarn（パッケージマネージャー）に精通していることを想定しています。 基本的な操り人形師の知識は役立ちますが、厳密には必要ありません。 チュートリアルでは使用します：

ノード13.3.0 npm 6.13.2

YARN 1.21.1

pupteer 2.0.0
create-react-app 3.3.0
• テストの紹介：
• テストはアプリケーション機能を検証し、バグを早期に識別するのに役立ちます。 上記の4つのテストタイプは、包括的なテスト戦略を形成します。 「テストトロフィー」（以下に示す）は、これらのテストの階層的性質を視覚的に表しています。

操り人形師によるエンドツーエンドのテスト：実用的な例

を使用してシンプルなカウンターアプリケーションを作成し、操り人形師でテストします。

1. プロジェクトのセットアップ：新しいReactプロジェクトの作成：npx create-react-app e2e-puppeteer
2. アプリを実行します：cd e2e-puppeteer && yarn start
3. Puppeteerのインストール： yarn add -D puppeteer
4. カウンターアプリの実装：App.jsを変更してApp.cssを増加とデクリメントボタンを備えたカウンターを作成します。
5. 操り人形師テスト：カウンターの機能を確認するには、App.test.jspage.waitForSelectorで操り人形師テストを書きます（初期状態、増分、減少）。 これらのテストでは、page.$eval、page.click、
、およびアプリケーションの動作を確認するためのアサーションが使用されます。
6. テストを実行します： yarn test

結論：

このチュートリアルは、操り人形師を使用したエンドツーエンドテストの実用的な紹介を提供しました。 操り人形師の機能は、テストを超えて拡張されており、さまざまなブラウザ自動化タスクにとって貴重なツールになっています。 完全なコードはgithubで使用できます（元のテキストで提供されていないリンクは、利用可能な場合は追加する必要があります）。 テストに関するさらなるリソースは、SitePoint Premium（元のテキストで提供されていないリンク、利用可能な場合は追加する必要があります）から入手できます。

faqs： このセクションでは、その目的、他のツールとの違い、自動化とスクレイピングでの使用、ヘッドレスブラウザーの概念、クロスブラウザーの互換性など、操り人形師に関する一般的な質問に答えます。 （元のFAQは出力に含まれています。）

以上が操り人形師を使用してエンドツーエンドのテストを学びますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。