安裝Puppeteer – Puppeteer教程4和5的出色學習指南

Puppeteer是一個開放源代碼節點js庫,可用於Web抓取工具。 它也可以用於在Web應用程序中執行測試自動化。 如今,Puppeteer在自動化軟件測試領域的使用正在迅速增加。 必須具備命令行,Javascript和HTML DOM結構的基礎知識,才能理解操縱up的教程。 整個教程分為以下幾篇文章。 

木偶教程

Tosca教程1: 木偶戲概述

托斯卡 教程 Tutorial #2: 木偶環境變量

托斯卡 教程 Tutorial #3: Puppeteer Web抓取和Puppeteer測試自動化概述

托斯卡 教程 Tutorial #4: 安裝Puppeteer

托斯卡 教程 Tutorial #5: 木偶項目樣本

在此Puppeteer教程中,我們將學習安裝Puppeteer及其相關性的步驟,例如安裝NodeJs,Puppeteer的安裝編輯器等。此外,在安裝後,我們將創建並執行一個示例Puppeteer項目。

安裝Puppeteer

要開始開發Puppeteer腳本,我們需要安裝和配置以下組件– 

1.安裝NodeJS

2.安裝編輯器

3.安裝Puppeteer

安裝NodeJS:

NodeJs是一個免費的開源服務器環境,可以在不同的平台上運行。 它在服務器端使用javascript。 Puppeteer是一種NodeJS應用程序。 因此,Puppeteer設置的第一步是安裝NodeJS框架。 NodeJS框架可用於多種平台,包括Windows,Ubuntu,macOS等。在這種情況下,我們將使用64位Windows操作系統的版本。 安裝NodeJS的步驟是–

Step1#下載NodeJS: 點擊 這裡 瀏覽NodeJS下載鏈接。 在這裡,我們將下載64位Windows安裝程序(.mts)。 

木偶教程-安裝NodeJs
木偶教程–安裝NodeJs

步驟2# 安裝NodeJS: 下載完成後,我們需要通過雙擊installer(.msi)文件來安裝NodeJ。 在安裝過程中,我們需要按照說明進行操作。

步驟3# 驗證NodeJS: 安裝完成後,我們需要打開命令提示符,並將命令輸入為“ node”。 如果出現以下詳細信息,則表明安裝正確。 如果出現任何錯誤,則表示安裝不正確。

木偶教程-驗證NodeJs
木偶教程–驗證NodeJ

安裝Puppeteer編輯器:

編輯器不過是幫助我們編寫、編譯和運行 Puppeteer 代碼的工具。 有許多工具可以用作 Java 代碼編輯器,包括 Visual Studio Code、Note Pad++、Edit Plus 等。甚至我們也可以在默認的“Note Pad”應用程序中編寫 puppeteer 代碼。 在這個“安裝 Puppeteer”中 教程,我們將使用 VSCode,因為它是免費的並且易於與 NodeJS 應用程序兼容。 VSCode 只是 Visual Studio 的一個組件,它是免費提供的。 安裝 VSCode 的步驟是: 

Step1#下載VSCode: 點擊 這裡 打開下載鏈接,然後根據操作系統下載所需版本的VSCode Installer。

Step2#安裝VSCode: 與其他任何軟件一樣,從系統中的安裝程序文件安裝VSCode。 在安裝過程中,僅進行建議的設置。

Step2#驗證VSCode: 安裝完成後,打開應用程序以檢查其安裝是否正確。

Puppeteer教程-Puppeteer的編輯器
Puppeteer教程– Puppeteer的編輯器

安裝Puppeteer軟件包:

從puppeteer v1.7.0版本開始,每個發行版都包含以下兩個軟件包-

  • 木偶核心程序包
  • 木偶包

可以使用控制台命令安裝兩個版本的Puppeteer。 安裝Puppeteer的命令為– 

