Puppeteer之更高效的进行调试

前面博客介绍了编写UI层自动化测试脚本时puppeteer提供的常用接口，编写脚本过程中不可避免需要进行调试，调试效率直接影响脚本编写成本，下面将介绍5种常用的调试方式。

• 修改配置信息协助调试脚本
• 利用console调试selector
• 利用DevTools进行调试
• 利用ndb进行调试
• 利用插件协助调试脚本

接下来就从第一个task开始吧。

修改运行方式协助调试脚本

UI层的自动化测试大部分都是查找页面元素并进行操作，然后对结果进行校验，如果脚本运行出错，我们首先可以通过调慢运行速度或者将浏览器设置为非无头模式运行，查看具体是哪个步骤失败了。以下是jest-puppeteer.config.js中的内容，将headless设置为false，可查看浏览器上自动化案例运行过程，增大slowMo的值，可以降低每个步骤运行速度，方便判断具体是哪个步骤失败了。slowMo的单位是毫秒。

module.exports ={
    launch : {
        headless: false,
        slowMo: 150,
        args:['--window-size=1920,1080'],
        executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'
    },
    browserContext : "default",
    exitOnPageError: false
};

除此之外，还可以在脚本中增加page.waitFor(1000),这样运行到某个步骤后会停留一段时间，协助确定失败的具体步骤。另外，还可以利用console.log()打印脚本执行过程中某些对象，确认是否获取到了页面元素或者元素的值，逐步排查。接下来，我们看看如何利用浏览器的console调试定位元素的selector是否正确

利用console调试selector

UI层测试脚本中大部分都是定位页面元素，因为定位页面元素不正确而造成的失败占大部分，这里将给大家介绍如何利用console调试定位页面元素的selector。如下图所示，可以逐步定位期望查找的页面元素

如上图所示，期望的操作是点击右上角的“sign in”，调试的步骤如下所示：

• 第一个脚本用‘ $$ ’定位页面元素，结果是获取到了多个页面元素，说明selector还不够精准，所以继续修改selector。
• 第二个脚本未获取到任何页面元素，检查selector，发现书写错误，修改脚本。
• 第三个脚本获取到了一个页面元素，查看定位到的页面元素innerText包含“sign in”说明是期望的元素。
• 第四五个脚本调用click方法都失败了，说明可能‘ $$ ’后不支持click方法。
• 第七个脚本修改为‘$’定位元素后调用click()方法，可以看到左边