【Puppeteer】爬虫脚本中插入 jQuery 的方法

利用 Puppeteer 操作无头浏览器进行数据爬取的时候，如果 targetPage 已经引入了jQuery 则可以直接用 $ 操作DOM结构，方法是声明一个变量

var $ = window.$
var items = $('.list-wp a')

如果没有引入可以自行插入 jQuery 方便接下来的DOM操作

  await page
    .mainFrame()
    .addScriptTag({
      url: 'https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js'
    })

另外我发现有一些网站即使已经引用了jQuery 也无法 使用 window.$ 获取 $ 方法，所以最好每次都在脚本中直接自行引入一个 jQuery 完整脚本如下（以爬取站酷首页列表为例）

const puppeteer = require('puppeteer')
void(async () => {
  const browser = await puppeteer.launch({
    headless: true
  })
  const page = await browser.newPage()
  await page.goto('https://www.zcool.com.cn')
  await page
    .mainFrame()
    .addScriptTag({
      url: 'https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js'
    })
  await page.waitFor(2000)

  const result = await page.evaluate(() => {
    var items = $('.card-box')
    var links = []

    if (items.length >= 1) {
      items.each((index, item) => {
        let it = $(item)
        let rate = Number(it.find('.statistics-tuijian').text())
        let title = it.find('.card-info a').text().replace(/\s+/g, '')
        let poster = it.find('img').attr('src')
        links.push({
          title,
          rate,
          poster
        })
      })
    }
    return links
  })
  console.log(result)
})()