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

準備環境:

電腦: 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)出現視窗中左上角的滑鼠圖案，利用這個功能，我們再把滑鼠移動到目標元素上，就可以在右方看到關於此元素更詳細的資訊