端到端测试工具--testcafe
写在前面
随着业务的增加,复杂性的增加,我们更需要保证页面不能出错,之前需要每次上线之前需要每次人工测试,如果有好多改动,为保证业务不出错,需要耗费更多的时间来测试,所以我们需要写一些测试来保证业务的逻辑。
端到端测试
测试有很多种,只是当前我们的业务对单元测试不太友好(之前写过redux的单元测试,例子在点我),代码耦合性略高,函数也非pure function。所以需要端到端的测试(End to End Testing)。端到端的测试可以确保一堆组件能够按照预先设想的方式整合起来运行的时候使用。
testcafe
之前调研了一些框架,选择了testcafe这个框架,之前是收费的,现在开源没多久,所以生态不是很好。之所以选中testcafe,很主要的原因是它的api简单和不需要任何依赖。
testcafe只需要全局安装这个库,并不需要安装lite chrome等等。还有一点就是它很具有前瞻性的支持了ts和众多es6,es7的特性。这是比较爽的。
我们开始编写一个测试试一下。
安装testcafe环境
sudo npm i -g testcafe
开始编写case
import { Selector } from 'testcafe';
引入选择器
fixture `open.toutiao.com test case`
.page `http://open.toutiao.com/`;
打开需要测试的网站(api比较简洁)。
test('should open.toutiao work as expected', async t => {
//some code there
});
这是一个测试的case
test('should open.toutiao work as expected', async t => {
const newsList = Selector('section');
await t.expect(newsList.exists).eql(true, 'should display news list');
})
这是一个最简单的例子,我们选择新闻列表,这个列表需要存在。
ok,我们运行一个命令来执行这个测试。
文件保存为index.js
testcafe chrome index.js
官网例子
import { Selector } from 'testcafe';
fixture `Github Search`
.page `https://github.com`;
test('should github search work as expected', async t => {
const searchInput = Selector('.js-site-search-focus');
const searchList = Selector('.repo-list-item');
const resultItem = Selector('.repo-list-item h3 a');
const repoContent = Selector('.repository-content');
await t.setTestSpeed(0.8);
await t.expect(searchInput.exists).eql(true, 'should search input visible');
await t.typeText(searchInput, 'testcafe');
await t.pressKey('enter');
await t.expect(searchList.count).eql(10, 'should show 10 results');
await t.click(resultItem);
await t.expect(repoContent.exists).eql(true, 'should repo detail visible');
const location = await t.eval(() => window.location);
await t.expect(location.pathname).eql('/DevExpress/testcafe', 'should testcafe repo found');
});
这个测试做的工作为打开github,期望github的搜索框存在,输入框输入testcafe,点击回车,期望搜索列表搜索结果多于10条,点击第一条结果,期望跳转的页面中存在返回的内容。
最后期望网址的域名搜索位置为/DevExpress/testcafe。返回。
可以运行测试
testcafe chrome index.js
我们的测试
我们的测试也挺简单的,再给个例子吧~
import { Selector, ClientFunction } from 'testcafe';
fixture `open.toutiao.com test case`
.page `http://open.toutiao.com/`;
test('should open.toutiao work as expected', async t => {
const newsList = Selector('section');
const detailItem = Selector('.list_content section a');
const getWindowLocation = ClientFunction(() => document.body.scrollTop);
let random = Math.floor(Math.random()*10);
await t.expect(newsList.exists).eql(true, 'should display news list');
await t.expect(newsList.count).gt(5,'news more than 5 ');//需要新闻列表页大于5条新闻
let a = detailItem.nth(random);
await t.click(a);//进入任意一条详情页
await t.debug();
await t.eval(() => {
document.body.scrollTop =$('.box-title')[0].offsetTop;//滚动到推荐
});
await t.expect(getWindowLocation()).gt(0,'should be scroll');//保证页面滚动
await t.expect(Selector('#pageletArticleContent').exists).eql(true, 'should display news and it is open.toutiao ');//文章是open下的文章
});
测试做的工作是打开open.toutiao.com,期望新闻列表页存在,期望多于5条新闻,随机点开一条新闻,文章滚动到“精彩推荐区域”,保证页面已经滚动,保证文章内容存在,且不是广告页。
具体的工作已经写在注释就不多说了。
测试效果
执行命令,自动打开浏览器。输入网址:
我们可以通过await debug
来进行调试,点击上图的step可以每步进行调试。
运行成功如图
如果点击到广告页,搜索不到新闻内容就会报错,我们也可以很容易的debug,如图:
我们可以看到哪一步出错,报什么错,来进行业务代码的快速debug,也可以配合插件进行log上报。
屏幕快照功能
await t
.click('#change-avatar')
.setFilesToUpload('#upload-input', 'img/portrait.jpg')
.click('#submit')
.takeScreenshot();
点击文件上传,上传文件,点击提交,然后拍一下照,保存。可以在命令行里加-s来指定文件位置。就不展示了。
注意
- testcafe不提供浏览器环境,所以如果我们需要什么浏览器就自行下载。只需要在命令行修改浏览器名称。比如 testcafe safari index.js。
- testcafe不支持function spy。
- testcafe支持异步,不需要为lazyload的dom特殊处理。可以直接选择。
- 在eval里不支持await
- ...具体参见其官网好了。
端到端测试工具--testcafe的更多相关文章
- PC和移动端浏览器同步测试工具Browsersync使用介绍
在移动端网页开发中,总是因为不方便调试,导致各种问题不容易被发现.但是现在有了Browsersync,一切都解决了. 不熟悉的同学可以看看Browsersync的官方网站Browsersync中文网. ...
- Monkey (压力测试)-移动端手机压力测试工具 monkey以及monkeyrunner
4. Monkey (压力测试) 这个是Android提供的系统工具.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输入.手势输入等),实现对正在开发的应用程序进行压力测试.Monkey测试是一种 ...
- Cypress与TestCafe WebUI端到端测试框架简介
近期接触了Cypress和TestCafe,两个测试框架都基于Node.js,都不再使用Selenium+WebDriver,而且开箱即用,非常轻量级,就冲着不再使用WebDriver这一点,极大地勾 ...
- Socket测试工具(客户端、服务端)
Socket是什么? SOCKET用于在两个基于TCP/IP协议的应用程序之间相互通信.最早出现在UNIX系统中,是UNIX系统主要的信息传递方式.在WINDOWS系统中,SOCKET称为WINSOC ...
- 最受欢迎的5款Node.js端到端测试框架
测试,尤其是自动化测试在现代 WEB 工程中有着非常重要的角色,与交付过程集成良好的自动化测试流程可以在新版发布时帮你快速回归产品功能,也可以充当产品文档.测试因粒度不同又可以分为单元测试.接口测试. ...
- pc端和android端应用程序测试有什么区别?(ps面试题)
pc端和android端应用程序测试有什么区别?(ps面试题) [VIP7]大连-凭海临风(215687736) 2014/4/10 8:56:171.测试环境不同PC平台一般都是windows an ...
- 移动web开发之移动端真机测试
× 目录 [1]特性 [2]安装 [3]设置[4]移动端 前面的话 chrome的开发者工具可以很好地做好模拟工作,但毕竟模拟和实际还是有差别的.所以,真机测试是一定要做的,如何高效地进行真机测试呢. ...
- 脚手架vue-cli系列五:基于Nightwatch的端到端测试环境
不同公司和组织之间的测试效率迥异.在这个富交互和响应式处理随处可见的时代,很多组织都使用敏捷的方式来开发应用,因此测试自动化也成为软件项目的必备部分.测试自动化意味着使用软件工具来反复运行项目中的测试 ...
- 前端端对端测试:基于PhantomJS的CasperJS
简介 Casperjs是一个基于PhantomJS和SlimerJS的前端端对端测试框架,当然你也可以使用它完成网络爬虫功能,它的特点的通过简单的脚本模拟浏览器行为, 主要有casper.tester ...
随机推荐
- 关于 httpUrlConnection 的 setDoOutput 与 setDoInput的区别
httpUrlConnection.setDoOutput(true) httpUrlConnection.setDoInput(true) 这两个方法在develope的httpUrlConnect ...
- shell 实现主板测试
初接触shell,只能需要用到什么功能现学先用了.本文总结一下完成测试程序当中遇到的技巧和问题. 01. 变量生存期的问题,在函数中的变量无法在其他地方使用,在函数中只能使用在函数前定义的全局变量: ...
- SpringMVC之GET请求参数中文乱码
server.xml 文件中的编码过滤器设置是针对POST请求的,tomacat对GET和POST请求处理方式是不同的,要处理针对GET请求的编码问题,则需要改tomcat,conf目录下的serve ...
- linux_http协议
什么是http协议? 超文本传输协议 最流行www服务,是http协议的实现 ssh,nfs,rsync客户端(Client)和服务端(Server),C/S架构,局域网内部用,胖客户端 http协议 ...
- 从零认识Java Package
Java Package为何被设计?如果你没想过,我这里或许可以提供一种视角. 想象一下,作为一个语言的设计者,你一定会考虑一个问题:变量名的冲突.为了解决这个问题,C++引入了命名空间(namesp ...
- 定时任务schedule(quartz)
1, 简介Quartz是一个任务调度框架.核心类:Scheduler :调度器,所有Job的调度都是由它控制;JobDetail :生成Job对象的实例,存储Job对象需要的参数;Job ...
- 渲染引擎(The rendering engine)
渲染引擎的职责就是渲染,即在浏览器窗口中显示所请求的内容.这是每一个浏览器的核心部分,所以渲染引擎也称为浏览器内核. 渲染引擎一开始会从网络层获取请求文档的内容. 获取文档后,渲染引擎开始解析 htm ...
- grep的小技巧
grep '^[^#]' /etc/openvpn/server.conf 中括号必须匹配一个字符^$属于标志位,不属于字符 grep没把\n看成字符 grep把空行看成^$ 还是perl的标准,空行 ...
- 在nagios中使用python脚本监控linux主机
在被监控端192.168.5.1101.先把getload.py放到/usr/local/nagios/libexec内[root@nhserver1 ~]# vim /usr/local/nagio ...
- MTF 曲线图解读
最近想入手佳能小小白(EF70-200 F4.0 USM),购买镜头的时候,在镜头厂商的产品页看到下面形状的曲线图: 这是什么意思呢?看着很复杂的样子啊?百度了一圈学习了一下,下面做个简单的分析. 这 ...