今日任務: 開始自己簽署的服務
我們在上一篇文章的結尾來到了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。
- Inspect SignYourself選項,發現它的 id 是 "Task-AddTask-SignYourself"
- 所以在 動作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 索取所有分頁的動作。那在明天的文章當中,我們就會回到主線,繼續自己簽署的任務。
目前的程式碼是:
今天的小總結:
- 在inspect頁面某個元素時有很多可能性的話,建議選擇表層的元素作為操作對象。
- 不同分頁的操作過程
- 除了點擊搜尋按鈕以外,我們也可以用鍵入「Enter」的方式來完成搜尋動作。
下回預告: 到了上傳檔案的頁面,究竟我們要怎麼上傳檔案呢,大家可以先試試看喔!
P.S. 想當初在這個地方卡了好幾天呢(苦笑)