安裝Puppeteer核心軟件包: 它是用Java開發的Node JS庫的集合。 它具有使用devtools協議的能力。 在安裝puppeteer-core軟件包時,不會下載Chromium瀏覽器。 Puppeteer的編程接口完全驅動了puppeteer-core庫。 另一個重要的限制是,無法通過更改任何PUPPETEER_ *環境變量來更改人偶核心功能。 

安裝命令: npm安裝puppeteer-core

備註: 在安裝puppeteer-core軟件包之前,需要先安裝Node JS工具。

安裝Puppeteer產品軟件包: Puppeteer是Google開發的用於控制Chrome瀏覽器的完整產品。 作為完整的Puppeteer產品包,在安裝過程中將下載最新版本的Chrome瀏覽器。 之後,安裝由puppeteer-core驅動。 可以通過更改PUPPETEER_ *環境變量來自定義Puppeteer功能。 

安裝命令: npm安裝puppeteer

在本“安裝Puppeteer”教程中,我們將研究Puppeteer軟件包的安裝,因為這兩個版本之間沒有太多區別。

木偶項目樣本

Puppeteer與無頭(無頭)和無頭chrome瀏覽器兼容。 在無頭的情況下,瀏覽器活動在後台執行,即瀏覽器UI對我們不可見。 它使事情(控制瀏覽器)變得更簡單,更輕鬆。 這意味著,同一件事(控制瀏覽器)可以通過多個複雜步驟來完成。

設置樣本Puppeteer項目所涉及的步驟如下所示– 

Step1#為Sample Puppeteer Project創建一個文件夾結構: 在預定義的路徑中創建一個名稱為“ SampleProject”的示例根目錄。 該根目錄將充當Sample Puppeteer Project。 接下來,在打開命令提示符後,我們需要導航到該根目錄。

Step2#安裝Puppeteer: 使用以下命令,我們可以在根目錄中安裝Puppeteer的完整軟件包。 此命令基本上將所有開源NodeJS庫下載到 樣本項目 文件夾。 根據網絡速度,安裝過程會花費一些時間。 它將下載大約350MB的數據。 安裝後,將在示例Pupeteer項目根文件夾中創建包含不同puppeteer組件和package-lock.json文件的node_modules文件夾。

木偶教程-安裝日誌
木偶教程–安裝日誌

Step3#創建示例木偶腳本: 現在,我們將編寫一個示例木偶腳本,該腳本調用 LambdaGeeks 網站,在每個步驟之後顯示控制台消息,並捕獲屏幕截圖。 在此示例中,將在後台調用無頭鉻瀏覽器。 木偶腳本示例將為– 

const puppeteer = require('puppeteer'); //include Puppeteer 庫 puppeteer.launch({headless:true}).then(async browser => { const pageNew = await browser.newPage(); // 啟動瀏覽器 console.log('Step1 - Open Browser'); / /顯示消息 await pageNew .setViewport({ width: 1280, height: 800 }) await pageNew .goto('https://lambdageeks.com/'); //打開LambdaGeeks //截屏 await pageNew .screenshot({ path : 'screenshot_lambda.png' }); console.log('Step2 - 瀏覽 LambdaGeeks 並截取屏幕截圖'); await browser.close(); console.log('Step3 - Browser Closed'); });

此代碼需要使用文件名存儲在Sample puppeteer項目的根目錄中 示例腳本.js。 對於Puppeteer-core,我們需要在腳本的開始處包含“ puppeteer-core”而不是“ puppeteer”。 對於強大的瀏覽器,我們需要替換代碼“{headless:true}” with “{headless:false}”.

Step4#執行示例木偶腳本: 可以使用以下命令在命令提示符下執行示例腳本–

npm 節點 sample_script.js

執行後,將捕獲屏幕快照並將其存儲在根目錄中,如“ screenshot_lambda.png”。

木偶教程-示例木偶項目
Puppeteer教程– Puppeteer項目樣本

