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


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

上次的程式碼介紹

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

先引入 Puppeteer,以便後續使用,接下來可以看到使用 async 以及 () =>async 表示函數會需要非同步操作處理,() => 則是 JS 的箭頭函式,詳細可以參考:鐵人賽:JavaScript Await 與 AsyncMDN 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 的自動操作機器人,再請多多指教囉!

#node.js #Puppeteer





此系列並沒有設定特定的主題,會將一些工作上、或平常開發 side project 的研究、發現、心得記錄下來。 希望能幫助到有遇到相同需求、相同問題的朋友,一同交流學習。

留言討論