Puppeteer爬虫脚本中使用 jQuery 的方法

利用 Puppeteer 操作无头浏览器进行数据爬取的时候，如果需要获取的dom节点较少，原生js选择器就完全够用

当需要获取的元素较多的时候，我就希望使用操作DOM效率最高的jq来完成操作

如果访问的网站，原生引用了jq

如果 targetPage 已经引入了jQuery 则可以直接用 $ 操作DOM结构，方法是声明一个变量

const userEl = await page.evaluate(() => {
let arr=[]
    var $ = window.$
      $('ul[class=user-list]').find('li').each((index,item)=>{
           arr.push($(item).find('img').attr('src'))
           console.log($(item).find('img').attr('src'))
      })
      return arr
    })

另外我发现有一些网站即使已经引用了jQuery 也无法 使用 window.获取获取 方法

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

await page
    .mainFrame()
    .addScriptTag({
      url: 'https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js'
    })
  const userEl = await page.evaluate(() => {
  let arr=[]
      $('ul[class=user-list]').find('li').each((index,item)=>{
           arr.push($(item).find('img').attr('src'))
           console.log($(item).find('img').attr('src'))
      })
      return arr
    })  

或者使用三方工具

• jquery api的使用puppeteer-jquery

• www.npmjs.com/package/pup… 首次使用修改镜像地址

• npm config set puppeteer_download_host=npm.taobao.org/mirrors

• 安装

• yarn add puppeteer puppeteer-jquery

const puppeteer = require('puppeteer');
const $jquery = require("puppeteer-jquery");
const {pageExtend, PageEx} = $jquery;

(async __=>{
    let browser = await puppeteer.launch({headless: false});
    let pageOrg = await browser.newPage();
    //重点
    let page = pageExtend(pageOrg);
    
    await page.jQuery('body').append(`<h1>Title</h1>`);
    
    let title = await page.jQuery('h1').text();
   
    let text = await page.jQuery('body button:last')
        .closest('div')
        .find('h3')
        .css('color', 'yellow')
        .parent()
        .find(':last')
        .text()
    ;
})()