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()方法，可以看到左边页面右上角的“sign in”连接被点击。经过这样的调试后，再把selector语句迁移到自动化脚本中，基本就不会报错了。

上面就是如何利用console调试定位页面元素的selector方式，接下来我们看看如何利用devTools调试脚本。

利用DevTools进行调试

为了演示如何利用devTools进行调试，首先准备了一段UI层测试脚本，脚本完成的任务是打开一个应用，点击右上角的“sign in”和“sign up”界面。脚本具体内容如下所示

//以下脚本没有套用jest框架，而是直接编写匿名函数，然后通过调用匿名函数达到运行脚本的目标
const puppeteer = require('puppeteer');
//引入puppeteeer,供后面创建browser对象，这里因为没有使用jest框架，所以无法直接使用jest-puppeteer提供的全局page或者browser对象

const demo = async ()=>{
    const browser = await puppeteer.launch({
        headless: false,
        executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'
    });
    //创建browser对象，且这里为了调试过程中能看到执行效果，将headless设置为false，且设置启动本机反正的chrome

    const page = await browser.newPage();
    //创建page对象

    await page.goto("https://angular.realworld.io/");
    await page.waitForSelector('app-layout-header li a[href="/login"]');
    await page.click('app-layout-header li a[href="/login"]');
    await page.click('app-layout-header li a[href="/register"]');
    //上面是通过page对象实现打开应用，点击操作

    const value = await page.$eval('app-layout-header li a[href="/login"]',el=> {return el.innerText});
    await console.log("this value is "+value);
    //获取‘sign in’链接的值并打印

    await page.close();
    await browser.close();
};
demo();
//调用上面的匿名方法

 要使用devTools进行调试，需执行命令“ node --inspect-brk script.js ”,项目里面已经在package中配置了调试该脚本命令，所以执行“npm run debug-demo”即可开启调试模式。启动调试模式后，在浏览器中输入“chrome://inspect”即可看到如下图所示界面，点击“inspect”开启脚本调试窗口。

默认会停在第一行脚本处，此时，可以在需要调试的代码行前添加断点，点击右上角的“Resume script execution”，脚本会自动运行到打断点的代码行，继续点击执行，会运行到下一个打断点的代码行，且脚本运行过程中，因为浏览器设置的是非无头模式，所以可以看到每个脚本执行过程。

上面演示的是测试脚本中没有套用jest框架的调试过程，实际情况下，我们编写脚本的时候肯定会套用jest框架，因为测试脚本中需要jest框架提供的功能，例如describe，it中添加用例描述信息等；为了使用jest-puppeteer提供的全局page对象，从而达到使用page object设计模式管理UI测试脚本，而要使用jest-puppeteer就必须套用jest框架。那么，套用jest框架编写UI层测试脚本如何利用devTool实现调试呢？和前面的调试过程相比而言，只需在UI层测试脚本中增加debugger语句，运行脚本的命令设置为“node --inspect-brk node_modules/.bin/jest -i script.js”即可。

如下是套用jest框架写的UI层测试脚本，在期望断点调试的代码行前添加“debugger”语句，同样执行“npm run debug-demo-jest”即可开启调试模式。

describe("debug demo", ()=> {
    it('should debug with debugger successfully', async()=> {
        await page.goto("https://angular.realworld.io/");
        await page.click('li a[href="/login"]');
        await page.goBack();
        await page.goForward();
        debugger;
        //在需要调试的代码行前添加debugger；

        await page.click('li a[href="/register"]');
        await page.evaluate(()=> {document.querySelector('li a[href="/login"]').click()})
    })
});

 启动调试窗口后，脚本会在debugger代码行处停止，此时，在调试窗口下在需要的代码行前打断点，然后点击右上角的“Resume script execution”按断点运行，这样就可以定位具体出错的代码行，并进行修改。

 

总结而言,直接用匿名方法编写UI层测试脚本和套用jest框架编写的UI层脚本都可以利用devTools进行调试，调试步骤如下所示

• 1.为了调试方便，浏览器都设置为“headless:false”
• 2.如果套用了jest框架，需要在调试的代码行前面添加debugger
• 3.执行“ node --inspect-brk script.js ”或者“node --inspect-brk node_modules/.bin/jest -i script-with-jest.js”命令，在调试模式下运行脚本
• 4.浏览器中输入“chrome://inspect”，点击下面的“inspect”进入调试窗口
• 5.调试窗口中，在需要调试的代码行前添加断点
• 6.执行脚本，查看每行代码执行结果，确认出错的代码行，进行修改，直到脚本运行符合预期

