最近公司有個(gè)項(xiàng)目是基于vue開(kāi)發(fā)的，但部分老頁(yè)面是前后端不分離的仰迁；比如登錄頁(yè)面箕般。由于后端也沒(méi)有相關(guān)登錄接口耐薯，所以每次在本地啟動(dòng)服務(wù)后，需要到測(cè)試環(huán)境登陸丝里；然后手動(dòng)復(fù)制幾個(gè)cookie粘貼到本地啟動(dòng)的頁(yè)面中曲初，整個(gè)過(guò)程比較繁；所以用node寫(xiě)個(gè)腳本去簡(jiǎn)化一下流程杯聚。

優(yōu)化前的流程

• 本地npm run serve啟動(dòng)服務(wù)

• 登錄測(cè)試環(huán)境https://test.xxxx.com/login

• 打開(kāi)調(diào)試复斥，找到相關(guān)cookie，復(fù)制

• 打開(kāi)本地啟動(dòng)的頁(yè)面并打開(kāi)調(diào)試械媒；粘貼復(fù)制的cookie，刷新頁(yè)面

優(yōu)化過(guò)程

安裝Puppeteer和readline

Puppeteer:

Puppeteer 是一個(gè)由 Google 開(kāi)發(fā)的 Node.js 庫(kù)评汰，用于控制 headless 瀏覽器（無(wú)圖形用戶界面的瀏覽器）纷捞。它提供了一套高級(jí)的 API，允許開(kāi)發(fā)者通過(guò)程序方式操控瀏覽器的行為被去，包括導(dǎo)航主儡、表單提交、截圖惨缆、生成 PDF 等功能糜值。Puppeteer通常用于執(zhí)行自動(dòng)化測(cè)試、屏幕截圖坯墨、搜索引擎爬蟲(chóng)等任務(wù)寂汇。在本例中，我們使用 Puppeteer 模擬用戶登錄過(guò)程捣染，獲取登錄后的 Cookies骄瓣。

readline:

readline 是 Node.js 內(nèi)置的模塊之一，提供了一個(gè)接口來(lái)從可讀流（如 process.stdin）讀取數(shù)據(jù)耍攘。它通常用于從終端接收用戶輸入榕栏，使得我們可以以交互的方式與用戶進(jìn)行通信畔勤。在本例中，我們使用 readline 創(chuàng)建了一個(gè)接口扒磁，以便用戶能夠在終端中輸入賬號(hào)和密碼庆揪。

這兩個(gè)模塊的結(jié)合使用使得我們可以通過(guò) Puppeteer 控制瀏覽器完成登錄，而 readline 則使得用戶能夠在終端中直接輸入賬號(hào)和密碼妨托。

安裝并引入模塊

npm i puppeteer@20.0.0
npm i readline

引入 puppeteer缸榛、readline 和 fs：

const puppeteer = require('puppeteer')
const readline = require('readline')
const fs = require('fs')

定義登錄函數(shù)

我們定義一個(gè)名為 login 的異步函數(shù)，用于模擬用戶登錄和獲取 cookies始鱼。

/**
* 登錄
* @param {string} url 登錄頁(yè)面url
* @param {string} usernameSelector 登錄頁(yè)面用戶名輸入框的ID
* @param {string} passwordSelector 登錄頁(yè)面密碼輸入框的ID
* @param {string} username 賬號(hào)
* @param {string} password 密碼
*/
async function login(url, usernameSelector, passwordSelector, username, password) {
// ...

}

啟動(dòng)瀏覽器

在 login 函數(shù)中仔掸，使用 puppeteer.launch() 啟動(dòng)一個(gè) headless 瀏覽器實(shí)例，然后通過(guò)page.goto打開(kāi)我們傳入的url医清。

const browser = await puppeteer.launch({ headless: true })
const page = await browser.newPage()
await page.goto(url, { waitUntil: 'load' })

輸入用戶名和密碼

使用 page.type() 模擬輸入用戶名和密碼起暮，其中第一個(gè)參數(shù)為輸入框的選擇器。登錄完成后会烙，我們?cè)偻ㄟ^(guò)page.click去點(diǎn)擊登錄按鈕负懦。

await page.type(usernameSelector, username)
await page.type(passwordSelector, password)
  
await page.click('#_btnLogin')
await page.waitForNavigation({ waitUntil: 'load' })

獲取 Cookies

使用 page.cookies() 獲取頁(yè)面的 cookies，并將我們需要的token提取出來(lái)柏腻。我們這里就隨便以APITOKEN 和 bpmftoken 為例子纸厉；提取后我們就可以使用browser.close()關(guān)閉瀏覽器。

