puppeteer使用笔记 - NodeJS库

Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。

 

demo操作流程：

1.新建一个目录: mkdir pupdemo

2.进入到这个目录: cd pupdemo

3.初始化package.json, 运行命令：npm init (一路回车就好了)

4.安装Node依赖模块,运行命令：npm install --save-dev

5.新建index.js，源代码如下：

// 引入模块
const puppeteer = require('puppeteer');

// 异步执行代码
(async () => {
  // 运行一个带UI的chrome浏览器
  const browser = await puppeteer.launch({headless: false});
  // 新建一个标签页
  const page = await browser.newPage();
  // 打开网址
  await page.goto('https://baidu.com');
  // 在文本框('#kw': ID为kw的元素)中输入puppeteer, 然后等100毫秒
  await page.type('#kw', 'puppeteer', {delay: 100});
  // 点击按钮('#su': ID为su的元素)
  page.click('#su')
  // 等1s
  await page.waitFor(1000);
  // 执行一段脚本，用于返回页面的信息: width 宽, height 高, devicePixelRatio 这个可以百度
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    };
  });
  // 在命令行控制台输出信息
  console.log('Dimensions:', dimensions);
  // 再执行一段脚本，用于返回".result a" 选择器查到的元素文本中包含'Puppeteer的入门和实践'的内容（其中就是找出它的链接地址）
  const targetLink = await page.evaluate(() => {
    return [...document.querySelectorAll('.result a')].filter(item => {
      return item.innerText && item.innerText.includes('Puppeteer的入门和实践')
    }).toString()
  });
  // 跳转这个链接地址
  await page.goto(targetLink);
  // 等1s
  await page.waitFor(1000);
  // browser.close(); 这句代码会关闭窗口，为了体现效果先注释
})()

6.运行命令：node --harmony index.js (然后就可以看到会自动打一个chrome浏览器，并打开指定网页，输入文本及点击按钮一系统操作)