Puppeteer 自動化測試:教程 6

Puppeteer 是一個基於節點 js 庫的框架,可作為開源使用。 它可用於網頁抓取工具。 它也用於測試自動化工具。 如今,Puppeteer 在自動化軟件測試領域的使用量正在迅速增加。 需要命令行、Javascript和HTML DOM結構的基本知識才能理解 木偶教程. 整個教程分為以下文章。 

木偶教程

Tosca教程1: 木偶戲概述

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

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

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

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

Tosca教程#6: 木偶自動化測試

在此“ Puppeteer自動化測試”教程中,我們將從一開始就說明Puppeteer自動化的詳細步驟。 將解釋以下功能以從頭開始了解Puppeteer Automation測試–

·安裝Puppeteer

·啟動Web應用程序

·從Chrome瀏覽器中識別對象屬性

·表單提交步驟–輸入文本,單擊事件,驗證

·屏幕截圖捕獲

·執行Puppeteer自動化的腳本

木偶自動化

需要進行測試以確保軟件產品的質量。 在軟件開發過程中定義了多個測試級別。 要測試軟件的功能,可以手動完成,也可以通過自動過程完成。 自動化軟件測試的主要目的是–

  • 快速的測試執行週期。
  • 避免人為錯誤的機會。
  • 減少測試執行時間。
  • 減少發布週期時間。
  • 囊括更多功能而絲毫不影響質量。
  • 可以並行執行多個執行。

 Puppeteer是一個基於JavaScript的Node庫,它提供了高級應用程序接口(API)來通過Chrome DevTools協議控制Chrome Web瀏覽器。 在Chrome瀏覽器中執行的大多數手動操作都可以使用Puppeteer自動執行。 因此,Puppeteer是快速簡便地對Web應用程序進行單元測試的不錯選擇。 

木偶自動化測試方法:

以下介紹了Puppeteer自動化測試所涉及的步驟– 

第1步:確定功能測試方案:

我們將在以下情況下逐步展示執行Puppeteer自動化的方法– 

·啟動Web瀏覽器。

·調用Amazon Web應用程序。

  • 搜索書籍“ Testing Book”。
  • 從結果中將書添加到購物車中。
  • 打開購物車,然後檢查購物車中是否有書籍。
  • 捕獲屏幕並關閉瀏覽器。

Step2#安裝Puppeteer並創建測試用例:

在特定文件夾中創建一個空的javascript文件作為“ sample_script.js”。 在這裡,我們將根文件夾視為SampleProject。 要安裝Puppeteer,我們將使用命令–“ npm install puppeteer”。 根據網絡速度,安裝過程會花費一些時間。 它將下載大約350MB的數據。 安裝後,將在示例Puppeteer項目根文件夾中創建包含不同puppeteer組件和package-lock.json文件的node_modules文件夾。

Step3#捕獲測試對象的標識屬性:

我們可以使用Chrome網絡瀏覽器的開發者工具捕獲標識屬性。 分析不同的屬性,例如id,name,XPath等,我們將選擇可以在腳本執行任何操作中使用的正確屬性。 在此“ Puppeteer自動化測試”教程中,我們將在腳本中使用XPath。 按照以下步驟獲取XPATH或任何其他屬性,

1.打開“菜單->更多工具”下可用的開發人員工具,然後轉到“元素”選項卡。

2. 使用 Finder 工具(單擊 Elements 選項卡左上角可用的箭頭圖標),突出顯示應用程序中的測試對象。 在這裡,我們將檢查搜索框。

Puppeteer自動化測試-Open Chrome Developer工具
木偶自動化測試– Open Chrome Developer工具

3.分析突出顯示的源代碼以識別期望的屬性。 要獲取測試對象的XPATH屬性,請右鍵單擊突出顯示的部分,然後單擊“複製->複製Xpath”以將XPATH屬性複製到剪貼板中。

木偶自動化測試-複製XPath
木偶自動化測試–複製XPath

4.現在,將Xpath粘貼到查找器文本框中,然後按Enter鍵以檢查Xpath是否在唯一地標識對象。

木偶自動化測試-檢查XPath
木偶自動化測試–檢查XPath

5.同樣,我們還需要捕獲另一個測試對象的標識屬性。

Step4#Puppeteer自動化開發步驟:

為了完成測試用例,我們需要在網頁上執行某些操作。 對於每種操作,都有不同的方法可用。 此處介紹了在我們的方案中用於“ Puppeteer自動化測試”的方法。

啟動程序 - 包含the之後,我們需要使用using啟動方法啟動瀏覽器。 可以將對象引用傳遞給此方法,以針對無頭或無頭瀏覽器進行定義。 然後,我們需要創建瀏覽URL所需的Web瀏覽器實例。 在這裡,異步功能用於使用await關鍵字來處理Web同步器。

//包含puppeteer包 const puppeteer = require('puppeteer'); (async () => { //啟動無頭瀏覽器 const browser = await puppeteer.launch({ headless: true }); //創建瀏覽器實例 const page = await browser.newPage(); //導航到url 等待 page.goto('https://www.amazon.in/'); })()

整個測試將在無頭瀏覽器中完成。 如果要打開頭部瀏覽器,則需要將該對像傳遞給launch方法,如下所示: “ {headless:false}”。

檢查是否存在 –我們需要使用該方法 page.waitForXpath 這將檢查Xpath的存在並返回測試對象的引用。 通過測試返回參考,我們可以在測試用例中添加一個驗證點。

	let searchBox = await page.waitForXPath("//*[@id='twotabsearchtextbox']",{ visible: true }); if (searchBox === null) //驗證測試對象 { console.log('亞馬遜屏幕不顯示'); }

