利用 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)
})()