阅读 1825

Puppeteer E2E测试入门

本文内容涉及ES6 asyncjest的相关知识,对于以上内容不太了解的读者可以先了解相关内容。

Puppeteer是什么

它由Chrome官方团队提供,通过Devtools协议在Node层提供了一系列API来控制chrome或者chromium,也就是说我们能够编写Node环境的代码即可对浏览器的行为进行控制。通过它我们可以做到以下行为:

  • 生成页面快照:图片、pdf

  • 抓取spa应用生成预渲染页面

  • 自动化表单提交、UI测试、键盘输入

  • 抓取应用的性能数据(chrome performance timeline)

  • 测试chrome扩展

当然以上行为都是puppeteer能力中极小的一部分,更多的读者可以阅读Puppeteer的文档来了解,本文将介绍Puppeteer在E2E测试的实践

E2E测试

简单来说,就是模拟真实用户使用场景进行测试,预期应用能够正常响应用户的操作,其关键点在于模拟用户使用环境,模拟用户操作。

那对于Web应用来说,用户环境就是浏览器,用户操作主要是移动、点击,这些就是我们需要模拟的部分,下面就直接进入环境和实践部分。

环境部分

本文的例子采用puppeteer jest jest-puppeteer 在mac环境实现

首先需要安装以上依赖,这里需要注意以下问题:

  • puppeteer会默认下载chromium,这里可以通过export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true跳过chromium下载

  • Node版本最好使用大于8的版本

接下来说明一下相关的配置

首先是jest相关的配置,在根目录创建jest.config.js

//jest.config.js
const config = require('config');
const _ = require('lodash');

module.exports = {
    preset: 'jest-puppeteer', //调用preset
    globals: _.assign({}, config.get('e2e.variable'), { //这里可以注入全局变量
        ENV_URL: config.get('baseUrl')
    }),
    testMatch: ['**/__e2e__/**/*.test.js?(x)'] //指定需要进行测试的文件
};
复制代码

接下来就是配置puppeteer,在根目录创建jest-puppeteer.config.js

//jest-puppeteer.config.js
module.exports = {
    launch: {
      	headless: true, //设定运行模式,false的情况下将会工作在有GUI界面的模式,true则不开启GUI界面
        executablePath: //设定本地Chrome路径,官方推荐使用Chrome Canary
            '/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary'
    }
};
复制代码

实践部分

环境已经配置好了,是时候进入实践环节了。对于绝大部分系统尤其是管理系统来说,第一步要做的肯定是登录系统,因此,我们的第一个实践就是用puppeteer脚本模拟登录,这里的例子基于作者这边的一个系统的登录流程。

const loginFunc = page => async () => {
    await page.setViewport({ width: 1280, height: 720 });                           //设置窗口大小
    await page.goto(`${ENV_URL}/login`);                                            //前往登录地址
    const loginIframe = page.frames().find(f => f.name() === 'login-iframe');       //找到登录iframe
    await loginIframe.waitForSelector(
        '#login-tab-container > div.tab-item.tab-right'
    ); 
    await loginIframe.click('#login-tab-container > div.tab-item.tab-right');       //切换登录TAB
    await page.waitFor(1000);                                                       //特殊用途,之后说明
    const username = await loginIframe.waitForSelector('#username');                //找到输入框
    await username.type(USERNAME);                                                  //输入用户名
    const pass = await loginIframe.waitForSelector('#password'); 
    await pass.type(PASSWORD);                                                      //输入密码
    await loginIframe.click('#login-btn');                                          //点击登录按钮
    await page.waitForNavigation();                                                 //等待跳转导航完成
};

module.exports = {
    loginFunc: loginFunc
};
复制代码

在这个例子中,展示了打开登录页面,输入用户名、密码并进行登录的流程,主要涉及到了setViewport goto frames waitForSelector click waitFor type waitForNavigation这些API,下面说说其中几个比较重要的API,更多的可以参考官方文档;

