详解Puppeteer前端自动化测试实践

2020-06-17 05:51:33易采站长站整理

我们可以使用Puppeteer完成以下工作:

访问页面,进行截图
自动进行键盘输入,提交表单
模拟点击等用户操作
等等等等。。

我们来通过一些小案例,来介绍他们的基本功能:

访问一个带有ba认证的网站

puppeteer可以创建page实例,并使用goto方法进行页面访问,page包含一系列方法,可以对页面进行各种操作。


(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// ba认证
await page.authenticate({
username,
password
});
// 访问页面
await page.goto('https://example.com');
// 进行截图
await page.screenshot({path: 'example.png'});

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

访问登陆页面,并进行登录

首先,对于SPA(单页面应用),我们都知道,当页面进入后,客户端代码才开始进行渲染工作。我们需要等到页面内容渲染完成后,再进行对应的操作。我们有以下几种方法来使用

waitUntil

puppeteer针对页面的访问,切换等,提供了waitUntil参数,来确定满足什么条件才认为页面跳转完成。包括以下事件:

load – 页面的load事件触发时
domcontentloaded – 页面的DOMContentLoaded事件触发时
networkidle0 – 不再有网络连接时触发(至少500毫秒后)
networkidle2 – 只有2个网络连接时触发(至少500毫秒后)

通过waitUnitl,我们可以当页面请求都完成之后,确定页面已经访问完成。

waitFor

waitFor方法可以在指定动作完成后才进行resolve


// wait for selector
await page.waitFor('.foo');
// wait for 1 second
await page.waitFor(1000);
// wait for predicate
await page.waitFor(() => !!document.querySelector('.foo'));

我们可以利用waitForSelector方法,当登录框渲染成功后,才进行登录操作


// 等待密码输入框渲染
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 =>