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

我們在上一篇文章的結尾來到了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. 想當初在這個地方卡了好幾天呢(苦笑)