前端测试主要包括界面功能测试、页面的浏览器兼容性和页面性能稳定性测试等内容。同时，前端自动化测试作为持续集成的主要环节，在提升产品质量、保证系统的页面兼容性、稳定性、功能的完整性具有非常重要的作用。我们选择业界巨头Chrome（据2018年5月的数据，Chrome占全球浏览器市场份额的60%）作为访问“工银e企赢”系统的浏览器，选择Google Chrome 的Headless（无界面） Chrome 工具——Puppeteer作为辅助测试工具，探索前端自动化测试。
Puppeteer是一个提供高级的API来控制Chrome的Node库。相对于Selenium，Puppeteer最大的特点就是可以操作Dom并在内存中进行模拟，即在V8引擎中处理而不打开浏览器，而且该工具由Chrome团队维护，拥有更好的兼容性和应用前景。
一般情况下，有界面浏览器自动化测试时的步骤为：启动浏览器，打开一个网页，模拟用户进行交互操作，脚本运行时需要显式占用屏幕。而无界面浏览器自动化测试是使用脚本完成上述过程，不仅能在不占用屏幕的情况下模拟真实的浏览器使用场景，同时Puppeteer具备以下功能：
1.屏幕快照，打印PDF；
2.高级爬虫，使用Puppeteer可以取到渲染后的效果，而普通爬虫相当于只能拿到http response；
3.UI自动化测试，模拟用户在浏览器中的所有操作；
4.页面性能分析，捕获站点的时间线，以便追踪网站，帮助分析网站性能问题。
```
import puppeteer from 'puppeteer';
describe('Login', () => {let browser;let page;
beforeAll(async () => {
browser = await puppeteer.launch({headless:false});
});
beforeEach(async () => {
page = await browser.newPage();await page.goto('https://ecsp.icbc.com.cn/#/user/login');//await page.evaluate(() => window.localStorage.setItem('antd-pro-authority', 'guest'));});
afterEach(()=> page.close());
it('should login with failure', async () => {await page.type('#account', '185***08');await page.type('#password', 'wrong_password');await page.click('button[type="submit"]');await page.screenshot({path:'ecsp_fail.png'});await page.waitForSelector('.ant-alert-error'); // should display error});
it('should login successfully', async () => {await page.type('#account', '185***08');await page.type('#password', '****');await page.click('button[type="submit"]');await page.screenshot({path:'ecsp_success.png'});await page.waitForSelector('.ant-layout-sider h1'); // should display successconst text = await page.evaluate(()=> document.body.innerHTML);
expect(text).toContain('<title>首页 - 工银e企赢</title>');
});
afterAll(()=> browser.close());
});
```
网友评论