Injected script—web 自动化测试技术原理解析，以TestCafe为例

前言

相比于依赖于不同浏览器插件的特定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