puppeteer自动化测试系列之三---端对端测试中经常使用的 Puppeteer 操做

总结一下端对端测试中经常使用的 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 中。