Puppeteerのインストール–Puppeteerチュートリアル4および5の優れた学習ガイド

Puppeteerは、Webスクレイピングツールに使用できるオープンソースのノードjsライブラリです。 また、Webアプリケーションでテスト自動化を実行するために使用することもできます。 今日、Puppeteerの使用は自動化されたソフトウェアテストスペースで急速に増加しています。 puppeteerチュートリアルを理解するには、コマンドライン、Javascript、およびHTMLDOM構造の基本的な知識が必要です。 チュートリアル全体は、以下の記事に分けられています。 

Puppeteerチュートリアル

Toscaチュートリアル#1: パペッティアの概要

トスカ チュートリアル #2: Puppeteer環境変数

トスカ チュートリアル #3: PuppeteerWebスクレイピングとPuppeteerテスト自動化の概要

トスカ チュートリアル #4: Puppeteerをインストールします

トスカ チュートリアル #5: サンプルパペッティアプロジェクト

このPuppeteerチュートリアルでは、NodeJのインストール、Puppeteerのエディターのインストールなど、依存関係のあるPuppeteerをインストールする手順について学習します。また、インストール後に、XNUMXつのサンプルPuppeteerプロジェクトを作成して実行します。

Puppeteerをインストールします

Puppeteerスクリプトの開発を開始するには、以下のコンポーネントをインストールして構成する必要があります– 

1.NodeJSをインストールします

2.エディターをインストールします

3.Puppeteerをインストールします

NodeJSをインストールします。

NodeJsは、さまざまなプラットフォームで実行できる無料のオープンソースサーバー環境です。 サーバー側でjavascriptを使用します。 PuppeteerはNodeJSアプリケーションの一種です。 したがって、Puppeteerセットアップの最初のステップは、NodeJSフレームワークをインストールすることです。 NodeJSフレームワークは、Windows、Ubuntu、macOSなどの複数のプラットフォームで使用できます。このコンテキストでは、64ビットWindowsオペレーティングシステムのバージョンで作業します。 NodeJSをインストールする手順は次のとおりです–

Step1#NodeJSをダウンロード: 【送信】ボタンをクリックします。販売者は原則としてXNUMX日以内に回答を返信します。XNUMX日を過ぎても回答がない場合は、Artisanaryまでお問い合わせください。 (詳細を見る)。 NodeJSダウンロードリンクをナビゲートします。 ここでは、64ビットのWindowsインストーラー(.mts)をダウンロードします。 

Puppeteerチュートリアル-NodeJをインストールする
Puppeteerチュートリアル–NodeJをインストールする

ステップ2# NodeJSをインストールします。 ダウンロードが完了したら、installer(.msi)ファイルをダブルクリックしてNodeJをインストールする必要があります。 インストール中は、指示に従って続行する必要があります。

ステップ3# NodeJSを確認します。 インストールの完了後、コマンドプロンプトを開き、「ノード」としてコマンドを入力する必要があります。 以下の詳細が表示されている場合、インストールは正しいです。 エラーが発生した場合は、インストールが正しくないことを意味します。

Puppeteerチュートリアル-NodeJを確認する
Puppeteerチュートリアル–NodeJを確認する

Puppeteerのエディターをインストールします。

エディターは、Puppeteerコードの記述、コンパイル、および実行を支援するツールに他なりません。 Visual Studio Code、Note Pad ++、EditPlusなどを含むJavaコードエディターとして使用できるツールが多数あります。デフォルトの「NotePad」アプリケーションでもパペッティアコードを記述できます。 この「Puppeteerのインストール」では チュートリアル、無料でNodeJSアプリケーションと簡単に互換性があるため、VSCodeを使用します。 VSCodeは、無料で利用できるVisualStudioのXNUMXつのコンポーネントにすぎません。 VSCodeをインストールする手順は次のとおりです– 

Step1#ダウンロードしたVSCode: 【送信】ボタンをクリックします。販売者は原則としてXNUMX日以内に回答を返信します。XNUMX日を過ぎても回答がない場合は、Artisanaryまでお問い合わせください。 (詳細を見る)。 ダウンロードリンクを開き、オペレーティングシステムに従ってVSCodeインストーラーの目的のバージョンをダウンロードします。

ステップ2#VSCodeをインストールします: 他のソフトウェアと同じように、システムのインストーラーファイルからVSCodeをインストールします。 インストール中は、推奨設定のみを行ってください。

ステップ2#VSCodeを確認します: インストールが完了したら、アプリケーションを開いて、正しくインストールされているかどうかを確認します。

Puppeteerチュートリアル-Puppeteerのエディター
Puppeteerチュートリアル–Puppeteerのエディター

Puppeteerパッケージをインストールします。