輸入數據 - 使用 類型 該對象引用的方法,我們可以輸入文本。

await searchBox.type("測試書");

點擊元素  –同樣,使用 點擊 任何對象引用的方法,我們都可以執行單擊操作。

let btnSearch = await page.waitForXPath("//*/input[@id='nav-search-submit-button']",{visible:true }); btnSearch.click();

在控制台中打印消息  –使用方法 控制台日誌,我們可以在控制台中打印任何消息作為輸出。

console.log('控制台延遲已產生');

參照新標籤 –使用方法 page.target和browser.waitforTarget,我們可以檢查有關新標籤的引用並將其存儲到變量中。

	常量 pageTarget = page.target(); const newTarget = await browser.waitForTarget(target => target.opener() === pageTarget); //獲取新的頁面對象: const page2 = await newTarget.page();

捕捉截圖 –使用方法 頁。 截屏,已獲取特定頁面的快照並按照作為參數提供的文件名進行保存。

等待 page.screenshot({ path: 'screenshot1.png' });

關閉頁面和瀏覽器 –使用方法 關閉,我們可以關閉網頁和瀏覽器。

	等待 page.close(); 等待瀏覽器.close();

等待時間 –在某些情況下,需要等待頁面加載或完成任何從屬任務的完成; 我們需要在預定的時間內暫停執行。 為此,我們可以使用 page.waitForTimeout 該方法可以基於通過參數傳遞的值(以毫秒為單位)暫停執行。

等待頁面.waitForTimeout(2000);

現在,我們已經了解了使功能場景自動化的基本技術步驟。 基於這些知識,我們可以通過下面的Puppeteer Automation測試案例。 最常用的類和方法的詳細概述將在後續文章中進行解釋。

/** * @name 亞馬遜搜索 */ const puppeteer = require('puppeteer'); const reportPath = 'C:\\LambdaGeeks\\puppteer_proj_sample\\output\\'; 常量截圖 = 'screen1.png'; // 用於將文件導出為 .docx 文件 try { (async () => { const browser = await puppeteer.launch({ headless: false }); const pageNew = await browser.newPage() await pageNew.setViewport( { width: 1280, height: 800 }); await pageNew.goto('https://www.amazon.in/'); //輸入搜索條件 let searchBox = await page.waitForXPath("//*[@id ='twotabsearchtextbox']",{ visible: true }); if (searchBox === null) { console.log('亞馬遜屏幕不顯示'); } else{ await searchBox.type("Testing Book"); console.log('已輸入搜索條件'); } //點擊搜索按鈕 let btnSearch = await pageNew.waitForXPath("//*/input[@id='nav-search-submit-button']", { visible: true }); if (btnSearch === null) { console.log('搜索按鈕未顯示'); } else{ await btnSearch.click(); console.log('點擊搜索按鈕') ; } //點擊具體搜索結果 let myBook = await pageNew.waitForXPath("//*[contains(text(),'Selenium Testing Tools Cookbook Second Edition')]",{ visible: true}) if (myBook === null) { console.log('Book is not available'); } else{ 等待 myBook.click(); console.log('點擊指定書籍訂購'); } // 判斷新標籤頁是否打開 const pageTarget = pageNew.target(); const newTarget = await browser.waitForTarget(target => target.opener() === pageTarget); //獲取新的頁面對象: const page2 = await newTarget.pageNew(); 等待 page2.setViewport({ 寬度: 1280, 高度: 800 }); //加入購物車 let addToCart = await page2.waitForXPath("//*/input[@id='add-to-cart-button']",{ visible: true }); if (addToCart === null) { console.log('添加到購物車按鈕不可用'); } else{ console.log('點擊添加到購物車按鈕'); 等待 addToCart.click(); } //驗證加入購物車過程 let successMessage = await page2.waitForXPath("//*[contains(text(),'Added to Cart')]",{ visible: true }); if (successMessage === null) { console.log('商品未加入購物車'); } else{ console.log('商品加入購物車成功'); } // 捕獲購物車編號 let cartCount = await page2.waitForXPath("//*/span[@id='nav-cart-count']",{ visible: true}); let value = await page2.evaluate(el => el.textContent, cartCount) console.log('Cart count: ' + value); cartCount.focus(); 等待 page2.screenshot({ path: screenshot }); 等待 pageNew.waitForTimeout(2000); 等待 page2.close(); 等待 pageNew.close(); 等待瀏覽器.close(); })() } 捕捉 (err) { console.error(err) }

Step5#木偶自動化測試執行:

我們可以使用以下命令啟動執行 節點sample_script.js 通過命令提示符。 在執行過程中,將打開Chromium瀏覽器並自動執行功能步驟,並存儲最後一頁的屏幕截圖。 屏幕截圖和控制台輸出如下所示。

木偶自動化測試-控制台輸出
木偶自動化測試–控制台輸出
木偶自動化測試-捕獲的屏幕
木偶自動化測試–捕獲屏幕

結論:

在本《 Puppeteer自動化測試教程》中,我們了解了有關Puppeteer自動化測試的詳細步驟。 在下一個Puppeteer教程中,我們將了解最常用的Puppeteer類和方法的詳細概述。 請點擊 這裡 訪問該Puppeteer教程的參考門戶。 

發表評論

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

回到頁首