以上就是利用devTools进行调试的流程，可以看到在调试模式下逐行运行代码，快速发现失败脚本的具体错误代码行，然后进行修改，直到脚本执行结果符合预期。另外，如果是查询页面元素失败，可以利用console快速验证selector语句的正确性。接下来我们再看看如何利用ndb进行调试。

利用ndb进行调试

ndb是GoogleChromeLabs下的一个包，作用就是提升调试体验。那么与上面直接在浏览器中输入“chrome://inspect”进入调试窗口进行调试而言，ndb提供了哪些更好的体验呢？接下来我们就学习ndb调试流程。为了使用ndb，首先执行“npm install ndb”安装此包，安装此包时，还会同步安装“chromium”，所以安装时间稍长，需耐心等待。安装完成后，运行“ndb node script.js”或者“ndb jest -i script.js”命令执行脚本，即开启了ndb调试脚本模式。采用ndb进行调试时，UI层测试脚本无需做任何调整，下图是启动ndb进行调试后开启的调试窗口界面

可以看到，ndb调试窗口中自动加载了项目下所有代码，这样可以选择项目目录下的其他脚本进行调试，同一份脚本，修改了代码后，直接选择脚本，右键重新运行即可。前面介绍的调试方法，修改代码后，都需要重新执行调试命令进入调试模式运行修改后脚本，相比而言，ndb在调试体验上有很大提升，也提高了调试效率。项目代码中已提供了两个测试脚本来体验如何用ndb进行调试。

• 执行“npm run debug-demo-ndb”,利用ndb调试没有使用jest框架的自动化脚本。
• 执行“npm run debug-demo-ndb-jest”,利用ndb调试使用了jest框架的自动化脚本。

除学习前面4种调试方式外，我们再来看看最后一种调试方式：利用puppeteer-extra-plugin-repl插件进行调试。

利用插件调试脚本

使用puppeteer-extra-plugin-repl插件，可以实时查看每个脚本执行结果，为了使用该插件需要先安装puppeteer-extra和puppeteer-extra-plugin-repl，安装完成后编写如下脚本启动REPL。同样，命令行执行工具中执行“npm run debug-demo-repl"即可运行下面的脚本。

const puppeteer = require('puppeteer-extra');
const repl = require('puppeteer-extra-plugin-repl')();
//引入puppeteer-extra和puppeteer-extra-plugin-repl

const puppeteer = require('puppeteer-extra');
const repl = require('puppeteer-extra-plugin-repl')();

async function demo() {
    await puppeteer.use(repl);
   //固定写法，表示puppeteer要使用repl插件

    await puppeteer.launch({
        headless: false,
        executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'
    //launch这里将浏览器设置为非无头模式，且这里设置启动本机安装的chrome，如果这里不设置，还需要下载chromium，这里请设置你自己本机的chrome浏览器

    }).then(async browser => {
        const page = await browser.newPage();
        await page.goto('https://example.com');
      //默认打开上面的网页

        await page.repl();
     //在page对象上开启交互的REPL，这样可以实时看到page上提供的方法执行结果，执行效果见下图所示
     
    //在page对象上开启交互的REPL，这样可以实时看到page上提供的方法执行结果

        await browser.repl();
    //在browser对象上开启交互的REPL，这样可以实时看到page上提供的方法执行结果

        await browser.close();
    })
}
demo();

 执行上述脚本后会开启支持交互的REPL，在窗口中输入需要调试的脚本，可以看到执行效果。如下图所示，打开一个新web应用页面，点击右上角的“sign in”链接，此方式可以很快确认出错脚本，并进行调试，直到脚本正确。所有browser和page对象对外提供的方法，都可以在交互REPL中输入，确认执行结果。

这里截取gif动图无法截取多个window框，实际运行效果是当在命令输入框中输入上面的命令时，可以看到启动的浏览器中打开了新的web应用，并点击了这个web应用右上角的“sign in”链接。如果要退出，输入exit命令即可。

采用插件方式进行调试可以实时看到每一行脚本执行结果，如果执行不符合预期，那么可以在REPL上不断修改直到正确。实际项目中，使用REPL步骤如下：

• 1.运行启动REPL脚本命令
• 2.page后面执行goto()命令跳转到需要测试的web应用上
• 3.如果某条需要调试的脚本不是应用首页，那么可以通过page.goto()跳转到需要调试脚本的页面
• 4.copy写好的定位操作页面元素脚本到REPL中，查看脚本执行结果，调试脚本，直到执行结果符合预期。

至此，此篇博客就结束了，此篇博客给大家介绍了5种调试方式，总结而言，如果是对selector进行调试，那么可以利用console快速验证selector是否正确，如果是非selector调试综合来看ndb是比较好的选择，调试体验更好些。这里建议大家把各种调试方式都尝试以下，然后选择一种比较喜欢的熟练使用即可。