前言

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

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

秋色园QBlog技术原理解析：Web之页面处理-内容填充(八)
文章回顾: 1: 秋色园QBlog技术原理解析:开篇:整体认识(一) --介绍整体文件夹和文件的作用 2: 秋色园QBlog技术原理解析:认识整站处理流程(二) --介绍秋色园业务处理流程 3: 秋色 ...
秋色园QBlog技术原理解析：性能优化篇：用户和文章计数器方案(十七)
2019独角兽企业重金招聘Python工程师标准>>> 上节概要: 上节秋色园QBlog技术原理解析:性能优化篇:access的并发极限及分库分散并发方案(十六) 中, 介绍了 ...
秋色园QBlog技术原理解析：性能优化篇：数据库文章表分表及分库减压方案(十五)...
文章回顾: 1: 秋色园QBlog技术原理解析:开篇:整体认识(一) --介绍整体文件夹和文件的作用 2: 秋色园QBlog技术原理解析:认识整站处理流程(二) --介绍秋色园业务处理流程 3: 秋色 ...
秋色园QBlog技术原理解析：UrlRewrite之无后缀URL原理(三)
文章回顾: 1: 秋色园QBlog技术原理解析:开篇:整体认识(一) --介绍整体文件夹和文件的作用 2: 秋色园QBlog技术原理解析:认识整站处理流程(二) --介绍秋色园业务处理流程本节,将从 ...
秋色园QBlog技术原理解析：性能优化篇：打印页面SQL，全局的SQL语句优化(十三)...
文章回顾: 1: 秋色园QBlog技术原理解析:开篇:整体认识(一) --介绍整体文件夹和文件的作用 2: 秋色园QBlog技术原理解析:认识整站处理流程(二) --介绍秋色园业务处理流程 3: 秋色 ...
秋色园QBlog技术原理解析：系列终结篇：最后的AOP策略(十九)
2019独角兽企业重金招聘Python工程师标准>>> 开篇闲话: 好几个月没写文章了,从9月15号发布新浪"微博粉丝精灵"V1.0后,持续的几个月都在折腾它,现 ...
秋色园QBlog技术原理解析：性能优化篇：access的并发极限及超级分库分散并发方案(十六)...
上节回顾: 上节秋色园QBlog技术原理解析:性能优化篇:数据库文章表分表及分库减压方案(十五) 中, 介绍了秋色园QBlog 在性能优化方面,从技术的优化手段,开始步入数据库设计优化,并从数据的 ...
6、HIVE JDBC开发、UDF、体系结构、Thrift服务器、Driver、元数据库Metastore、数据库连接模式、单/多用户模式、远程服务模式、Hive技术原理解析、优化等(整理的笔记)
目录: 5 HIVE开发 5.1 Hive JDBC开发 5.2 Hive UDF 6 Hive的体系结构 6.2 Thrift服务器 6.3 Driver 6.4 元数据库Metastore 6.5 ...
人人看得懂的ChatGPT技术原理解析
人人看得懂的ChatGPT技术原理解析编者按:自ChatGPT面世以来,我们在热切挖掘其丰富应用的同时,也在孜孜探求其背后的工作原理. 今天我们为大家带来的文章,深入浅出地阐释了ChatGPT背后的 ...

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

这里写自定义目录标题

前言

简介

TestCafe执行流程

小结

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

最新文章

热门文章