和前面介绍的Cypress和Puppeteer相同,TestCafe框架也内置了自动等待机制。另外,TestCafe还提供live运行模式以及并发运行机制,通过live方式可以实时观察运行过程,方便调试。通过并发运行可以缩短测试执行时间。此次课程将用TestCafe编写一个简单的UI层自动化脚本,并用live模式运行该脚本。为了完成此次课程目标,拆分了4个task。
- 编写一个简单的UI层自动化脚本
- 使用live方式运行测试脚本
- 使用Page Object设计模式编写自动化脚本
- 并发运行多个测试案例
接下来我们就开始第一个task
编写一个简单的UI层自动化脚本
- 1.初始化项目
执行"npm init"命令,执行过程中需要输入package name,名字自定义。执行完此命令后,cd到项目目录下,即以刚才输入的包名目录下,因为已经有了package.json文件,紧接着执行“npm install testcafe --save”命令,该命令的作用是下载testcafe包。因为添加了--save参数,所以会把testcafe包信息自动添加到package.json文件中。
- 2.创建第一个测试脚本
创建名为“login_spec.js”的文件,内容如下所示,可以看到测试脚本中并没有等待处理的语句,因为TestCafe内置了自动等待机制,无需用户手动进行等待处理。
fixture('login web application')
//描述被测场景,一个fixture下可以包含多个test
test('should login successfully', async (t) => {
//test(.....)中写入该case的表述信息,利用testcafe编写测试脚本一律采用async-await方式,所有操作都是t开头,故采用async(t) => {....}带入t对象
await t.navigateTo("https://angular.realworld.io/")
//打开页面
await t.click('app-layout-header li a[href="/login"]')
//点击登陆链接
await t.typeText('app-auth-page form input[formcontrolname="email"]', 'e2etest@163.com')
//输入用户名
await t.typeText('app-auth-page form input[formcontrolname="password"]', '12345678')
//输入密码
await t.click('app-auth-page button[type="submit"]')
//点击登陆的button,完成登陆操作
})
package.json文件中配置运行该脚本的命令,如下图所示,可以看到配置的脚本路径是相对于代码根目录的相对路径
{
"name": "testcafe-e2e",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"version": "testcafe -v",
"browsers": "testcafe -b",
"test:chrome": "testcafe chrome ./e2e/scenario/first/login_spec.js",
//设置测试脚本地地址并指定运行的浏览器
"test:firefox": "testcafe firefox ./e2e/scenario/first/login_spec.js",
"test:safari": "testcafe safari ./e2e/scenario/first/login_spec.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"testcafe": "^0.23.2"
}
}
IDE工具的命令框或者命令行工具中执行“npm run test:chrome”运行测试脚本。运行结果如下图所示,可以看到会开启TestCafe,然后启动chrome浏览器,打开被测应用完成登陆操作。测试执行完成后关闭浏览器和TestCafe。
修改package文件,改为无头模式运行。
"test:chrome": "testcafe chrome:headless ./e2e/scenario/first/login_spec.js",
运行过程如下所示,可以看到整个过程不再显示打开浏览器,开启应用等界面,执行完后直接显示执行结果。无头模式下测试脚本运行效率更高,故建议在脚本调试阶段用headful的方式运行,当脚本调试完成放到持续集成平台运行时用无头模式,缩短用例运行时间。
切换成Firefox或者Safari运行,执行结果如下图所示,可以看到运行成功,说明TestCafe支持多种浏览器。
- 3.查看测试报告
为了生成html格式的测试报告,需要安装“testcafe-reporter-html”,并在package中配置测试报告名称和地址信息。使用“npm install testcafe-reporter-html”安装需要的包,package.json文件中新增测试报告配置内容,如下图所示
"test:chrome": "testcafe chrome:headless ./e2e/scenario/first/login_spec.js --reporter html:report/login_report.html",
// 测试执行完成后,会在代码根目录自动创建名称为reporter的目录,并在该目录生成名称为login_report的测试文件
查看测试报告如下图所示,可以看到TestCafe内置了测试框架,故无需再安装额外的测试框架(例如mocha等)即可运行和生成漂亮的测试报告。
上面演示了使用TestCafe框架时如何编写和多种浏览器下运行自动化脚本,接下看看TestCafe提供的live运行模式。
使用live方式运行测试脚本
前面每运行完一个测试案例,testcafe都会关闭。此时,如果修改了脚本需要重新运行,那么需要重启testcafe,开启testcafe会耗费一些时间。Live模式很好的解决了这个问题,开启live模式后,testcafe能自动监听测试脚本是否改变,如果测试脚本有改变,能自动重新执行测试脚本,这样可以更快验证测试结果。要使用live模式有两种方式。
方式一:首先执行命令“npm install testcafe-live”安装testcafe-live,然后在package.json文件中配置运行脚本命令"test:loginLive": "testcafe-live chrome e2e/scenario/basic/login_spec.js"即可。
方式二:TestCafe已经集成testcafe-live的代码,故不安装testcafe-live包时也能使用live模式运行测试脚本,package.json中配置运行命令时添加-L参数即可。
如下图所示,通过live模式运行测试脚本,案例运行完后testcafe不会关闭,此时可以输入快捷键关闭或者重新运行测试脚本。这里需要注意一点,live模式推荐在调试时使用,如果测试脚本在持续集成平台运行,不要使用live模式。
TestCafe live模式共支持4个快捷键命令。
- ctrl+s - 停止运行
- ctrl+r - 重新运行
- ctrl+w - 关闭或者开启监听(监听测试脚本是否被修改)
- ctrl+c - 关闭浏览器和终止testcafe进程
上面介绍了testcafe的live运行模式,接下来,我们再看看使用testcafe时如何使用page object设计模式。
使用Page Object设计模式编写自动化脚本
Testcafe框架把所有的操作都封装在对象t上面,故如果使用page object设计模式编写自动化脚本,只需在page对象上传入t对象即可。以上面的登陆脚本为例,创建loginPage.js文件,并把登陆步骤的脚本写入文件中。
async function login(t) {
//参数传入t对象
await t.navigateTo("https://angular.realworld.io/");
await t.click('app-layout-header li a[href="/login"]');
await t.typeText('app-auth-page form input[formcontrolname="email"]', 'e2etest@163.com');
await t.typeText('app-auth-page form input[formcontrolname="password"]', '12345678');
await t.click('app-auth-page button[type="submit"]');
}
module.exports={
login:login
};
case层引入loginPage.js,调用封装好的login方法即可。
test("should login with page object successfully",async(t) => {
await loginPage.login(t);
//case层的脚本调用loginPage中的login方法即可。
});
上面介绍了如何使用page object设计模式,最后,我们再看看如何并发运行测试案例。cypress和puppeteer都不支持同时开启多个浏览器并发执行测试脚本,但testcafe支持,且使用很简单。
并发运行多个测试案例
TestCafe框架的配置信息都可以在“.testcaferc.json”文件中设置,此配置文件放在代码根目录下。如果要并发执行多个测试案例,只需添加“concurrency”配置,并设置并发数据量即可。例如在.testcaferc.json文件中设置并发数是3,当运行测试案例时会开启三个浏览器。
"concurrency": 3,
package.json文件中配置testSuite,此testSuite包含两个xxx_spec.js测试脚本文件,两个文件中总共三个测试案例。执行“npm test"即可开启三个浏览器运行测试脚本。
"test": "testcafe chrome e2e/scenario/basic/*_spec.js"
执行结果如下图所示,可以看到开启了三个chrome,每个浏览器在执行不同的测试案例。
至此,此篇博客就结束了,此篇博客介绍了使用TestCafe框架编写简单的UI层自动化脚本以及Live或者非Live运行模式,通过此章节的学习对TestCafe有了初步印象,下次课程将介绍使用TestCafe框架时如何定位、操作页面元素以及校验执行结果。