puppeteerのバージョンv1.7.0以降、すべてのリリースには以下のXNUMXつのパッケージが含まれています–

  • puppeteer-コアパッケージ
  • パペッティアパッケージ

Puppeteerの両方のバージョンは、コンソールコマンドを使用してインストールできます。 Puppeteerをインストールするためのコマンドは– 

Puppeteer-coreパッケージをインストールします。 これは、Javaで開発されたNodeJSライブラリのコレクションです。 devtoolsプロトコルで動作する機能があります。 puppeteer-coreパッケージのインストール中にChromiumブラウザがダウンロードされません。 Puppeteerのプログラムインターフェイスは、puppeteer-coreライブラリを完全に駆動します。 もうXNUMXつの重要な制限は、PUPPETEER_ *環境変数を変更してもpuppeteer-core機能を変更できないことです。 

インストールコマンド: npm installpuppeteer-core

注意: puppeteer-coreパッケージをインストールする前に、NodeJSツールをインストールする必要があります。

Puppeteer製品パッケージをインストールします。 Puppeteerは、Chromeブラウザを制御するためにGoogleによって開発された完全な製品です。 完全なPuppeteer製品パッケージであるため、インストール中に最新バージョンのクロムブラウザがダウンロードされます。 その後、インストールはpuppeteer-coreによって駆動されます。 PUPPETEER_ *環境変数を変更することにより、Puppeteer機能をカスタマイズすることができます。 

インストールコマンド: npm は操り人形師をインストールします

この「Puppeteerのインストール」チュートリアルでは、これらXNUMXつのバージョンに多くの違いがないため、Puppeteerパッケージのインストールに取り組みます。

サンプルパペッティアプロジェクト

Puppeteerは、ヘッドフル(非ヘッドレス)とヘッドレスの両方のChromeブラウザと互換性があります。 ヘッドレスの場合、ブラウザのアクティビティはバックグラウンドで実行されます。つまり、ブラウザのUIは表示されません。 これにより、(ブラウザーの制御)がXNUMXつのステップでより簡単になります。 つまり、同じこと(ブラウザの制御)を複数の複雑な手順で実行できるということです。

サンプルのPuppeteerプロジェクトのセットアップに関連する手順を以下に示します– 

ステップ1#サンプルPuppeteerプロジェクトのフォルダー構造を作成します。 事前定義されたパスに「SampleProject」という名前のサンプルルートディレクトリを作成します。 このルートディレクトリは、サンプルPuppeteerプロジェクトとして機能します。 次に、コマンドプロンプトを開いた後、このルートディレクトリに移動する必要があります。

ステップ2#Puppeteerをインストールします。 以下のコマンドを使用して、Puppeteerの完全なパッケージをルートディレクトリにインストールできます。 このコマンドは基本的に、すべてのオープンソースNodeJSライブラリをダウンロードします。 サンプルプロジェクト フォルダ。 ネットワークの速度によっては、インストールに時間がかかります。 約350MBのデータをダウンロードします。 インストール後、さまざまなpuppeteerコンポーネントとpackage-lock.jsonファイルを含むnode_modulesフォルダーが、サンプルのPupeteerプロジェクトのルートフォルダーに作成されます。

Puppeteerチュートリアル-インストールログ
Puppeteerチュートリアル–インストールログ

ステップ3#サンプルのPuppeteerスクリプトを作成します。 次に、を呼び出すサンプルのpuppeteerスクリプトを作成します。 LambdaGeeks Webサイト、各ステップの後にコンソールメッセージを表示し、スクリーンショットをキャプチャします。 この例では、ヘッドレスクロムブラウザがバックグラウンドで呼び出されます。 サンプルのPuppeteerスクリプトは次のようになります– 

const puppeteer = require('puppeteer'); // Puppeteerライブラリを含めるpuppeteer.launch({headless:true})。then(async browser => {const pageNew = await browser.newPage(); //ブラウザを起動しますconsole.log('Step1-Open Browser'); / /メッセージを表示awaitpageNew.setViewport({width:1280、height:800})await pageNew .goto('https://lambdageeks.com/');//LambdaGeeksを開く//スクリーンショットをキャプチャawaitpageNew.screenshot({path :'screenshot_lambda.png'}); console.log('Step2-LambdaGeeksをナビゲートしてスクリーンショットを撮る'); await browser.close(); console.log('Step3-ブラウザクローズ');});

このコードは、サンプルpuppeteerプロジェクトのルートディレクトリにファイル名で保存する必要があります sample_script.js。 Puppeteer-coreの場合、スクリプトの最初に「puppeteer」ではなく「puppeteer-core」を含める必要があります。 ヘッドフルブラウザの場合、コードを置き換える必要があります。{headless:true}” with “{headless:false}”.

Step4#サンプルPuppeteerスクリプトを実行します。 サンプルスクリプトは、以下のコマンドを使用してコマンドプロンプトから実行できます–

