tags: ItIron2022 Javascript

前言

網頁爬蟲一直以來是很熱門的話題，許多人在做爬蟲或搶貨機器人都仍是以py較為主流，但實際上javascript在做網頁自動化處理也有他的優勢在，甚至可以做一些模擬使用者行為的測試，這幾天我們就來用一個熱門的套件做一點爬蟲初體驗吧！

什麼是Puppeteer

Puppeteer是一個js函式庫，由google chrome開發團隊開發並持續營運，提供許多API讓使用者用於Chrome或Chromium瀏覽器，藉此達到網頁自動化測試、爬蟲等功能。

事前準備

雖然在系列文一開始就有提醒過了，但還是再次說一下，在參與今天的實作之前請你先確認你的電腦中有安裝nodejs，沒有的朋友請你到官方網站下載適合自己電腦的版本。

不確定自己有沒有下載的人可以在終端機輸入以下的指令做確認。

node -v

沒出現錯誤就行了！ 本次的示範是採用v16.14.2，但只要是這以上的版本都沒有問題。

Getting started

Step1: 專案結構

今天要做的結構相當簡單，我們建立一個資料夾後輸入以下指令，就像我們當時做自己的npm package一樣

npm init -y

這麼一來就可以有個初始的package.json檔案，我們就可以從這邊開始安裝套件

接著請你輸入以下的指令安裝我們今天要用的套件

npm i puppeteer

最後再請你建立一個app.js檔案，這麼一來整個專案結構就完成囉！

目前為止你的專案結構應該會是這樣。

Step2: 在app.js檔案中引入puppeteer

今天我們用比較特別一點的方式，請你直接將以下的程式碼複製貼上到你的app.js檔案，我知道你會有很多疑問，但先信我一把，我之後會解釋的。

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto("https://ithelp.ithome.com.tw/articles/10293113");
  await page.screenshot({ path: "demo.png" });
  await browser.close();
})();

接著請你在你的終端機內輸入以下的指令

node app.js

你會注意到下方工具列好像有什麼視窗跳出，但結束後看起來什麼都沒發生，不過仔細一看你會發現你的專案資料夾內多了一個demo.png檔案

聰明的你想必已經發現這與剛剛的程式碼有關係了，puppeteer有個顯而易見的好處在於語法的命名相當直白，很多語法即便不多做解釋你大概也能猜出用途。 在使用puppeteer的時候我們需要先建立一個瀏覽器的實體，也就是第一行的

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

函數中可以傳入相當多的選項，headless: false便是指會開啟一個瀏覽器視窗讓你去看到實際的操作，預設值為true，你可以先把上方程式碼中close的部分先註解掉並再次執行我們的腳本，這時候你就會清楚的看到那個puppeteer開啟的瀏覽器視窗，如下圖。

// await browser.close();

有了瀏覽器的實體後我們就可以開始打開一些分頁並指定那些分頁要去哪些頁面、又需要做些什麼，在這次的範例中我們是讓瀏覽器打開分頁、拜訪指定的url並透過puppeteer提供的api進行截圖，最後將整個瀏覽器關掉，用js操作瀏覽器就是這麼容易！

總結

我們今天極度快速的做了一個簡單的puppeteer示範，實際上puppeteer能做的事情遠遠不止於在頁面上截圖而已，之後的幾天我們會開始帶一些有趣的實際應用方式，在此之前我很建議想了解的朋友可以先看看官方網站的內容，接著的幾天我們會與它相當緊密合作的！

文章中的範例程式碼可以在這邊取得，歡迎自行取用

轉職Q & A

Danny，我現在幸運的收到兩份offer，一份待遇較差但團隊感覺很優秀，另一份則是剛好相反，我該怎麼選擇啊？

這也算是很常見的情況，要完美符合你所有checkbox的工作機會需要一點運氣，一般來說你很常需要做一點取捨，但就如我之前說過的，這種問題關西到你自己的人生決定，我並不會給直接的答案，你需要照自己對於工作的期待去做排序，仔細思考現在對你來說最重要的到底是什麼，最終你應該會有個比較明確的答案。

講是這樣講，我自己也是很清楚金錢的誘惑有多大，今天一個jr職缺跟你說「年薪100，你幹不幹？」，想必多數人的直覺反應都是「幹！」，這我完全可以理解，因此有一些手法是你可以參考的，在求職、尤其是軟體業求職有一種叫做competitive offer的概念，意指你拿其他公司開的你的offer去做議價的操作，若你真的很喜歡薪水稍低的那份工作，可以主動向HR透露你的意願與目前的情況，也是有不少人藉由這樣的方式成功談到自己滿意的結果。 不過還是那老話一句，務必老實為上，不要落得兩邊不討好、最終打水漂的情況，這麼一來一切又得重來囉！

本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!