UI自动化测试神器->Cypress
序:
Cypress是基于node.js环境的,安装则极为便利,如果我们测试人员维护好了自动化脚本,就可以直接将js脚本分享给研发人员,辅助研发人员进行自测。如果能将UI自动化普及到整个部门都去使用,辅助提升产品研发效率,那UI自动化就是非常有价值的事情。
1.1、Cypress简介
官网地址:https://docs.cypress.io
官网的首页有一句标语“The web has evolved.Finally, testing has too.”
意思是Web已经进化了,最终,测试也是。而对于Cypress的介绍则是“Fast, easy and reliable testing for anything that runs in a browser.”翻译为“对浏览器中运行的任何内容进行快速、简单和可靠的测试”。Cypress是一种E2E测试框架,即end to end测试。同类型的框架还有Testcafe等。但是E2E测试似乎是比较冷门的模块,而Cypress使得E2E测试更加简单。Cypress框架安装成功后,example文件中还有很多的demo,有助于我们更快的了解和学习该框架。Cypress也可以说是web UI自动化的完美解决方案,下文中将简单描述Cypress的优势。
1.2、Cypress优势
(1)安装简单
毫不夸张的说,在网络正常的情况下,10分钟就可以安装好Cypress框架,一天则可以入门,写一些简单的用例。
(2)运行速度快
相较于Selenium来说,Cypress的运行速度真的是相当快了,它不需要web driver来驱动浏览器。
(3)脚本实时调试
在脚本编写过程中,只要编辑器中进行保存,脚本就会自动运行,可以快速高效的知道脚本是否正确。
(4)兼容性测试
目前Cypress已经支持Chrome和Firefox两款主流浏览器,在GUI界面可以非常便捷的切换浏览器进行兼容性测试。
(5)失败用例自动保存截图
脚本运行失败后,会在..\cypress\screenshots文件夹下面自动保存失败用例的截图,方便我们追踪到失败用例的原因。
(6)运行过程自动录制视频
脚本运行完成后,会在..\cypress\videos文件夹下自动保存脚本运行过程录制的视频。
(7)人人可用
沐沐觉得这个框架最大的好处就是“人人可用”,Cypress不但可以帮助测试人员进行版本回归测试,浏览器兼容性等测试,还可以辅助研发人员进行自测,甚至可以辅助去造一些测试数据,只要是web端手工不断重复的工作,都可以用Cypress辅助完成。
第二章、环境搭建
备注:以下安装步骤是基于Windows10。
2.1、安装node.js
1、官网下载地址:
https://nodejs.org/en/download/;
2、傻瓜式安装,安装后查看是否安装成功:node –v;
3、最新版的node在安装时同时也安装了npm,查看npm版本:npm -v;
4、具体安装步骤参考菜鸟教程:
https://www.runoob.com/nodejs/nodejs-install-setup.html
2.2、安装Cypress
1、cmd进入命令行模式,进入D盘创建一个文件夹:mkdir Crypress_project;
3、进入新创建的文件夹下面:cd Crypress_project;
4、初始化项目:npm init -y;
5、安装cypress:npm i cypress -S -D;安装成功截图如下:
6、打开package.json文件,将里面的内容全部删除,复制上去以下代码:
{
"scripts": {
"cypress": "cypress open"
}
}
2.3、运行Cypress
1、运行命令:npm run cypress;
2、Cypress窗口正常打开不报错,即环境安装成功。
3、examples中是Cypress提供的demo,点击即可运行,如下图:
第三章、实际案例
由于沐沐工作中的项目不方便作为案例,所以将以登录禅道记录缺陷作为demo,这样案例更具有参考性。
1、脚本代码如下:
describe("禅道录入缺陷", function(){//登录模块beforeEach("登录系统",function () {cy.visit('url')//输入用户名cy.get('#account').type("账号").should('have.value', '账号');//输入密码cy.get('[name="password"]').type("密码").should('have.value', '密码');//点击登录按钮cy.get('#submit').click();});it("提交bug", function(){//点击测试cy.get('[href="/zentao/qa/"]').click();//点击bugcy.get('[data-id="bug"] > a').click();//点击【提bug】按钮cy.get('#createActionMenu > a.btn').click();//点击影响版本cy.get('#openedBuild_chosen > .chosen-choices').click();//选择主干cy.get('.active-result').contains('主干').click();//输入bug标题cy.get('#title').type("bug标题").should('have.value', 'bug标题');//点击【保存】cy.get('#submit').click();//断言是否新增成功cy.get('.datatable-wrapper > .table > tbody > .text-center > .text-left > a').contains('a', 'bug标题').should('be.visible');});});
2、脚本存放位置:在..\cypress\integration文件夹下面可以自定义文件存在脚本。如下图:
3、选中用例单击即可运行,如下图:
4、运行成功截图如下:
第四章、定位方式
Cypress支持id、name、class、css、text、xpath等多种定位方式,但是需要注意的是xpath定位需要额外安装cypress-xpath库。
4.1、xpath定位
1、官网地址:https://github.com/cypress-io/cypress-xpath
2、安装命令:npm install -D cypress-xpath
3、在cypress/support/index.js文件中增加:require('cypress-xpath')
4、定位举例,如下代码:
(1)xpath定位举例:
cy.xpath('//span[contains(text(),"新增主项")]') .click();
(2)class属性定位举例:
cy.get('.el-icon-plus').click();
4.2、Demo定位说明
元素定位的方式有很多种,我将以我的demo进行说明,demo中的定位方式不一定是最佳的但是都是正确有效的,在此详细说明,只是方便像我一样的测试小白进行参考。
(1)通过标签名进行定位
代码如下截图:
定位方式如下:
//点击测试
cy.get('[href="/zentao/qa/"]')
.click();
(2)通过父级的date-*属性进行定位
代码如下截图:
定位方式如下:
//点击bug
cy.get('[data-id="bug"] > a')
.click();
(3)通过i标签的class属性进行定位
代码如下截图:
定位方式如下:
//点击【提bug】按钮
cy.get('.icon-plus')
.click();
(4)通过父级的id+子级的class属性进行定位
代码如下截图:
定位方式如下:
//点击影响版本
cy.get('#openedBuild_chosen > .chosen-choices')
.click();
(5)通过class属性+文本进行定位
代码如下截图:
定位方式如下:
//选择主干
cy.get('.active-result')
.contains('主干')
.click();
(6)过id进行定位
代码如下截图:
定位方式如下:
//输入bug标题
cy.get('#title')
.type("bug标题")
.should('have.value', 'bug标题');
(7)通过相对定位的并且断言是否新增成功(不推荐使用相对定位的方式)
代码如下截图:
定位+断言方式如下:
//断言是否新增成功
cy.get('.datatable-wrapper > .table > tbody > .text-center > .text-left > a')
.contains('a', 'bug标题')
.should('be.visible');
终于找到了最适合测试员的UI自动化测试神器,连开发都在用!
UI自动化测试神器->Cypress相关推荐
- 2022年新一代最强开源UI自动化测试神器(一)
感谢您抽出 阅读本文 一.Playwright简介 Playwright是微软开源的新一代自动化测试工具.类似于主流的Selenium. Playwright为现代Web应用程序提供可靠的端到端的自动 ...
- 比selenium体验更好的ui自动化测试工具: cypress介绍
话说 Cypress is a next generation front end testing tool built for the modern web. And Cypress can tes ...
- 2022年新一代最强开源UI自动化测试神器 ——Playwright(三)
感谢您抽出 . . 阅读本文 一.playwright 脚本调试 Playwright提供了degbug工具,用于脚本调试. Playwright Inspector是一个GUI工具,可帮助修改和调试 ...
- 种草Cypress和TestCafe,QA同学一定想了解的Web UI自动化测试工具
摘要:Cypress和TestCafe这两个工具相比于Selenium都更加的轻量级,且在不同的方面有了改进,比如安装更简单,增加了内置等待机制,调试更加方便等. Cypress.TestCafe.P ...
- Cypress UI自动化测试框架学习(5)-命令大全
Cypress UI自动化测试框架常用命令介绍 命令大全 and:创建断言 as:创建别名 blur:失去焦点 check:选中 check 或者 radio children:获取一组DOM元素中每 ...
- 从一次故障聊聊前端 UI 自动化测试
背景 事件的起因在于老板最近的两次"故障",一次去年的,一次最近.共同原因都是脚手架在发布平台发布打包时出错,导致线上应用白屏不可用. 最神奇的是,事后多次 Code Review ...
- 什么样的项目适合UI自动化测试
我们在考虑做自动化测试之前,一定要先分析一下,这个项目到底适不适合做自动化测试,避免在不太适合自动化测试的项目中痛苦挣扎,既浪费了大量的人力和时间,又收效甚微.下面简单列举一下评估一下项目是否适合做自 ...
- UI自动化测试环境搭建 Python+Selenium+RobotFramework
UI自动化测试环境准备&RF框架的机制 一.流程与模块介绍 web自动化测试主要有四个部分组成,分别是数据源.自动化脚本.驱动程序.浏览器四个部分.数据源指的就是前端web页面数据的来源,MY ...
- UI自动化测试遇弹窗怎么办?这个解决方法你get到了没?
目录 引言 弹窗的种类: APP内的业务弹窗 弹窗处理 watcher的使用 实战案例 软件测试技术的准备和建议 一.测试基础 二.Linux必备知识 三.Shell脚本 四.互联网程序原理 五.My ...
- 前端自动化测试框架cypress(一)
前端自动化测试框架cypress 自动化测试 为了保障软件质量,并减少重复性的测试工作,自动化测试已经被广泛运用. 自动化测试是一种测试方法,是指使用特定的软件,去控制测试流程,并比较实际结果与预期结 ...
最新文章
- python爬取新闻后提炼_Python爬虫开发的3大难题,别上了贼船才发现,水有多深...
- logistic loss公式的由来 xgboost 雪伦的推导中使用了该公式
- activemq网络桥接_ActiveMQ –经纪人网络解释
- vtk删除一个actor_如何构建一个基于actor的简单区块链
- C++11 标准新特性: 右值引用与转移语义(点评)
- 解决:java.lang.IllegalStateException: ApplicationEventMulticaster not initialized
- 第二章 数据的表示和运算 2.1.1 进位计数制 [计算机组成原理笔记]
- 【例题+习题】【数值计算方法复习】【湘潭大学】(三)
- Mac 10.10下安装MySQL5.6.21提示安装失败
- Latex 排版第一页出现空白页
- hive查看表中列的信息命令_走近大数据之Hive入门(四、Hive的管理)
- CSU - 1803 数论GCD
- 小弟浅谈asp.net页面生成周期---上
- python打包成exe文件
- Qt qlabel 设置字体、大小、加粗等
- Unreal Engine 4 问题:如何设置分辨率
- ubuntu永中office的快捷键
- 【渝粤教育】广东开放大学 工程经济 形成性考核
- python 利用os库 读取、写入txt文本
- U盘如何恢复正常存储U盘
热门文章
- 错题集 HDLBits Exams/ece241 2013 q7 JK触发器
- FPS游戏中的喷漆效果原理
- Python课程总结
- 教你巧用万用表测量大值电阻
- html css字体特效,40款CSS+JS文字动画特效html源码
- WPF半圆形导航菜单
- vue中分割线的实现
- 计算机无法连接移动硬盘,移动硬盘无法访问怎么办 移动硬盘无法访问解决方法...
- 自建dnspod解析服务器,利用DNSPOD配置智能解析双线服务器
- matlab字号单位是磅吗,Office软件中字体“号”与“磅”的关系