测试简介，以及puppeteer的常用class

单元测试

站在程序员角度的测试

单元测试是把代码看成是一个个的组件。从而实现每一个组件的单独测试，测试内容主要是组件内每一个函数的返回结果是不是和期望值一样。

const compare = (a,b) => a>b?a:b
// 对这个函数进行测试
expect(compare(1,2)).to.equal(2) //ok
expect(compare(2,1)).to.equal(1) //ok
// 测试完成 代码覆盖率100%

代码覆盖率：代码中每一个函数每一种情况的测试情况

e2e测试

站在用户角度的测试

e2e测试是把我们的程序看作一个黑盒子，不去管内部是怎么实现的，只负责打开浏览器，把测试内容在页面上输入一遍，看是不是想要得到的结果。

用户登陆测试用例详解：

import puppeteer from 'puppeteer';
<!--Puppeteer 模块提供了一种启动 Chromium 实例的方法-->
describe('Login', () => {
  it('should login with failure', async () => {
    const browser = await puppeteer.launch();
    <!--当 Puppeteer 连接到一个 Chromium 实例的时候会通过 puppeteer.launch 或 puppeteer.connect 创建一个 Browser 对象。-->
    const page = await browser.newPage();
    <!--返回一个新的 Page 对象-->
    <!--Page 提供操作一个 tab 页或者 extension background page 的方法。-->
    
    await page.type('#userName', 'mockuser');
    <!--page.type(selector, text[, options])-->
    <!--selector <string> 要输入内容的元素选择器。如果有多个匹配的元素，输入到第一个匹配的元素。-->
    <!--text <string> 要输入的内容-->
    <!--options <Object>-->
    <!--delay <number> 每个字符输入的延迟，单位是毫秒。默认是 0。-->
    <!--返回: <Promise>-->
    <!--每个字符输入后都会触发 keydown, keypress/input 和 keyup 事件-->
    await page.type('#password', 'wrong_password');
    await page.click('button[type="submit"]');
    <!--此方法找到一个匹配 selector 选择器的元素，如果需要会把此元素滚动到可视，然后通过 page.mouse 点击它-->
    await page.waitForSelector('.ant-alert-error'); 
    <!--等待指定的选择器匹配的元素出现在页面中，如果调用此方法时已经有匹配的元素，那么此方法立即返回。 如果指定的选择器在超时时间后扔不出现，此方法会报错。-->
    await page.close();
    browser.close();
  });
});

puppeteer

Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。

Puppeteer API 是分层次的，反映了浏览器结构。

层次：Puppeteer -> Brower -> BrowerContext -> page -> frame或worker

常用class

class: Puppeteer

启动Chromium，进行自动化：

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

class: BrowserFetcher

BrowserFetcher 可以用来下载和管理不同版本的 Chromium。

<!--使用 BrowserFetcher 下载一个指定版本的 Chromium-->
<!--533271，修订版本字符-->
const browserFetcher = puppeteer.createBrowserFetcher();
const revisionInfo = await browserFetcher.download('533271');
const browser = await puppeteer.launch({executablePath: revisionInfo.executablePath})

class: Browser

一个断开连接和重连到 Browser的例子

puppeteer.launch().then(async browser => {
  // 存储节点以便能重新连接到 Chromium
  const browserWSEndpoint = browser.wsEndpoint();
  // 从 Chromium 断开和 puppeteer 的连接
  browser.disconnect();

  // 使用节点来重新建立连接
  const browser2 = await puppeteer.connect({browserWSEndpoint});
  // 关闭 Chromium
  await browser2.close();
});

class: Page

Page 提供操作一个 tab 页或者 extension background page 的方法。一个 Browser 实例可以有多个 Page 实例。

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();

page的事件捕获（on，once）

page.once('load', () => console.log('Page loaded!'));

取消事件监听

function logRequest(interceptedRequest) {
  console.log('A request was made:', interceptedRequest.url());
}
page.on('request', logRequest);
// 取消监听
page.removeListener('request', logRequest);