React --- puppeteer 基本用法介绍

参考网址：https://zhaoqize.github.io/puppeteer-api-zh_CN/#?product=Puppeteer&version=v1.17.0&show=outline

如下是帮助文档（对应 jest-puppeteer）：
https://github.com/smooth-code/jest-puppeteer/blob/master/packages/expect-puppeteer/README.md#api

如下是帮助文档（对应 puppeteer）：
https://zhaoqize.github.io/puppeteer-api-zh_CN/#?product=Puppeteer&version=v1.17.0&show=outline

1）class: Puppeteer --- 它提供了一种启动 Chromium 实例的方法。

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
    const page = await browser.newPage();
    await page.goto('https://www.google.com');
    // 其他操作...
    await browser.close();
});

2）class: BrowserFetcher --- 可以用来下载和管理不同版本的 Chromium，BrowserFetcher 操作一个修订版本字符串。
看下面这个例子，他将告诉你如何使用 BrowserFetcher 下载一个指定版本的 Chromium：

const browserFetcher = puppeteer.createBrowserFetcher();
const revisionInfo = await browserFetcher.download('533271');
const browser = await puppeteer.launch({executablePath: revisionInfo.executablePath})

3）class: Browser（extends: EventEmitter）--- 当 puppeteer 连接到一个 Chromium 实例的时候，会通过 puppeteer.launch 或 puppeteer.connect 创建一个 Browser 对象。

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
    const page = await browser.newPage();
    await page.goto('https://example.com');
    await browser.close();
});

4）class: Page（extends: EventEmitter）--- Page 提供操作一个 tab 页或者 extension background page 的方法。一个 Browser 实例可以有多个 Page 实例。
下面的例子创建一个 Page 实例，导航到一个 url ，然后保存截图：

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
    const page = await browser.newPage();
    await page.goto('https://example.com');
    await page.screenshot({path: 'screenshot.png'});
    await browser.close();
});

5）class: Worker --- 表示一个 WebWorker ，在页面对象上 workercreated 和 workerdestroyed 事件被触发，以标识 worker 的生命周期。

page.on('workercreated', worker => console.log('Worker created: ' + worker.url()));
page.on('workerdestroyed', worker => console.log('Worker destroyed: ' + worker.url()));

console.log('Current workers:');
for (const worker of page.workers())
    console.log(' ' + worker.url());

6）class: Keyboard --- 提供一个接口来管理虚拟键盘，高级接口为 keyboard.type，其接收原始字符，然后在你的页面上生成对应的 keydown、keypress/input、keyup 事件。为了更精细的控制(虚拟键盘), 你可以使用 keyboard.down, keyboard.up 和 keyboard.sendCharacter 来手动触发事件, 就好像这些事件是由真实的键盘生成的。

持续按下 Shift 来选择一些字符串并且删除的例子:

await page.keyboard.type('Hello World!');
await page.keyboard.press('ArrowLeft');

await page.keyboard.down('Shift');
for (let i = 0; i < ' World'.length; i++) 
    await page.keyboard.press('ArrowLeft');
await page.keyboard.up('Shift');

await page.keyboard.press('Backspace');
// 结果字符串最终为 'Hello!'

按下 A 的例子:

await page.keyboard.down('Shift');
await page.keyboard.press('KeyA');
await page.keyboard.up('Shift');

7）class: Mouse --- Mouse 类在相对于视口左上角的主框架 CSS 像素中运行。
每个 page 对象都有它自己的 Mouse 对象，使用见 page.mouse。

// 使用 page.mouse 追踪 100x100 的矩形。
await page.mouse.move(0, 0);
await page.mouse.down();
await page.mouse.move(0, 100);
await page.mouse.move(100, 100);
await page.mouse.move(100, 0);
await page.mouse.move(0, 0);
await page.mouse.up();

8）class: Frame --- 在每一个时间点，页面通过 page.mainFrame() 和 frame.childFrames() 方法暴露当前框架的细节。Frame 对象的生命周期由 3 个事件控制，它们通过 page 对象监听，'frameattached' 'framenavigated' 'framedetached' 。

一个从 iframe 元素中获取文本的例子：

const frame = page.frames().find(frame => frame.name() === 'myframe');
const text = await frame.$eval('.selector', element => element.textContent);
console.log(text);

9）class: ExecutionContext --- 该类表示一个 JavaScript 执行的上下文。 Page 可能有许多执行上下文：

每个 frame 都有 "默认" 的执行上下文，它始终在将帧附加到 DOM 后创建。该上下文由 frame.executionContext() 方法返回。
Extensions 的内容脚本创建了其他执行上下文。
除了页面，执行上下文可以在 workers 中找到。

10）class: JSHandle --- 表示页面内的 JavaScript 对象，JSHandles 可以使用 page.evaluateHandle 方法创建。
const windowHandle = await page.evaluateHandle(() => window);

JSHandle 可防止引用的 JavaScript 对象被垃圾收集，除非是句柄 disposed。 当原始框架被导航或父上下文被破坏时，JSHandles 会自动处理。

11）class: ElementHandle --- 表示一个页内的 DOM 元素（ElementHandle 类继承自 JSHandle），ElementHandles 可以通过 page.$ 方法创建。

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
    const page = await browser.newPage();
    await page.goto('https://google.com');
    const inputElement = await page.$('input[type=submit]');
    await inputElement.click();
    // ...
});

除非处理了句柄 disposed，否则 ElementHandle 会阻止垃圾收集中的 DOM 元素。 ElementHandles 在其原始帧被导航时将会自动处理。

ElementHandle 实例可以在 page.$eval() 和 page.evaluate() 方法中作为参数。

12）class: Request --- 每当页面发送一个请求，例如网络请求，以下事件会被 puppeteer 页面触发：

'request' 当请求发起后页面会触发这个事件。
'response' 请求收到响应的时候触发。
'requestfinished' 请求完成并且响应体下载完成时触发。

如果某些时候请求失败，后续不会触发 'requestfinished' 事件(可能也不会触发 'response' 事件)，而是触发 'requestfailed' 事件。
如果请求得到一个重定向的响应，请求会成功地触发 'requestfinished' 事件，并且对重定向的 url 发起一个新的请求。

13）class: Response --- 表示页面接收的响应。