iT邦幫忙

2021 iThome 鐵人賽

DAY 14
1
Modern Web

JavaScript Easy Go!系列 第 14

#14 Automation (2)

在寫爬蟲程式的時候,我們需要先理解一下目標網站的結構。
做自動化時,我們也須了解手動執行時的步驟。

步驟

當我們想在選課網站上刷加選時,我們需要以下步驟:

  1. 登入選課系統
  2. 進入選課頁面
  3. 至加選頁面
  4. 查詢你想要的課程
  5. 開始刷,希望有人退掉時你剛好看到

其中比較麻煩的是登入時有圖形驗證碼。處理的方式之後會提到。

其實這看起來也不是什麼複雜的東西,所以很適合在這四五天內說完。

建立專案

與寫爬蟲一樣,我們都必須先建立一個資料夾:

初始化它:

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);
}

我們的主要程式除了計算執行時間外,分別就我們在上面列出的步驟執行各項程序:

  1. 準備階段 - init()
  2. 登入選課系統 - login()
  3. 進入選課頁面 - enter()
  4. 至加選頁面 - enter()
  5. 查詢你想要的課程 - query()
  6. 開始刷,希望有人退掉時你剛好看到 - 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 感覺比較不會被發現是程式刷的。


每日鐵人賽熱門 Top 10 (0927)

以 9/27 20:00 ~ 9/28 20:00 文章觀看數增加值排名

  1. +341 處理 API 層次感之地基篇
    • 作者: Chris
    • 系列:Vue.js 進階心法
  2. +316 Day 1 無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  3. +277 Vuex 的使用偏好
    • 作者: Chris
    • 系列:Vue.js 進階心法
  4. +260 Day 3 雲端四大平台比較:AWS . GCP . Azure . Alibaba
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  5. +249 Day 2 AWS 是什麼?又為何企業這麼需要 AWS 人才?
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  6. +238 Day 4 網路寶石:AWS VPC Region/AZ vs VPC/Subnet 關係介紹
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  7. +228 Day 5 網路寶石:AWS VPC 架構 Routes & Security (上)
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  8. +215 [Day12] TS:什麼!型別還有遞迴(recursion)的概念?用組合技實作 SnakeToCamelCase
    • 作者: pjchender
    • 系列:React 前端工程師的兩把刷子
  9. +210 Day 6 網路寶石:AWS VPC 架構 Routes & Security (下)
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  10. +202 Day 7 網路寶石:【Lab】VPC外網 Public Subnet to the Internet (IGW) (上)
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題

終於有些 Vue 和 React 的文章出現了
但我沒用過 React 看不懂 QQ


上一篇
#13 Automation
下一篇
#15 Automation (3)
系列文
JavaScript Easy Go!31

尚未有邦友留言

立即登入留言