setViewport
设置窗口大小,返回一个promise

waitForSelector 
参数为CSS Selector,返回一个promise,直到指定的元素出现才会resolve,超时后会reject

click 
点击某个元素,返回一个promise

type 
向某个元素输入内容,返回一个promise

waitForNavigation 
URL改变时触发,返回promise,导航结束时resolve,通过history api进行URL更改时也可以通过该方法等待导航结束

frames
可以获取页面中所有的iframe
复制代码

相信读者看完这段例子后也能感受到puppeteer的API设计是十分语意化的,非常好懂。但是实际上这个例子是存在几个踩坑点的,这里说一下笔者从这个例子中收获的经验:

  • waitForSelector只有当目标Selector原本不存在DOM中才会生效,如果目标元素是通过display: none; visibility: hidden这类方式进行切换的话,这个方法是直接resolve的。

  • 如果这个切换过程中还存在动画效果,那在这个动画效果的过程中,无论是click还是type动画过程中的元素,操作都是不会生效的,必须等到动画结束,因此在本例子中还增加了waitFor(1000)这句代码来等待动画的结束

至此我们已经完成了登录,接下来就可以和jest结合进行自动化测试了,先放出本部分的例子:

const utils = require('./utils');

jest.setTimeout(10000);

describe('e2e test', () => {
    beforeAll(utils.loginFunc(page));
    it('e2e test-1', async () => {
        const el = await page.waitForSelector(
            '#root > .services_C2FC97 > .ant-row > .ant-col-8:nth-child(1) > .service-card_C2FC97'
        );
        expect(await el.$eval('p', node => node.innerText)).toBe('test');       //获取指定元素的innerText
    });
});
复制代码

在这个例子里,我们先引入了上面编写的loginFunc来作为每一个测试的前置条件,由于使用了jest-puppeteer,运行环境中会自动注入puppeteer的page和browser对象,因此可以直接调用;这个例子中测试的是首页的一张功能卡片的标题是否为test;这个例子是很基础的,不过相信通过上面那个登录的例子,读者已经了解到编写E2E测试脚本的套路了。

不过这里还有一点需要说明,由于puppeteer启动时间和打开网页的耗时比较难以估计,需要通过jest.setTimeout(ms)来延长一个测试执行的时间,否则有可能因为执行超时导致失败,下面是这个例子最终的执行结果:

yarn e2e
yarn run v1.9.4
$ cross-env NODE_ENV=test jest -c jest.config.js
Determining test suites to run...
DevTools listening on ws://127.0.0.1:54751/devtools/browser/7d8d289a-5335-4ffc-a65c-f7e98cb34de0
[1129/154120.584773:WARNING:spdy_session.cc(3152)] Received HEADERS for invalid stream 25
 PASS  __e2e__/demo.test.js (6.931s)
  e2e test
    ✓ e2e test-1 (1540ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        7.046s
Ran all test suites.
✨  Done in 10.72s.
复制代码

至此,入门教程就结束了,是否感觉到很像按键精灵?但实际上通过puppeteer我们可以实现更强大的一些控制,包括监听网络请求,监听页面创建等等,基本上我们能在浏览器手动做到的,通过它提供的Node API也能够做到,这部分内容欢迎读者去阅读文档进一步的进行探索;

那E2E测试究竟能为我们带来什么呢?在笔者看来,对于一个长期迭代的项目,随着项目规模的扩大,功能的回归测试耗费的时间会不可避免的增加,在这种情况下,如果有自动化测试能够帮我们进行部分测试,将大大提高我们的效率;同时通过定时测试任务可以更早的发现产品功能上存在的问题,从而保证产品能够按时交付,这是它带来的最大的价值。

最后,推荐给大家一个小工具puppeteer-recorder,这是一个Chrome插件,可以方便的录制测试脚本,从而摆脱手动编写脚本的苦恼😄(由于同源策略,该工具不支持iframe内的操作录制)

@author: Monado

关注下面的标签,发现更多相似文章
评论