这里写自定义目录标题
前言
相比于依赖于不同浏览器插件的特定webDriver,通过wire protocol与浏览器建立通信而实现的selenium自动化测试,injected script技术的核心思想把测试用例的代码注入页面中,把用户的行为传递给测试页面。如此,大大提高了测试效率,而且,基于此原理,能运行js的浏览器都能实现injected script,相比于selenium也扩大了兼容性。
简介
目前injected script技术应用较广泛的是cypress和testcafe,这两个测试框架都是通过另外启动一个浏览器访问自建的server(本地随机端口号),再由该server访问测试页面,并把测试脚本注入该server中,模拟用户行为实现测试,但是cypress目前只支持chrome,本文以TestCafe为例,分析其自动化测试的实现原理。且tesfcafe和cypress都可以直接通过npm下载,相当于是基于node的一个自动化测试工具了。
TestCafe执行流程
1、npm命令启动testcafe后,调用testcafe-browser-tools这个包,找到本地浏览器exe文件并运行,定向到testcafe自建的server port。
2、之后,根据fixture命令,调用对应方法:page(website),website是指测试网页的地址,testcafe会把website对应的资源文件重新解析,资源地址将带有testcafe server地址,而且,在解析过程中,testcafe会把测试用例testfile注入到website的资源文件生成了带有testcafe-hammerhead标记的文件。
3、解析测试用例testfile:
测试组fixture,把同一类测试用例组合起来,同一个测试文件中可以包含多个测试组,同一个测试组fixture中可以包含多个测试用例;
fixture可以指定起始页面(page方法),也可以使用钩子,指定fixture测试组开始前、结束后要执行的动作(before、after等),指定要测试的元数据(meta方法),同样的,test测试用例也可以指定起始页面、钩子方法、元数据。
在每一个测试组中,都有一个“测试上下文对象”:t.ctx,共享测试代码和钩子之间的变量
fixture `Fixture ecample`
.page `http://localhost:8080/hippy-react-demo.html `
.beforeEach( async t => {
t.ctx.numProp = 123;
})
.afterEach( async t => {
/* test finalization code */
});
test
. ('Test1', async t => {
console.log(t.ctx.numProp); // 123
})
.after(async t => {
console.log(t.ctx.numProp); // 123
});
4、选择元素和操作::
Test测试用例中通过selector方法实现选择页面上的DOM元素,SelectorAPI支持选择元素、获取元素状态(节点、类名等),其参数语法类似于jQuery选择器的语法,也支持按元素文本、属性过滤元素。其中,selector自带超时判断,当超过指定时间仍然找不到该页面元素(或该元素不可见),该测试用例将不会通过。当选择了页面元素后执行操作,将由testController执行元素操作(click,type,rightclick,drag等),其具体实现类似于js的操作。
小结
基于以上的分析,testcafe相当于是另建了一个web server来实现injected script技术,而且他之所以测试速度这么快,也是因为这个server,实现了测试用例代码和应用程序在同一个run loop中运行,可以直接操作DOM