[ Day 03 ] 用 Puppeteer 來做自動化機器人吧 (二) : 基礎篇

上一篇 「 用 Puppeteer 來做自動化機器人吧 (一) : 安裝篇 」 介紹了 Puppeteer 以及如何在本機上安裝，最後練習了一段簡單的程式碼。今天要來分享一下上次的程式碼主要做了什麼。

上次的程式碼介紹

那就一段一段來解釋一下上次做了什麼吧：

先引入 Puppeteer，以便後續使用，接下來可以看到使用 async 以及 () =>，async 表示函數會需要非同步操作處理，() => 則是 JS 的箭頭函式，詳細可以參考：鐵人賽：JavaScript Await 與 Async、MDN JavaScript 箭頭函式，這邊就不多贅述。

const puppeteer = require('puppeteer');

接下來是用 Puppeteer launch 一個 browser ( Chromium )，其中可以看到我們設了參數 headless : false，如果是設定為 true，會開啟沒有介面的 browser，如果設定 false，就會像上次執行一樣，幫你開一個 browser。

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

這段就很簡單了，它會幫你在 browser 開一個新的分頁。

  const page = await browser.newPage();

這段也很容易，看到 goto 就可以猜到會幫你導向後方指定的網址。

  await page.goto(`https://b123105.blogspot.com/`);

最後這兩個想一起講，首先看下方的，有使用到 click 這個方法，大概就可以猜到他會幫你點後面指定的元素，可以看到我是指定 class = subscribe-button pill-button 的 <button>。

那上面的程式碼是什麼意思呢？ waitForSelector 其實我還蠻常用的，主要是在執行時整個操作速度很快，有時可能這個元素都很沒出現，就讓他去點擊，有可能點擊不到，就會噴錯了。所以會先讓它等待指定元素出現後，再去點擊。

  await page.waitForSelector("button[class='subscribe-button pill-button']");

  await page.click("button[class='subscribe-button pill-button']");

總結

今天介紹了上次的程式碼，基本上我覺得都算很常用的，下一篇想分享我用 Puppeteer 實作 LINE 的自動操作機器人，再請多多指教囉！