Puppeteerは、オープンソースとして利用可能なノードjsライブラリベースのフレームワークです。 Webスクレイピングツールに使用できます。 また、テスト自動化ツールにも使用されます。 今日、Puppeteerの使用は、自動化されたソフトウェアテストの分野で急速に増加しています。 理解するには、コマンドライン、Javascript、およびHTMLDOM構造の基本的な知識が必要です。 パペッティアチュートリアル。 チュートリアル全体は、以下の記事に分けられています。
Puppeteerチュートリアル
Toscaチュートリアル＃1： パペッティアの概要
トスカ チュートリアル ＃2： Puppeteer環境変数
トスカ チュートリアル ＃3： PuppeteerWebスクレイピングとPuppeteerテスト自動化の概要
トスカ チュートリアル ＃4： Puppeteerをインストールします
トスカ チュートリアル ＃5： サンプルパペッティアプロジェクト
Toscaチュートリアル＃6： Puppeteer自動化テスト
この「PuppeteerAutomationTesting」チュートリアルでは、PuppeteerAutomationの詳細な手順を最初から説明します。 Puppeteer Automationテストを最初から理解するために、以下の機能について説明します–
・Puppeteerをインストールします
・Webアプリケーションを起動します
・Chromeブラウザからオブジェクトのプロパティを特定します
・フォーム送信手順–テキストの入力、イベントのクリック、検証
・スクリーンショットのキャプチャ
・PuppeteerAutomationのスクリプトを実行する
パペッティアオートメーション
ソフトウェア製品の品質を保証するには、テストが必要です。 ソフトウェア開発プロセスでは、複数のレベルのテストが定義されています。 ソフトウェアの機能をテストするには、手動または自動化されたプロセスを介して行うことができます。 自動ソフトウェアテストの主な目的は次のとおりです–
- テスト実行サイクルが速い。
- 人的エラーの可能性を回避します。
- テストの実行タイミングを短くします。
- リリースサイクル時間を短縮します。
- 品質を犠牲にすることなく、より多くの機能をカバーします。
- 複数の実行を並行して実行できます。
Puppeteerはjavascriptベースのノードライブラリであり、ChromeDevToolsプロトコルを介してChromeWebブラウザを制御するための高レベルのアプリケーションインターフェイス（API）を提供します。 Chromeブラウザで実行される手動操作のほとんどは、Puppeteerを使用して自動化できます。 したがって、Puppeteerは、Webアプリケーションでのユニットテストをすばやく簡単に行うのに適しています。
Puppeteer Automation Testingアプローチ：
Puppeteer Automation Testingに関連する手順を以下に説明します–
ステップ1＃機能テストシナリオを特定する：
以下のシナリオでPuppeteer自動化を実行するためのステップバイステップのアプローチを示します–
・Webブラウザを起動します。
・AmazonWebアプリケーションを呼び出します。
- 「TestingBook」という本を検索してください。
- 結果から本をカートに追加します。
- カートを開き、本がカートにあるかどうかを確認します。
- 画面をキャプチャしてブラウザを閉じます。
ステップ2＃Puppeteerをインストールし、テストケースを作成します。
特定のフォルダに「sample_script.js」として空のJavaScriptファイルを作成します。 ここでは、ルートフォルダをSampleProjectと見なします。 Puppeteerをインストールするには、「npminstallpuppeteer」というコマンドを使用します。 ネットワークの速度によっては、インストールに時間がかかります。 約350MBのデータをダウンロードします。 インストール後、さまざまなpuppeteerコンポーネントとpackage-lock.jsonファイルを含むnode_modulesフォルダーが、サンプルのPuppeteerプロジェクトのルートフォルダーに作成されます。
ステップ3＃テストオブジェクトの識別プロパティをキャプチャします。
Chromeウェブブラウザの開発者ツールを使用して識別プロパティをキャプチャできます。 id、name、XPathなどのさまざまなプロパティを分析して、スクリプトで操作を実行するために使用できる正しいプロパティを選択します。 この「PuppeteerAutomationTesting」チュートリアルでは、スクリプトでXPathを使用します。 XPATHまたはその他のプロパティを取得するための以下の手順は、
1.「メニュー->その他のツール」の下にある開発ツールを開き、「要素」タブに移動します。
2. Finder ツールを使用して (Elements タブの左上隅にある矢印アイコンをクリック)、アプリケーションからテスト オブジェクトを強調表示します。 ここでは、検索ボックスを調べます。
3.強調表示されたソースコードを分析して、目的のプロパティを特定します。 テストオブジェクトのXPATHプロパティを取得するには、強調表示されたセクションを右クリックし、[コピー]-> [Xpathのコピー]をクリックして、クリップボードにXPATHプロパティをコピーします。
4.ここで、Xpathをファインダーテキストボックスに貼り付け、Enterキーを押して、Xpathがオブジェクトを一意に識別しているかどうかを確認します。
5.同様に、別のテストオブジェクトの識別プロパティもキャプチャする必要があります。
Step4＃Puppeteer Automation開発ステップ：
テストケースを完了するには、Webページで特定の操作を実行する必要があります。 操作ごとに、さまざまな方法を使用できます。 ここでは、「PuppeteerAutomationTesting」のシナリオで使用される方法について説明します。
アプリケーションを起動する - puppeteerを含めた後、puppeteer-launchメソッドを使用してブラウザーを起動する必要があります。 オブジェクト参照をこのメソッドに渡して、ヘッドレスまたはヘッドフルブラウザ用に定義できます。 次に、URLをナビゲートするために必要なWebブラウザーのインスタンスを作成する必要があります。 ここでは、async関数を使用して、awaitキーワードを使用してWebシンクロナイザーを処理します。
//puppeteerパッケージをインクルードしますconstpuppeteer= require（'puppeteer'）; （async（）=>{//ヘッドレスブラウザの起動constbrowser = await puppeteer.launch（{headless：true}）;//ブラウザのインスタンスを作成しますconstpage = await browser.newPage（）;//に移動しますurl await page.goto（'https://www.amazon.in/'）;}）（）
テスト全体はヘッドレスブラウザで行われます。 ヘッドフルブラウザを開きたい場合は、オブジェクトを次のように起動メソッドに渡す必要があります。 「{headless：false}」。
存在を確認する –メソッドを使用する必要があります page.waitForXpath Xpathの存在を確認し、テストオブジェクトの参照を返します。 リターンリファレンスをテストすることで、テストケースに検証ポイントを追加できます。
searchBox = await page.waitForXPath（ "// * [@ id ='twotabsearchtextbox']"、{visible：true}）; if（searchBox === null）//テストオブジェクトの検証{console.log（'Amazon画面が表示されません'）; }
データを入力 –を使用して type そのオブジェクト参照のメソッドで、テキストを入力できます。
searchBox.type（ "Testing Book"）;を待つ
要素をクリックします –同様に、 クリック 任意のオブジェクト参照のメソッドで、クリック操作を実行できます。
let btnSearch = await page.waitForXPath（ "// * / input [@ id ='nav-search-submit-button']"、{visible：true}）; btnSearch.click（）;
コンソールにメッセージを出力する –メソッドの使用 console.log、コンソール内の任意のメッセージを出力として出力できます。
console.log（'コンソールラグが生成されました'）;
新しいタブを参照してください –メソッドの使用 page.targetおよびbrowser.waitforTarget、新しいタブに関する参照をチェックして変数に格納できます。
const pageTarget = page.target（）; const newTarget = await browser.waitForTarget（target => target.opener（）=== pageTarget）; //新しいページオブジェクトを取得します：const page2 = await newTarget.page（）;
スクリーンショットのキャプチャ –メソッドの使用 ページ。 スクリーンショット、特定のページのスナップショットが作成され、引数として指定されたファイル名に従って保存されています。
await page.screenshot（{path：'screenshot1.png'}）;
ページとブラウザを閉じる –メソッドの使用 閉じる、Webページとブラウザの両方を閉じることができます。
page.close（）;を待つbrowser.close（）;を待つ
待ち時間 –場合によっては、ページの読み込みまたは依存タスクの終了を待つ必要があります。 事前に定義された時間、実行を一時停止する必要があります。 これを実行するには、 page.waitForTimeout 引数を通過した値（ミリ秒単位）に基づいて実行を一時停止できるメソッド。
page.waitForTimeout（2000）;を待ちます。
これで、機能シナリオを自動化するための基本的な技術手順について学習しました。 知識に基づいて、以下のPuppeteerAutomationテストケースを実行できます。 最も頻繁に使用されるクラスとメソッドの詳細な概要については、以降の投稿で説明します。
/ ** *@nameAmazon検索*/const puppeteer = require（'puppeteer'）; const reportPath ='C：\\ LambdaGeeks \\ puppteer_proj_sample \\ output \\'; constscreenshot ='screen1.png'; //ファイルを.docxファイルにエクスポートするために使用try{（async（）=> {const browser = await puppeteer.launch（{headless：false}）; const pageNew = await browser.newPage（）await pageNew.setViewport（ {幅：1280、高さ：800}）; await pageNew.goto（'https://www.amazon.in/'）;//検索条件を入力letsearchBox = await page.waitForXPath（ "// * [@ id ='twotabsearchtextbox'] "、{visible：true}）; if（searchBox === null）{console.log（'Amazon画面は表示されません'）;} else {await searchBox.type（" Testing Book "）; console.log（'検索基準が入力されました'）;}//検索ボタンをクリックしてbtnSearch= await pageNew.waitForXPath（ "// * / input [@ id ='nav-search-submit-button']"、 {visible：true}）; if（btnSearch === null）{console.log（'検索ボタンが表示されていません'）;} else {await btnSearch.click（）; console.log（'クリックされた検索ボタン'） ;}//特定の検索結果をクリックletmyBook= await pageNew.waitForXPath（ "// * [contains（text（）、'Selenium Testing Tools Cookbook Second Edition'）]"、{visible：true}）if（myBook === null）{console.log（'本は利用できません'）; } else {await myBook.click（）; console.log（'注文する特定の本をクリックしてください'）; }//新しいタブが開いたかどうかを識別しますconstpageTarget= pageNew.target（）; const newTarget = await browser.waitForTarget（target => target.opener（）=== pageTarget）; //新しいページオブジェクトを取得します：const page2 = await newTarget.pageNew（）; await page2.setViewport（{幅：1280、高さ：800}）; //カートに追加letaddToCart= await page2.waitForXPath（ "// * / input [@ id ='add-to-cart-button']"、{visible：true}）; if（addToCart === null）{console.log（'カートに追加ボタンは使用できません'）; } else {console.log（'カートに追加ボタンをクリック'）; addToCart.click（）;を待つ}//カートへの追加プロセスを確認letsuccessMessage= await page2.waitForXPath（ "// * [contains（text（）、'カートに追加'）]"、{visible：true}）; if（successMessage === null）{console.log（'アイテムはカートに追加されません'）; } else {console.log（'アイテムがカートに正常に追加されました'）; }//カートのキャプチャ数letcartCount= await page2.waitForXPath（ "// * / span [@ id ='nav-cart-count']"、{visible：true}）; let value = await page2.evaluate（el => el.textContent、cartCount）console.log（'カート数：' +値）; cartCount.focus（）; page2.screenshot（{パス：スクリーンショット}）;を待つpageNew.waitForTimeout（2000）;を待つpage2.close（）;を待つpageNew.close（）;を待つbrowser.close（）;を待つ}）（）} catch（err）{console.error（err）}
Step5＃Puppeteer Automationテストの実行：
コマンドを使用して実行を開始できます ノードsample_script.js コマンドプロンプトから。 実行中、Chromiumブラウザが開かれ、機能手順が自動的に実行され、最終ページのスクリーンショットが保存されます。 スクリーンショットとコンソール出力は次のようになります。
結論：
このPuppeteerAutomation Testingチュートリアルを通じて、Puppeteer AutomationTestingの詳細な手順について学習しました。 次のPuppeteerチュートリアルでは、最も頻繁に使用されるpuppeteerクラスとメソッドの詳細な概要について学習します。 クリックしてください (詳細を見る)。 このPuppeteerチュートリアルのリファレンスポータルにアクセスします。
