用代码模拟人工操作浏览器

Part1前言

有时候有一些浏览器操作的场景，非常枯燥，而且需要定期去点击。最近研究了一下如果通过代码实现模拟人工操作。整个技术方案基Puppeteer进行。
Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行，但是可以通过修改配置文件运行“有头”模式。

Part2使用方法

1开启远程调试

Puppeteer本身支持自己开启浏览器，但是我没有采用这种方法，因为每次都需要从新打开页面。我采用的是谷歌浏览器的调试模型，可以直接访问浏览器进行调试。
开启谷歌浏览器调试模式如下：在浏览器快速方式的目标位置，增加远程调试端口即可。

chrome.exe --remote-debugging-port=8888

打开浏览器输入http://127.0.0.1:8888/json/version，如果有数据显示，即表示开启远程调试成功。

2安装Puppeteer

这里采用npm进行安装

npm i puppeteer

3连接浏览器

通过http://127.0.0.1:8888/json/version获取返回的json来获取远程调试的websocket的地址，然后进行连接。

const puppeteer = require('puppeteer')
;(async () => {
  http.get('http://127.0.0.1:8888/json/version', (res) => {
    const { statusCode } = res
    if (200 != statusCode) {
      return
    }
    let rawData = ''
    res.on('data', (chunk) => {
      rawData += chunk
    })
    res.on('end', () => {
      const parsedData = JSON.parse(rawData)
      wsUrl = parsedData.webSocketDebuggerUrl
      let browser = await puppeteer.connect({
      browserWSEndpoint: wsUrl,
      defaultViewport: null,
      })
    })
  })
})()

4寻找需要的页面

这里通过IP地址来寻找需要控制的页面，通过 browser.pages()获取所有的浏览器页面。

let pageList = await browser.pages()
  let livePage = pageList.filter((item) => {
    let host = url.parse(item.url()).hostname
    console.log(host)
    if (host == liveHost) {
      return true
    }
    return false
  })[0]

5获取dom元素并点击

通过元素选择器进行元素的选择，并得到元素。元素选择器可以通过开发者工具，通过右键Copy-->Copy Selector来获取。之后即可进行元素的调用了

const study_btn = await livePage.$(
    `#pane-first > div > div > div.subjectAll-top.clear > a`
  )
await study_btn.click()

6获取单个元素的属性

通过元素选择器获取到元素，并通过$eval来获取数据，示例如下

const name = await page.$eval('.hnname > a', el => el.innerText)

7获取多个元素的值

通过两个美元符号来获取数组$$eval，示例如下

const allStudy = await livePage.$$eval(
    `#pane-first > div > div > div.subjectAll-course > div > div.liveMain-bottom.clear > div > p`,
    (items) => {
      items.map((x) => x.innerText)
    }
  )

8等待页面加载

当我们加载页面的时候，需要等待页面加载完成之后在进行后续操作，通过下面函数进行

await livePage.waitForNavigation({
    waitUntil: ['load', 'domcontentloaded', 'networkidle0', 'networkidle2'],
  })

waitUntil表示满足什么条件认为页面跳转完成，默认是 load 事件触发时。其他参数含义如下：
load - 页面的load事件触发时
domcontentloaded - 页面的DOMContentLoaded事件触发时
networkidle0 - 不再有网络连接时触发（至少500毫秒后）
networkidle2 - 只有2个网络连接时触发（至少500毫秒后）

Part3总结

本文主要介绍了通过Puppeteer来远程操控浏览器实现模拟人工对浏览器进行操作。