在寫爬蟲程式的時候，我們需要先理解一下目標網站的結構。
做自動化時，我們也須了解手動執行時的步驟。
當我們想在選課網站上刷加選時，我們需要以下步驟：
其中比較麻煩的是登入時有圖形驗證碼。處理的方式之後會提到。
其實這看起來也不是什麼複雜的東西，所以很適合在這四五天內說完。
與寫爬蟲一樣，我們都必須先建立一個資料夾：
初始化它：
npm init -y
然後加上我們需要用到的 Packages：
npm i puppeteer
啥，我們只需要用到 puppeteer？
嗯，目前是這樣沒錯，當然之後還會需要其他東西，但現在就先這樣。
你可能會發現 puppeteer 的大小有點大，這是因為它包含了一個 Chromium。
Chromium 就是這個憂鬱版的 Chrome：
Chromium 是一個開源的瀏覽器，它長得跟 Chrome 很像，因為 Chrome 就是以 Chromium 為底再加上一些酷東西而成的。
說 Chromium 憂鬱不是沒有原因，因為 Chromium 相較於 Chrome 的確少掉了許多東西，如果你沒搞清楚它少了什麼在用 puppeteer 時可能就會跟著它一起憂鬱。其中一個差異是 Chromium 是不能播放 mp4 的，因為 mp4 的授權跟 Chromium 的開源授權不相容。
不過這次我們不會需要播放 mp4，所以可以用 Chromium，但如果你想要用 Chrome 的話也可以，用 puppeteer-core 取代 puppeteer 再上網查一下，在啟動時會需要帶上 Chrome 位置的參數。
好了，接下來新增 config.js 來儲存一些設定：
module.exports = {
username: "User Name",
password: "Password",
// 開課序號
courses: [3056, 3057],
};
接著開始寫 index.js，也就是主要的程式：
const puppeteer = require("puppeteer");
// 從 config.js 讀取設定
const config = require("./config.js");
// 開發狀態判斷
const dev = true;
// 瀏覽器跟操作頁面放到模組全域
let browser, page;
main();
async function main() {
const START_T = Date.now();
await init(); // 初始化，啟動瀏覽器建立頁面
await login(); // 登入選課系統
await enter(); // 進入選課頁面、至加選頁面
const courses = await query(); // 查詢你想要的課程的資訊
await checker(courses); // 開始刷
const END_T = Date.now();
debug(`Execution Time: ${END_T - START_T}ms`);
}
function debug(...args) {
if (dev) console.debug(...args);
}
我們的主要程式除了計算執行時間外，分別就我們在上面列出的步驟執行各項程序：
init()
login()
enter()
enter()
query()
checker()
今天就以其中的 init() 函式作結吧：
async function init() {
// 讓 puppeteer 啟動瀏覽器，並放置模組最上層之 browser 變數
browser = await puppeteer.launch({
headless: !dev,
defaultViewport: null,
args: ["--start-maximized", "--disable-web-security", "--disable-features=IsolateOrigins,site-per-process", "--no-sandbox"],
});
debug("Browser Lauched");
// 新增一個分頁，並放置模組最上層之 page 變數
page = await browser.newPage();
debug("Page Created");
}
我們用 puppeteer 提供的方法啟動一個全螢幕的瀏覽器視窗，並帶入一些給瀏覽器的參數。
然後再開啟一個新分頁。
話說我現在發現好像不需要 puppeteer 就可以做出這個刷加選的東西了。
但為了讓我有東西寫到 30 天還是寫一下 puppeteer 吧！而且用 puppeteer 感覺比較不會被發現是程式刷的。
以 9/27 20:00 ~ 9/28 20:00 文章觀看數增加值排名
+341 處理 API 層次感之地基篇
+316 Day 1 無限手套 AWS 版：掌控一切的 5 + 1 雲端必學主題
+277 Vuex 的使用偏好
+260 Day 3 雲端四大平台比較：AWS . GCP . Azure . Alibaba
+249 Day 2 AWS 是什麼？又為何企業這麼需要 AWS 人才？
+238 Day 4 網路寶石：AWS VPC Region/AZ vs VPC/Subnet 關係介紹
+228 Day 5 網路寶石：AWS VPC 架構 Routes & Security (上)
+215 [Day12] TS：什麼！型別還有遞迴（recursion）的概念？用組合技實作 SnakeToCamelCase
+210 Day 6 網路寶石：AWS VPC 架構 Routes & Security (下)
+202 Day 7 網路寶石：【Lab】VPC外網 Public Subnet to the Internet (IGW) (上)
終於有些 Vue 和 React 的文章出現了
但我沒用過 React 看不懂 QQ
iThome鐵人賽
看影片追技術