自動化測試 x Puppeteer - 玩偶QA參一咖 Day02


今日任務: 準備環境、前往指定網址


準備環境:

  • 電腦: Windows、Mac 都行,兩種都有測試過,不過在撰寫這系列文章中我用的是 Windows。
  • 文字編輯器: 我用的是 VScode,編輯器內部的 Terminal 使用上很便利。

開啟 Command Prompt,並且cd到目標資料夾(ex: C:....\Desktop\QA-Puppeteer),並建立一個Node.js專案:

$ npm init -y   //資料夾會多出一個package.json

接著我們要引進Puppeteer套件

$ npm install puppeteer //資料夾會多出 package-lock.json 和 node_modules,另外package.json裡面也會多出與puppeteer相關的dependency

這篇文章提供了關於Node.js專案以及npm相關指令的介紹

然後我們新增一個檔案,名字任意但副檔名要是".js"結尾(ex: puppet.js),因為Puppeteer目前只能用JavaScript來實作。接著就可以開始撰寫程式碼了!不過其實我們可以不用從頭開始,因為在Puppeteer的技術文件上就有提供一個基礎的程式範例(example.js)

我個人會選擇直接複製貼上這段程式碼到剛剛新建的puppet.js上

隨處可見 await,是因為 puppeteer 的方法在執行後都會 return 一個 promise,而 await 的意思就是要等到收到 promise 之後再做下一件事情。
這一篇文章對於 promise, async/await 有詳細的探討

第1行: 將 puppeteer 這個 class 實體化
第4、5行: 啟動瀏覽器以及開新分頁
第6行: 讓新分頁 navigate 到指定的網址,在此我們把將網址改成https://www.dottedsign.com
第7行: 截圖並儲存起來。
第9行: 關閉瀏覽器

截圖的應用通常是確認測試過程是否正常,在此就是,想要確認剛剛有沒有真的抵達我們提供的網址,所以可以點開資料夾內的 example.png 確認這件事情。

看到以上這個畫面就表示一切順利!

不過可能會覺得奇怪,怎麼瀏覽器在執行的時候都沒有出現呢?因為其實 Puppeteer 就是實現 Headless Chrome 的其中一種手段,所以 Puppeteer 在預設上就是將 headless 這件事情設為 true。不過實際上在撰寫程式碼的時候,為了確定流程都要按照計畫進行,通常都會把 headless 選項設為 false (這樣瀏覽器就會顯示出來)。另外,在開發的時候我自己通常也會在 browser.close() 前面加上一行等待的指令,是為了在繼續開發下一階段的功能時,我們需要花些時間找到網頁上我們需要操作的元素的資訊,所以會讓網頁在完成目前階段性任務時停留一陣子。所以,
我們把第4行改成

const browser = await puppeteer.launch({headless:false})

在第9行前加上

await page.waitfor(100) //這樣是等100秒的意思

然後在 Terminal/Command Prompt 的專案路徑內(ex: C:....\Desktop\QA-Puppeteer)輸入

$ node puppet.js //執行程式。這時候可以看到Chromium開啟,並且navigate到指定頁面

好,那我們就準備好可以進入下一個重要的開始了!


如果在看完第一篇文章之後有到DottedSign 註冊並使用的話,會知道我們下一個動作就是要點擊目前網頁上方的 log in 按鈕,而在 Puppeteer 提供的函式中,如果要和網頁上的元素有所互動的話,很有機會是透過 selector 來實現,我們在網頁上 按下右鍵並點選 Inspect (或是直接按F12),就會看到

我們利用上面這張圖簡介一下 seletor 的概念,像是在第4行的 div 標籤中,如果我們要和這個 div 標籤做互動的話(ex: 在此 div 上方點擊滑鼠一下),那我們會透過 select '__next' 這個 id 來達成,用 Puppeteer 提供的函式庫,我們可以寫出以下的方法(有很多方法,在此是列出我最常用的兩種)
(1) 直接點選

await page.click("#__next")

(2) 先索取到元素,並assign到某個變數。然後再做點選的動作

test_variable = await page.$("#__next") // 一個"$"字符表示只會選取一個元素,如果是用"$$"則表示目標元素有兩個以上
await test_variable.click()

小括號裡面包的就是選取目標元素的依據(id),在這一系列的文章中,我們會使用到的選取依據大部分只包含"id"和"class",
如果要選取的是"id",那會在字串最前方加上"#"字符
如果要選取的是"class",那會在字串前方加上"."一個點
當然也還有其他選取的方式(ex: xpath, css, …)。


回到主軸,我們現在想點選 log in 按鈕,可以點選剛剛(透過F12/右鍵+inspect)出現視窗中左上角的滑鼠圖案,利用這個功能,我們再把滑鼠移動到目標元素上,就可以在右方看到關於此元素更詳細的資訊

現在我們知道 log in 按鈕的"id"是"Login_Navibar",於是在程式碼下方加上

await page.click("#.Login_Navibar")

在command prompt/Terminal執行

$ node puppet.js

執行結果

目前的程式碼是:


這樣就算是達成我們的今日目標了,在這邊做個小小總結,我們今天大致有走過以下事項

  1. Node.js 專案的建立、安裝、基本操作 (推薦文章)
  2. 習慣 await 的用法(推薦文章)
  3. 認識 selector ,基本的索取元素和click

下回預告: 完成登入的動作,這個登入其實有點不一樣

#Puppeteer
在此系列文章中以Kdan Mobile主打服務之一的DottedSign做為Puppeteer的實作範例,從最開始的「環境建置」到稍微複雜的「切換頁面、上傳檔案」皆會走過,看完系列文章後我們就會得到一個能獨立完成任務的QA程式了呦^_^






Related Posts

Install SQL Server 2019 & SSMS

Install SQL Server 2019 & SSMS

最會翻譯的webpack

最會翻譯的webpack

今天台北歷史高溫39.7度 但我在台中吹冷氣

今天台北歷史高溫39.7度 但我在台中吹冷氣



Comments