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浏览器，并打开指定网页，输入文本及点击按钮一系统操做)