const cookies = await page.cookies()
const tokens = {}
for (const cookie of cookies) {
    cookie.name === 'APITOKEN' && (tokens.APITOKEN = cookie.value)
    cookie.name === 'bpmftoken' && (tokens.bpmftoken = cookie.value)
}
browser.close()

寫(xiě)入Tokens到文件

將獲取到的tokens寫(xiě)入JSON文件并關(guān)閉終端五嫂。

const tokenJSON = JSON.stringify(tokens, null, 2)
const filePath = './src/config/tokens.json'
fs.writeFile(filePath, tokenJSON, (err) => {
    if (err) throw err
    console.log('token已寫(xiě)入颗品，請(qǐng)執(zhí)行 npm run serve')
    process.exit(1)
});

訪問(wèn)終端輸入數(shù)據(jù)

使用 readline 模塊創(chuàng)建一個(gè)接口，獲取用戶輸入的賬號(hào)和密碼沃缘。

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
})

let username = null;
let password = null;
const url = 'https://xxxx..com/login'; //登錄頁(yè)面
const usernameSelector = '#_txtUid'; //用戶名輸入框ID
const passwordSelector = '#_txtPwd'; //密碼輸入框ID

rl.question('請(qǐng)輸入賬號(hào):', (answer) => {
    username = answer
    rl.question('請(qǐng)輸入密碼:', (answer) => {
        password = answer
        rl.close()
        login(url, usernameSelector, passwordSelector, username, password)
    })
});

終端執(zhí)行下面命令即可實(shí)現(xiàn)獲取token躯枢。

node login.js

然后在項(xiàng)目中通過(guò)讀取/src/config/tokens.json中的內(nèi)容去手動(dòng)寫(xiě)入token即可。

完整代碼如下：

const puppeteer = require('puppeteer')
const readline = require('readline')
const fs = require('fs')

async function login(url, usernameSelector, passwordSelector, username, password) {
    const browser = await puppeteer.launch({ headless: true })
    const page = await browser.newPage()
    try {
        await page.goto(url, { waitUntil: 'load' })
        try {
            await page.type(usernameSelector, username)
            await page.type(passwordSelector, password)

        } catch (error) {
            console.log(error)
        }

        await page.click('#_btnLogin')
        await page.waitForNavigation({ waitUntil: 'load' })
        console.log('登錄成功')
        await page.waitForTimeout(500)

        const cookies = await page.cookies()
        const tokens = {}
        for (const cookie of cookies) {
            cookie.name === 'APITOKEN' && (tokens.APITOKEN = cookie.value)
            cookie.name === 'bpmftoken' && (tokens.bpmftoken = cookie.value)
        }

        await browser.close()


        const tokenJSON = JSON.stringify(tokens, null, 2)

        const filePath = './src/config/tokens.json'

        fs.writeFile(filePath, tokenJSON, (err) => {
            if (err) throw err;
            console.log('token已寫(xiě)入, 請(qǐng)執(zhí)行npm run serve')
            process.exit(1)
        })
    } catch (error) {
        console.error('Error:', error)
        await browser.close()
        process.exit(1)
    }
}


let username = null;
let password = null;
const url = 'https://xxxx..com/login'; //登錄頁(yè)面
const usernameSelector = '#_txtUid'; //用戶名輸入框ID
const passwordSelector = '#_txtPwd'; //密碼輸入框ID

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
})

rl.question('請(qǐng)輸入賬號(hào)(默認(rèn)GP00164槐臀，直接回車(chē)): ', (answer) => {
    username = answer || 'GP00164';
    rl.question('請(qǐng)輸入密碼: (默認(rèn)GP00164锄蹂，直接回車(chē))', (answer) => {
        password = answer || 'Xxzx2023@123'
        rl.close()
        login(url, usernameSelector, passwordSelector, username, password)
    })
})

總結(jié)

這樣我們?cè)诒镜亻_(kāi)發(fā)過(guò)程中就不需要手動(dòng)復(fù)制token，直接運(yùn)行node login.js即可水慨。

當(dāng)然Puppeteer可以做很多事情得糜，比如自動(dòng)化測(cè)試、屏幕截圖和生成 PDF晰洒、爬蟲(chóng)朝抖、性能測(cè)試、表單自動(dòng)填寫(xiě)等等欢顷，更多API可以查看官網(wǎng)學(xué)習(xí)槽棍。