总结一下端对端测试中常用的 Puppeteer 操作，比如模拟用户输入、执行 JavaScript 脚本、获取某个 DOM 节点中的文本等。
让所有操作可见
还记得上篇博客中的端对端测试的动图演示吗？
想实现这个效果，就需要将 Puppeteer 的 headless 选项设为 false ，并将 slowMo 设为 20-100 中的某个值，前者使得所有浏览器自动化操作可见，后者控制了动作之间的间隔，使其变慢，从而通过人眼可以看清每步操作。示例代码：
browser = await puppeteer.launch({
headless: false,
slowMo: 20
});
导航到某个页面
这个操作太常用了！第一步是启动浏览器，那么第二步就是导航到某个页面，代码示例：
page = await browser.newPage();
await page.goto('https://baidu.com');
上述代码会开启一个新页面，并将其导航到 https://baidu.com 。
等待某个 DOM 节点出现
在进行某些页面操作前，我们必须要等待指定的 DOM 加载完成后才能操作，比如，一个 Input 没有加载出来时，你是无法在里面输入字符的等等。在 Puppeteer 中，你可以使用 page.waitForSelector 和选择器来等待某个 DOM 节点出现：
await page.waitForSelector('#loginForm');
上述代码会等待 ID 为 loginForm 的节点出现。
等待几毫秒
有时候，你找不到某个特定的时刻，只能通过时间间隔来确定，那么此时你可以使用 page.waitFor(number) 来实现：
await page.waitFor(500);
上述代码会等待 500 毫秒。
等待某个 JavaScript 函数返回 true
有时候，你需要等待某个复杂的时刻，这个时刻只能通过一些复杂的 JavaScript 函数来判断，那么此时你可以使用 page.waitFor(Function) 来实现：
await page.waitFor(()=> !document.querySelector('.ant-spin.ant-spin-spinning'));
上述代码会等待 Antd 中的旋转图标消失。
向某个 Input 中输入字符
为了模拟用户登陆或仅仅就是输入某个表单，我们经常会向某个 Input 中输入字符，那么我们可以使用这个方法：
await page.type('#username', 'lewis');
上述代码向 ID 为 username 的 Input 中输入了 lewis 。值得一提的是，该方法还会触发 Input 的 keydown 、 keypress , 和 keyup 事件，所以如果你有该事件的相关功能，也会被测试到哦，是不是很强大？
点击某个节点
在 Puppeteer 中模拟点击某个节点，非常简单，只需要：
await page.click('#btn-submit');
上述代码点击了 ID 为 btn-submit 的节点。
在浏览器中执行一段 JavaScript 代码
有时候我们需要在浏览器中执行一段 JavaScript 代码，此时你可以这样写：
page.evaluate(()=> alert('1'));
上述代码会在浏览器执行 alert('1') 。
获取某一个节点的某个属性
有时候我们需要获取某个 Input 的 value ，某个链接的 href ，某个节点的文本 textContent ，或者 outerHTML ，那么你可以使用这个方法：
const searchValue = await page.$eval('#search', el => el.value);
const preloadHref = await page.$eval('link[rel=preload]', el => el.href);
const text = await page.$eval('.text', el => el.textContent);
const html = await page.$eval('.main-container', e => e.outerHTML);
获取某一类节点的某个属性集合
有时候我们需要获取某一类节点的某个属性集合，那么你可以这么写：
const textArray = await page.$$eval('.text', els => Array.from(els).map(el=> el.textContent));
上述代码将页面中所有类为 text 的节点中的文本拼装为数组放到了 textArray 中。