确保自己熟练使用async与await以及分析dom结构

npm i puppeteer

在node引用

const puppeteer = require('puppeteer');

尝试在无头浏览器打开微博热搜

const puppeteer = require('puppeteer');
var scrape = async () => {
    // 初始化无头浏览器
    const browser = await puppeteer.launch({headless: false});
    // 在无头浏览器打开一个空白标签
    const page = await browser.newPage();
    // 给刚刚打开的空白标签给予链接跳转
    await page.goto('https://s.weibo.com/top/summary');
    // close()用于关闭无头浏览器
    // browser.close()
    return '执行完毕啦'
}
scrape().then((value) => {
    console.log(value)
});

打开了无头浏览器之后如何获取里面的元素呢？怎么进行爬虫呢

• 直接用原生的document.getElementById document.getElementsByClassName querySelector querySelectorAll等等
• 或者用puppeteer自带的 $eval() $$eval()
  获取单个元素可用$eval()和jq差不多，相当于原生js的querySelector
  获取元素组可用$$eval()和$eval()用法一样，相当于原生的querySelectorAll

分析热搜榜dom结构

await page.$$eval('#pl_top_realtimehot table tbody tr', e => e)

注：e其实就是元素组

console.log(await page.$$eval('#pl_top_realtimehot table tbody tr', e => e.length)) // 51

获取tr的代码

const puppeteer = require('puppeteer');
var scrape = async () => {
    // 初始化无头浏览器
    const browser = await puppeteer.launch({headless: false});
    // 新建页面
    const page = await browser.newPage();
    // 跳转到指定页面
    await page.goto('https://s.weibo.com/top/summary/');
    // 获取tr结构
    const data = await page.$$eval('#pl_top_realtimehot table tbody tr', e => e)
    browser.close()
    return data
}
scrape().then((value) => {
    console.log(value)
});

如何获取tr标签里面的元素？实现正在意义上的爬虫？？

先确认确认我们需要哪些数据，然后分析dom结构

分析了dom了之后

1. 遍历tr
2. 从tr里面获取每一项的数据

const puppeteer = require('puppeteer');
var scrape = async () => {
    // 初始化无头浏览器
    const browser = await puppeteer.launch({headless: false});
    // 新建页面
    const page = await browser.newPage();
    // 跳转到指定页面
    await page.goto('https://s.weibo.com/top/summary/');
    // 获取tr，并且循环
    const data = await page.$$eval('#pl_top_realtimehot table tbody tr', e => e.map(el => {
      // 获取需要的数据
      const title = el.querySelector('td.td-02 a').innerHTML
      const hot = el.querySelector('td.td-02 span')
      const tag = el.querySelector('td.td-03').innerText
      return {
        title,
        hot: hot ? hot.innerHTML : 0,
        tag
      }
    }))
    browser.close()
    return data
}
scrape().then((value) => {
    console.log(value)
});