使用Cypress进行UI测试(一)安装Cypress第一个测试用例
使用Cypress进行UI测试(一)安装Cypress&第一个测试用例
- Cypress简介
- 安装cypress并运行官网示例
- 项目结构介绍
- 用例结构介绍
- 第一个测试用例
Cypress简介
Cypress同TestCafe一样,也是被誉为UI自动化测试后Selenium时代的三驾马车之一,从GitHub的star数量来说,Cypress远超TestCafe,可见其受欢迎程度。笔者项目中也是使用的Cypress,确实很好用,所以想要推荐给大家。
Cypress主要有以下特点:
1.Cypress记录了测试用例运行snapshots,可以查看用例运行轨迹,易于Debug
2.内置自动等待,不需要手动加wait或者sleep
3.交互式的TestRunner界面,测试情况一目了然
4.可以模拟网络请求流量
5.dashboard可以完美展示CI运行情况
之后的系列文章会一一介绍这些特点,今天这篇会介绍如何安装Cypress,然后使用Cypress运行第一个测试用例。
安装cypress并运行官网示例
1.在任意目录下新建一个空文件夹,然后执行:npm init 初始化一个项目
2.使用IntelliJ打开项目,在命令行执行:npm install cypress --save-dev
3.打开cypress:node_modules/.bin/cypress open
首次打开的cypress会自动加载一些example,如下图
我们也可以将打开cypress的命令写在package.json文件中,以后打开cypress直接运行:npm run cypress:open即可
"scripts": {"cypress:open": "node_modules/.bin/cypress open"
}
点击运行第一个测试用例actions.spec.js,这是cypress会启动Chrome浏览器运行该测试用例,并且可以在TestRunner的左边看到运行了哪些测试用例,哪些成功了,哪些失败了,一目了然。
项目结构介绍
然后我们回到我们的项目源码中,可以看到新增了一些文件和目录,新增了cypress目录并在其下有四个文件夹,新增了cypress.json文件。这是刚刚我们运行cypress引入的cypress给的demo,它也就帮我们生成好了标准的目录结构。目录结构如下图所示:
下面我们就来介绍一下使用cypress进行UI测试的项目源码目录结构。
1.fixtures:存放测试用例需要使用的测试数据。
2.integration:存放测试用例,我们可以看到文件夹下的所有js文件均以spec结尾,这也是cypress的内在设置,它只会将以spec的文件识别为测试用例,当然不一定是js文件,它也支持.jsx/.coffee/.cjsx文件。
3.plugins:加载插件的文件,cypress支持很多插件,可在其官网查看,下文也将介绍几个常用插件。
4.support:里面的command.js文件用于自定义命令,index.js文件可以用于配置一些通用配置,每个测试用例运行前会先运行该文件。
5.cypress.json:cypress默认的全局配置文件,比如配置生成报告的路径、访问的baseUrl、用例运行超时时间等等。具体的配置可参照官网:https://docs.cypress.io/guides/references/configuration.html#Options,下文也将介绍一些常见配置。
用例结构介绍
我们可以打开其中的一个用例actions.spec.js查看一下用例结构,一个js文件有多个context/describe,一个describe包含了多个it描述的测试用例,所以可以将一个describe包含的内容当作一个测试集,其中包含多个测试用例。
第一个测试用例
下面我们就用cypress开始写我们的第一个测试用例:微博首页搜索,然后注册账号。
如果你之前从未写过UI测试,甚至不知道怎么开头,那么我们就可以按以下步骤进行:
1.Visit a web page.
2.Query for an element.
3.Interact with that element.
4.Assert about the content on the page
用例代码如下
weiboSignUpTest.spec.js
describe('weibo sign up test', () => {beforeEach('visit sign up page of weibo', () => {cy.visit('https://weibo.com/signup/signup.php')})it('should sign up in weibo successfully', () => {cy.get('input[name=username]').type('123')cy.get('input[name=passwd]').type('123098')cy.get('select[node-type=birthday_year]').select('1995')cy.get('select[node-type=birthday_month]').select('2')cy.get('select[node-type=birthday_day]').select('21')cy.get('input[name=pincode]').type('123')cy.get('a[action-type=btn_submit]').click()cy.get('.error').should('contain', '手机号长度11位,以13/14/15/16/17/18/19开头')})
})
我们使用pageObject的思想重构测试用例:
weiboSignUpPage.js
function inputUserName(userName) {cy.get('input[name=username]').type(userName)
}function inputPassword(password) {cy.get('input[name=passwd]').type(password)
}function selectBirthday(year, month, day) {cy.get('select[node-type=birthday_year]').select(year)cy.get('select[node-type=birthday_month]').select(month)cy.get('select[node-type=birthday_day]').select(day)
}function inputPinCode(pinCode) {cy.get('input[name=pincode]').type(pinCode)
}function submit() {cy.get('a[action-type=btn_submit]').click()
}function shouldShowErrorMessage(errorMessage) {cy.get('.error').should('contain', errorMessage)}module.exports = {inputUserName: inputUserName,inputPassword: inputPassword,inputPinCode: inputPinCode,selectBirthday: selectBirthday,submit: submit,shouldShowErrorMessage: shouldShowErrorMessage
}
weiboSignUpTest.spec.js
import signUpPage from './weiboSignUpPage'describe('weibo sign up test', () => {beforeEach('visit sign up page of weibo', () => {cy.visit('https://weibo.com/signup/signup.php')})it('should sign up in weibo successfully', () => {signUpPage.inputUserName('123')signUpPage.inputPassword('123098')signUpPage.selectBirthday('1995', '2', '21')signUpPage.inputPinCode('123')signUpPage.submit()signUpPage.shouldShowErrorMessage('手机号长度11位,以13/14/15/16/17/18/19开头')})
})
由此可见,只要了解一些cypress的常用api,写测试用例是十分简单的。
使用Cypress进行UI测试(一)安装Cypress第一个测试用例相关推荐
- 自动化测试系列 | UI测试自动化测试
UI 测试是一种测试类型,也称为用户界面测试,通过该测试,我们检查应用程序的界面是否工作正常或是否存在任何妨碍用户行为且不符合书面规格的 BUG.了解用户将如何在用户和网站之间进行交互以执行 UI 测 ...
- 自动化测试系列(三)|UI测试
UI 测试是一种测试类型,也称为用户界面测试,通过该测试,我们检查应用程序的界面是否工作正常或是否存在任何妨碍用户行为且不符合书面规格的 BUG.了解用户将如何在用户和网站之间进行交互以执行 UI 测 ...
- e2e测试框架之Cypress
谈起web自动化测试,大家首先想到的是Selenium!随着近几年前端技术的发展,出现了不少前端测试框架,这些测试框架大多并不依赖于Selenium,这一点跟后端测试框架有很大不同,如Robot Fr ...
- 自动化测试(二)02——单元测试类工具-Karma、Jasmine、Mocha、Jest、AVA E2E测试类工具-cypress、nightmare、nightwatch、testcafe
自动化测试(二)02--单元测试类工具-Karma.Jasmine.Mocha.Jest.AVA & E2E测试类工具-cypress.nightmare.nightwatch.testcaf ...
- Cypress 前端 E2E 测试——手把手入门教程
目录 初始化项目 准备好 Docker 镜像 安装依赖 ESLint 配置 IDE 集成 配置 手动配置 Gitlab 集成 测试用例 配置环境变量 静态变量 动态变量 使用变量 添加 Command ...
- Cypress Commands – UI Interaction Commands
注明本文转载于:https://www.toolsqa.com/cypress/cypress-commands-ui-interaction-commands/ Cypress Commands – ...
- Cypress入门-(一)如何安装Cypress
Cypress介绍和原理之类的就不说了,自己查查都能查到,直接上干货-安装教程 一.下载安装node.js 1.下载地址:https://nodejs.org/en/ 电脑是win10的话一般都下载最 ...
- 【软件测试】2021年软件测试领域常用工具总结(2)-接口测试,UI测试工具篇
文章目录 前言 接口测试工具 Postman JMeter Robot Framework SoapUI REST-Assured Apifox Katalon Studio Karate 接口Moc ...
- UI 测试:包含清单和示例的完整指南
介绍: 近年来,智能手机.平板电脑.笔记本电脑和计算机使用量的指数增长使网络和应用程序开发行业具有竞争力.因此,易于使用.价格合理.稳定且具有视觉吸引力的软件开发有所增加,但只有经过针对客户满意度和需 ...
最新文章
- R语言Hosmer-Lemeshow检验得到校准曲线的P值实战
- 创建交叉表_【零售】Tableau LOD+表计算做交叉购买分析
- iOS之深入解析如何构建静态库
- 二维数组 赋值_3.9数组(数组基本使用、数组的循环、数组拷贝、数组排序、多维数组)...
- 迷你linux设备,ComputeLab发布MintBox迷你PC:专为Linux系统玩家打造
- 【简洁易懂】为什么判断素数时只需要循环到该数的平方根
- DMN结合bpmn简化流程_07
- Mybatis的基本步骤
- 数据结构——划分树模板
- python输出变量的值使用_Python捕获任何异常,并使用变量值打印或记录回溯
- SpringBoot微信点餐系统—1、数据库设计
- 工业相机与镜头选型方法(含实例)
- 计算机键盘中英文,电脑键盘中英文切换键
- 我为大家分享永久免费空间 云专家
- 我的 2019 年 - 当勤精进,但念无常,何以解忧,唯有暴富
- Apifox 学习笔记 - 前置操作
- Python参数化接口测试demo笔记
- c++中vector的 = 与 assign的区别
- Java 程序员,真的不能去外包吗?
- 小a与星际探索(dp)
热门文章
- [USACO12JAN]Video Game Combos
- ARC中__bridge, __bridge__transfer, __bridge_retained 关系
- w5100网络扩展板故障排查记录
- vector容量和大小
- keil软件基于AT89C52的基本工程建立及其相关设置
- 涉密计算机管理过程中不符合,不符合涉密会议管理要求的做法是()
- 随笔之由Kindle fire想到的
- 个人怎么做微信小程序?个人开发者也可以这样开发属于自己的小程序
- C语言实现二进制与十进制的互转(带小数)
- 《树莓派用户指南(第3版)》——第1章 绪论 1.1敏捷制造的提出背景和含义