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


今日任務: 開始自己簽署的服務

我們在上一篇文章的結尾來到了DottedSign的主功能頁面,在今天的操作流程中主要就只有兩個動作,所以會很簡單,那因為今天內容會比較輕鬆一些,所以我們不妨一起來認識不同分頁的基本操作流程吧,雖然在本專案的實作過程中,不同分頁的處理是非必要的,不過在未來大家可能參與的專案當中也許就會有這個需求。

按照前三天的流程,我們現在看到的頁面是這樣子,

要做的第一件事情是點擊右上方的藍色圓形按鈕,

而第二件事情就是點選自己簽署的選項,而這個按鈕事件會同時觸發頁面跳轉,


動作A:

我們先找找看藍色圓圈按鈕的selector,

圖中,我有先選取了一個可能是目標selector的選項(class 是 ".sc-bdVaJa.iNlDiS"),而它的上方四層其實也都是候選人,再遇到這種情況的時候,通常自己的經驗是會選取偏表層的元素的selector,不過如果想知道是從哪一層開始觸發點擊事件的話,那就需要每一層都試試看了!

所以在Day 4的A區塊中,我們分別嘗試可得到以下結果,

//await page.click(".sc-bdVaJa.iNlDiS") ==> no reaction
//await page.click(".sc-cZBZkQ.bRHIyL") ==> success
//await page.click(".sc-hRmvpr.linqMc") ==> success
//await page.click(".sc-kkbgRg.gKCYUq") ==> success
await page.click(".sc-dznXNo.gyyNdA")  //=> success

(註: 也許在看到這個系列文章的時候,selector會變得不一樣,可能是因為改版造成的,不過邏輯是可以相仿的)

依照我們的直覺,可能會覺得只要滑鼠位置在正確的位置上就可以觸發點擊事件,不過Puppeteer的click會考慮的更多,像是第一個click選擇點了就沒有反應,也沒有出錯,這就說明只是點了它並不會觸發事件。


動作B:

而第二件事情,我們要點擊 Sign Yourself (自己簽署) 的選項,而這個選項同時會觸發Navigation。

  1. Inspect SignYourself選項,發現它的 id 是 "Task-AddTask-SignYourself"
  2. 所以在 動作B 的區塊內寫下
     await Promise.all([
         page.waitForNavigation(),
         page.click("#Task-AddTask-SignYourself")
     ]);
    

執行看看,應該就會看到這個頁面,而在這個頁面上進行操作會是我們明天的任務!


至此,我們的主線---「自已簽署」在今天就告一段落了,我們接下來開個分支,看看如果要回到第一個(左上角)分頁「about:blank」,並且在那個頁面上面進行操作,那我們該怎麼做吧!

舉個例,像是我們在明天要對現在看到的這個頁面進行「上傳pdf檔」的動作,那我們應該要先有一個pdf檔案,所以我們待會就在下方示範如何回到第一個分頁,然後在頁面會跳轉到Google蒐尋器,輸入「pdf檔」關鍵字並執行搜尋。

動作 Optional C: 索取到所有分頁的控制權

我們在 Optional C 的區塊中,輸入

let pages = await browser.pages()
console.log(pages)
console.log(pages.length)

然後同時用console.log來看看pages究竟是什麼東西吧。
在Terminal或是Command Prompt 當中應該會看到下方的結果

在最下方顯示: The length of pages is: 2
其實pages就是一個類似於陣列的東西,我們從Day1 一直到 今天(Day4)所看到 await page….的「page」其實就是現在這邊pages的第二個元素,所以想要用陣列的方式索取到這幾天我們一直在用的page那我們就可以使用 ==> await pages[1]….


動作 Optional D: Navigate到Google蒐尋器

不過我們現在的目標是用第一個分頁,所以我們要用"pages[0]",在 Optional D的區塊中加入

await pages[0].goto('https://www.google.com')

我們就可以發現分頁標題變成Google了

接下來的動作大家也都不陌生,我們要利用type輸入關鍵字,


動作 Optional E:


我們在Optional E 區塊中寫下

await pages[0].type(".gLFyf.gsfi","pdf檔")


上方圖片是我看到的顯示結果,接下來就要執行搜尋的動作,
在視覺上比較直覺的方式是點選搜尋按鈕(在圖中是被擋住的),不過其實我們在使用搜尋引擎的時候,通常我們都會在打完關鍵字之後直接按下鍵盤上的「Enter」。


動作 Optional F: 執行搜尋動作

所以我們這次就利用type的方式鍵入「Enter」吧。參考連結

await pages[0].type(".gLFyf.gsfi", String.fromCharCode(13));

我們的確做到在不同的分頁進行操作,完成了我們的分支流程,在大家其他的專案中也許會有像是這樣子的需求,其中最為關鍵的地方就是Optional C 索取所有分頁的動作。那在明天的文章當中,我們就會回到主線,繼續自己簽署的任務。

目前的程式碼是:

今天的小總結:

  1. 在inspect頁面某個元素時有很多可能性的話,建議選擇表層的元素作為操作對象。
  2. 不同分頁的操作過程
  3. 除了點擊搜尋按鈕以外,我們也可以用鍵入「Enter」的方式來完成搜尋動作。

下回預告: 到了上傳檔案的頁面,究竟我們要怎麼上傳檔案呢,大家可以先試試看喔!
P.S. 想當初在這個地方卡了好幾天呢(苦笑)

#Puppeteer #Tabs Manipulation





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

留言討論