React --- puppeteer 使用指南

参考：https://www.jianshu.com/p/eee456d7543f

注意：国内安装，需要 npm config set puppeteer_download_host=https://npm.taobao.org/mirrors
然后执行 npm install puppeteer -D

1）指定Chromium启动的地址

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

2）指定启动浏览器的用户文件数据 --- 主要用来保存你的cookie数据，减少重复登录。

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

3）指定浏览器的代理地址

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

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

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

5）导航到某个页面

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

6）等待CSS选择器有结果

await page.waitForSelector('#loginForm');

7）等待自定义JavaScript函数返回true

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

8）字符输入

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

9）Click

await page.click('#btn');

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

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

11）获取DOM节点属性 --- $eval 相当于 document.querySelector

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

12）获取DOM节点属性集合 --- $$eval相当于document.querySelectorAll

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