// 等待密码输入框渲染 await page.waitFor('#password'); // 输入用户名 await page.type('input#username', "username"); // 输入密码 await page.type('input#password', "testpass"); // 点击登录按钮 await Promise.all([ page.waitForNavigation(), // 等跳转完成后resolve page.click('button.login-button'), // 点击该链接将间接导致导航(跳转) ]); await page.waitFor(2000) // 获取cookies const cookies = await page.cookies()
针对列表内容里的链接进行批量访问
主要利用到page实例的选择器功能
const table = await page.$('.table') const links = await table.$$eval('a.link-detail', links => links.map(link => link.href) ); // 循环访问links ...
进行错误和访问监听
puppeteer可以监听在页面访问过程中的报错，请求等等，这样我们就可以捕获到页面的访问错误并进行上报啦，这也是我们进行测试需要的基本功能~
// 当发生页面js代码没有捕获的异常时触发。 page.on('pagerror', () => {}) // 当页面崩溃时触发。 page.on('error', () => {}) // 当页面发送一个请求时触发 page.on('request') // 当页面的某个请求接收到对应的 response 时触发。 page.on('response')
通过以上的几个小案例，我们发现Puppeteer的功能非常强大，完全能够满足我们以上的对页面进行自动访问的需求。接下来，我们针对我们的测试单元进行个单元用例的书写
最终功能
通过我们上面对测试单元的规划，我们可以规划一下我们的测试路径
访问网站 -> 登陆 -> 访问页面1 -> 进行基本单元测试 -> 获取详情页跳转链接 -> 依次访问详情页 -> 进行基本单元测试
-> 访问页面2 ...
所以，我们可以拆分出几个大类，和几个测试单元，来进行各项测试
// 包含基本的测试方法，log输出等 class Base {} // 详情页单元，进行一些基本的单元测试 class PageDetal extends Base {} // 页面单元，进行基本的单元测试，并获取并依次访问详情页 class Page extends PageDetal {} // 进行登录等操作，并依次访问页面单元进行测试 class Root extends Base {}
同时，我们如何在功能页面变化时，跟踪到测试的变化呢，我们可以针对我们测试的功能，为其添加自定义标签test-role，测试时，根据自定义标签进行测试逻辑的编写。
例如针对时间切换单元，我们做一下简单的介绍：
// 1. 获取测试单元的元素 const timeSwitch = await page.$('[test-role="time-switch"]'); // 若页面没有timeSwitch, 则不用进行测试 if (!timeSwitch) return // 2. time switch的切换按钮 const buttons = timeSwitch.$$('.time-switch-button') // 3. 对按钮进行循环点击 for (let i = 0; i < buttons.length; i++) { const button = buttons[i] // 点击按钮 await button.click() // 重点！ 等待对应的内容出现时，才认定页面访问成功 try { await page.waitFor('[test-role="time-switch-content"]') } catch (error) { reportError (error) } // 截图 await page.screenshot() }
上面只是进行了一个简单的访问内容测试，我们可以根据我们的用例单元书写各自的测试逻辑，在我们日常开发时，只需要对需要测试的内容，加上对应的test-role即可。
总结
根据以上的功能划分，我们很好的将一整个应用拆分成各个测试单元进行单元测试。需要注意的是，我们目前仅仅是对页面的可访问性进行测试，仅仅验证当用户进行各种操作，访问各个页面单元时页面是否会出错。并没有对页面的具体展示效果进行测试，这样会和页面的功能内容耦合起来，就需要单独的测试用例的编写了。