puppeteer使用指南

安装

必要条件：Node版本至少 v7.6.0，因为要使用 async / await。
国外网络，执行npm install puppeteer --save
国内网络，执行npm install puppeteer --registry https://registry.npm.taobao.org --ignore-scripts --save
因为安装过程中会执行install.js，install.js会下载Chromium。我们加参数ignore-scripts忽略install.js执行。
然后自己手动去找国内的Chromium镜像。
推荐这个地址：http://xiazai.zol.com.cn/detail/43/429586.shtml

主要API

指定Chromium启动的地址

不仅Chromium，Chrome也可以。

const puppeteer = require('puppeteer');
const browser = await puppeteer.launch({
      executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
});

指定启动浏览器的用户文件数据

主要用来保存你的cookie数据，减少重复登录。

```javascript
const puppeteer = require('puppeteer');
const browser = await puppeteer.launch({
      userDataDir:'/Users/XXX/Library/Application Support/Google/Chrome/Profile 17/'
});

指定浏览器的代理地址

const browser = await puppeteer.launch({
  args: [ '--proxy-server=127.0.0.1:9876' ]
}

打开浏览器窗口让所有操作可见

headless默认是true。

browser = await puppeteer.launch({
  headless: false,
  slowMo: 20
});

导航到某个页面

browser = await puppeteer.launch({
  headless: false,
  slowMo: 20
});
page = await browser.newPage();
await page.goto('https://g.cn');

等待CSS选择器有结果

await page.waitForSelector('#loginForm');

等待自定义JavaScript函数返回true

await page.waitFor(() => !document.querySelector('.test'));

字符输入

await page.type('#input', 'zifu');

Click

await page.click('#btn');

在浏览器中执行一段 JavaScript 代码

page.evaluate(() => alert('test'));

获取DOM节点属性

$eval相当于document.querySelector

const html = await page.$eval('body', e => e.outerHTML);

获取DOM节点属性集合

$$eval相当于document.querySelectorAll

const textArray = await page.$$eval('#dom', els => Array.from(els).map(el => el.textContent));

一个例子

const puppeteer = require('puppeteer');
const resizeBrowser = async function (browser, width, height) {
    // Any tab.
    const { targetInfos: [{ targetId }] } = await browser._connection.send(
        'Target.getTargets'
    );

    // Tab window. 
    const { windowId } = await browser._connection.send(
        'Browser.getWindowForTarget',
        { targetId }
    );

    // Resize.
    await browser._connection.send('Browser.setWindowBounds', {
        bounds: { height, width },
        windowId
    });
};

const run = async function() {
    const width = 1200;
    const height = 1200;

    const browser = await puppeteer.launch({
        // executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
        headless: false,
        slowMo: 200,
        userDataDir: '/Users/xxx/Documents/',
        // args: [
        //     `--window-size=${ width },${ height+74 }`
        // ],
    });
    const page = await browser.newPage();
    await page.setViewport({ height, width });
    // await resizeBrowser(browser, width, height);

    try {
        await page.goto('http://xxx.com');
    }
    catch (e) {
        console.log('无法访问地址');
    }

    const dom = await page.$('#domID');
    if (dom) {
        await page.click('#domID');
        const title = await page.title();
        console.log(title);
    }
    else {
        console.log('no dom');
    }
}

run().catch(function (msg) {
    console.log('error: ', msg);
});

process.once('SIGINT', () => {
    process.exit(1);
});

结合jest自动化业务测试

该示例来自刘一奇的个人博客

• 安装jest
  npm install jest --save

• 修改package.json的scripts属性

"scripts": {
  "test": "jest"
},

• 新建测试文件baidu.test.js
  jest默认匹配的测试文件名称和忽略的文件名称规则如下。

默认匹配: **/__tests__/**/*.js?(x),**/?(*.)(spec|test).js?(x)
默认忽略: /node_modules/

baidu.test.js的文件内容如下。

const puppeteer = require('puppeteer');

let browser;
let page;

beforeAll(async () => {
  browser = await puppeteer.launch({
    headless: true,
    slowMo: 200,
  });
  page = await browser.newPage();
});

afterAll(() => {
  browser.close();
});

test('open baidu page', async () => {
  await page.goto('https://baidu.com');
});

test('search liuiqi\'s blog', async () => {
  await page.waitForSelector('#kw');
  await page.type('#kw', '刘一奇的个人博客');
  await page.click('#su');
});

test('goto liuyiqi\'s blog', async () => {
  await page.waitForSelector('h3.t > a');
  await page.click('h3.t:nth-of-type(1) > a');

  const pages = await browser.pages();
  page = pages.pop();
  await page.bringToFront();
});

test('expect logo is 刘一奇的个人博客', async () => {
  await page.waitForSelector('#logo');
  const text = await page.$eval('#logo', el => el.textContent);
  expect(text).toBe('刘一奇的个人博客');
});

test('expect main-nav-link is 主页,归档,关于我', async () => {
  const textArray = await page.$$eval('.main-nav-link', els => Array.from(els).map(el => el.textContent));
  expect(textArray).toEqual(['主页', '归档', '关于我']);
});

• 执行测试
  终端执行npm run test。