npmノードsample_script.js

実行後、スクリーンショットはキャプチャされ、ルートディレクトリに「 'screenshot_lambda.png」として保存されます。

Puppeteerチュートリアル-サンプルPuppeteerプロジェクト
Puppeteerチュートリアル–サンプルPuppeteerプロジェクト

次に、AmazonWebアプリケーションで別のサンプルPuppeteerスクリプトを示します。 このスクリプトは、各ステップの検証とともに以下のステップを実行します–

  • Amazonアプリケーションを起動します。
  • 事前定義された本を検索します。
  • 検索した本をカートに追加します。
  • カートを開き、本がカートで利用できるかどうかを確認します。
  • 画面をキャプチャしてブラウザを閉じます。

以下のスクリプトのみを説明します。 次の記事では、実行するさまざまな手順について詳しく学習します。 サンプルスクリプトを以下に示します–

/ ** *@nameAmazonで検索*/const puppeteer = require('puppeteer'); const reportPathDir ='C:\\ LambdaGeeks \\ puppteer_proj_sample \\ output \\'; const screenscreenFile ='screen1.png'; try {(async()=> {//ブラウザとページオブジェクトインスタンスを作成し、URLに移動しますconst browserWeb = await puppeteer.launch({headless:false}); const pageWeb = await browserWeb.newPage()await pageWeb.setViewport ({幅:1280、高さ:800}); await pageWeb.goto('https://www.amazon.in/');//アマゾン検索条件を入力letsearchBoxAmazon = await pageWeb.waitForXPath( "// * / input [@ id ='twotabsearchtextbox'] "、{visible:true}); if(searchBoxAmazon === null){console.log('Amazon画面が表示されません');} else {await searchBoxAmazon.type(" Testing Book "); console.log('検索条件が入力されました');}//検索ボタンをクリックしてbtnSearchAmazon= await pageWeb.waitForXPath(" // * / input [@ id ='nav-search-submit- button'] "、{visible:true}); if(btnSearchAmazon === null){console.log('検索ボタンが表示されていません');} else {await btnSearchAmazon.click(); console.log('Clicked on search button');}//特定の検索結果をクリックしてmyBookAmazon= await pageWeb.waitForXPath ("// * [contains(text()、'Selenium Testing Tools Cookbook Second Edition')]"、{visible:true})if(myBookAmazon === null){console.log('Book is not available') ; } else {myBookAmazon.click();を待つconsole.log('注文する特定の本をクリックしてください'); }//新しいタブが開いたかどうかを識別しますconstpageTarget= pageWeb.target(); const newTarget = await browserWeb.waitForTarget(target => target.opener()=== pageTarget); //新しいページオブジェクトを取得します:const page2 = await newTarget.page(); page2.setViewport({幅:1280、高さ:800});を待ちます。 //カートに追加letaddToCartAmazon= await page2.waitForXPath( "// * / input [@ id ='add-to-cart-button']"、{visible:true}); if(addToCartAmazon === null){console.log('カートに追加ボタンは利用できません'); } else {console.log('カートに追加ボタンをクリック'); addToCartAmazon.click();を待つ}//カートへの追加プロセスを確認letsuccessMessageAmazon= await page2.waitForXPath( "// * [contains(text()、'Added to Cart')]"、{visible:true}); if(successMessageAmazon === null){console.log('アイテムがカートに追加されていません'); } else {console.log('アイテムがカートに正常に追加されました'); }//カートのキャプチャ数letcartCountAmazon= await page2.waitForXPath( "// * / span [@ id ='nav-cart-count']"、{visible:true}); valueCount = await page2.evaluate(el => el.textContent、cartCountAmazon)console.log('カート数:' + valueCount); cartCountAmazon.focus(); page2.screenshot({パス:screenshotFile});を待ちます。 pageWeb.waitForTimeout(3000);を待つpage2.close();を待つpageWeb.close();を待つbrowserWeb.close();を待つ})()} catch(e){console.log(e)}

注意: 次の記事では、スクリプトを作成するための詳細な手順について説明します。

結論:

「PuppeteerTutorial」の「InstallPuppeteer」に関するこの紹介記事では、さまざまなPuppeteerパッケージを最初からインストールするための詳細な手順について説明しました。 puppeteerのセットアップには、NodeJのインストール、VSCodeのインストール、Puppeteerのインストール、Puppeteerサンプルプロジェクトの作成と実行など、さまざまなコンポーネントのインストールが含まれます。 次のPuppeteerチュートリアルでは、PuppeteerをWebスクレイピングツールとして使用するための詳細な手順について説明します。 クリックしてください  (詳細を見る)。 参照ポータルから読みます。

コメント

あなたのメールアドレスは公開されません。 必須フィールドは、マークされています *

上へスクロール