第一天先偷懶一下
應該沒什麼前言可以說
直接開始吧

先補充說明一下為什麼要使用Puppeteer

簡單介紹我覺得的Puppeteer優點

• 可以解決需要javascript內容後渲染的問題
• 使用Chromium瀏覽器直接模擬
• 登入驗證簡單化
• 非常直覺性的使用
• google開發的

缺點我覺得最大就是每次測試都需要瀏覽器重新開啟模擬，速度就降低了

不然用request+cherrio也可以更快速的開發但稍微有點不直覺

所需語言環境: Nodejs
開發語言: javascript
IDE: Visual Studio Code（這不影響開發，當然也可以用簡單的文字編輯器開發）
主要套件: Puppeteer
輔助套件: Cheerio

這邊會用Ubuntu示範為主

1. 安裝 nodejs

作業系統

• Mac (Terminal)

  curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg</a>.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"
  

• Ubuntu (Terminal)

  sudo apt-get install node
  

• Windos
  下載 nodejs

• 其他
  https://nodejs.org/zh-tw/download/package-manager/

如果可以還是推薦node管理套件安裝

2. 安裝套件

打開Terminal(Ubuntu,Mac),CMD(windows)

先新增一個資料夾(mkdir)並進入(cd)

mkdir test-project && cd test-project

初始化資料夾並安裝Puppeteer

npm init -y && npm i puppeteer
# or "yarn init -y yarn add puppeteer"

不懂NPM可以去看看NPM

接著沒出現什麼錯誤就是成功了

3. 簡單測試

先建立一個檔案test.js(可以touch一個或打開資料夾手動建立一個)
在裡面輸入

//這是套件裡面第一隻範例程式
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.google.com.tw');
  await page.screenshot({path: 'google.png'});

  await browser.close();
})();

儲存檔案(ctrl+s)

接著在Terminal(Ubuntu,Mac),Nodjs(windows)同個目錄下輸入

node test.js

接著打開資料夾就可以看到已經對google網頁建立一張截圖了
檔名為google.png

上面怎麼運作下一篇稍微解釋一下

今天先這樣
明天看看我會不會偷懶又不認真打
我比較是心血來潮型
這些文章之後應該都會在修改一次讓它變更好看吧？
不過內容大致不變
哪裡說不清楚,錯誤或需要更詳細講解歡迎大家跟我說
有需求我寫文章的動力才比較高 :)

感謝幫我補充說明的人 不過我等級太低沒辦法回應:(