現在,我們將在亞馬遜Web應用程序上顯示另一個示例Puppeteer腳本。 該腳本將執行以下步驟,並在每個步驟中進行驗證-

  • 調用Amazon應用程序。
  • 搜索預定義的書。
  • 將搜索到的書添加到購物車中。
  • 打開購物車,然後檢查購物車中是否有該書。
  • 捕獲屏幕並關閉瀏覽器。

我們將只瀏覽以下腳本。 我們將在下一篇文章中詳細了解要執行的不同步驟。 示例腳本如下所示–

/** * @name 在亞馬遜搜索 */ const puppeteer = require('puppeteer'); const reportPathDir = 'C:\\LambdaGeeks\\puppteer_proj_sample\\output\\'; 常量 screenshotFile = 'screen1.png'; try { (async () => { //創建瀏覽器和頁面對象實例並導航到 URL const browserWeb = await puppeteer.launch({ headless: false }); const pageWeb = await browserWeb.newPage() await pageWeb.setViewport ({ width: 1280, height: 800 }); await pageWeb.goto('https://www.amazon.in/'); //輸入亞馬遜搜索條件 let searchBoxAmazon = await pageWeb.waitForXPath("//* /input[@id='twotabsearchtextbox']",{ visible: true }); if (searchBoxAmazon === null) { console.log('亞馬遜屏幕不顯示'); } else{ await searchBoxAmazon.type("測試書"); console.log('已輸入搜索條件'); } //點擊搜索按鈕 let btnSearchAmazon = await pageWeb.waitForXPath("//*/input[@id='nav-search-submit- button']",{ visible: true }); if (btnSearchAmazon === null) { console.log('搜索按鈕未顯示'); } else{ await btnSearchAmazon.click(); console.log('點擊on search button'); } //點擊具體的搜索結果 let 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('點擊指定書籍訂購'); } // 判斷新標籤頁是否打開 const pageTarget = pageWeb.target(); const newTarget = await browserWeb.waitForTarget(target => target.opener() === pageTarget); //獲取新的頁面對象: const page2 = await newTarget.page(); 等待 page2.setViewport({ 寬度: 1280, 高度: 800 }); //加入購物車 let addToCartAmazon = await page2.waitForXPath("//*/input[@id='add-to-cart-button']",{ visible: true }); if (addToCartAmazon === null) { console.log('添加到購物車按鈕不可用'); } else{ console.log('點擊添加到購物車按鈕'); 等待 addToCartAmazon.click(); } //驗證加入購物車過程 let successMessageAmazon = await page2.waitForXPath("//*[contains(text(),'Added to Cart')]",{ visible: true }); if (successMessageAmazon === null) { console.log('商品未加入購物車'); } else{ console.log('商品加入購物車成功'); } // 捕獲購物車編號 let cartCountAmazon = await page2.waitForXPath("//*/span[@id='nav-cart-count']",{ visible: true}); let valueCount = await page2.evaluate(el => el.textContent, cartCountAmazon) console.log('Cart count: ' + valueCount); cartCountAmazon.focus(); 等待 page2.screenshot({ path: screenshotFile }); 等待 pageWeb.waitForTimeout(3000); 等待 page2.close(); 等待 pageWeb.close(); 等待瀏覽器Web.close(); })() } 捕捉 (e) { console.log(e) }

備註: 在下一篇文章中,我們將解釋編寫腳本的詳細步驟。

結論:

在“ Puppeteer教程”中有關“ Install Puppeteer”的介紹性文章中,我們從頭開始解釋了安裝不同Puppeteer軟件包的詳細步驟。 puppeteer設置包括不同的組件安裝,例如,安裝NodeJ,安裝VSCode,安裝Puppeteer,創建和執行Puppeteer示例項目。 在下一個Puppeteer教程中,我們將說明將Puppeteer用作網絡抓取工具的詳細步驟。 請點擊  這裡 從參考門戶網站閱讀。

發表評論

您的電子郵件地址將不會被發表。 必填字段標 *

回到頁首