1、前言
一提起 Web UI 自动化时,大多数都会想到自动化测试工具 Selenium。随着测试技术的不断发展,出现了很多优秀的自动化测试工具。
本篇将介绍一款目前市面上很受欢迎的自动化测试工具-Cypress。
Cypress 是一个易于使用、快速稳定、可靠性高、全面性强的自动化测试框架,因此很多自动化测试都在使用它。
2、简介
Cypress 是一个基于 JavaScript 的端到端测试框架,它专注于提供简单易用、可靠稳定的自动化测试解决方案。Cypress 提供了一个强大的 API,可以轻松编写、运行和调试测试用例,同时还提供了丰富的命令和断言库,帮助测试人员更高效地编写测试用例。Cypress 还内置了自动化截图、视频录制、实时重载等功能,让测试人员更加高效地进行测试工作。
特性:
1、时间穿梭:Cypress 在测试运行时拍摄快照。只需将鼠标悬停在“命令日志”中的命令上,即可准确查看每一步发生了什么。
2、调试性:不要再猜测为什么你的测试失败了。直接从 Chrome DevTools 等熟悉的工具进行调试。我们的可读错误和堆栈跟踪使调试速度极快。
3、实时重新加载:每当您对测试进行更改时,Cypress 会自动重新加载。查看应用程序中实时执行的命令。
4、自动等待:不要在测试中添加等待或睡眠。Cypress 在继续之前自动等待命令和断言。不再是异步地狱。
官方地址:
https://www.cypress.io/
GitHub地址:
https://github.com/cypress-io/cypress
3、安装
在 Windows 环境下进行部署。采用 Npm 方式安装。
1、Node.js
如果你使用 npm 的方式安装 Cypress,支持版本:
Node.js 12 或 14 及更高版本。
首先安装 Node.js
下载地址:
https://nodejs.org/en/download/
因作者之前已安装过 Node.js,则在命令行输入以下命令,进行安装验证即可。
node –version
npm –version
如图所示:系统已经有了 Node.js 环境,且满足安装 Cypress 的要求。
执行 npm init -y 命令生成 package.json 文件。
例如在作者系统的 D 盘路径下创建 CypressProjects 目录。
打开命令行工具,跳转到新创建的目录里,输入 npm init -y
配置生成 package.json 文件。
文件创建完成。里面包含了项目的配置信息。
2、Cypress
输入安装命令 npm install cypress –save-dev
(还是在创建的 CypressProjects 目录里)
安装完成后,目录结构。
4、打开Cypress
打开命令行,跳转到安装目录下(如 D:\CypressProjects)
执行命令 node_modules\.bin\cypress open
打开 Cypress
可以看到支持端到端测试和组件测试。
端到端测试:从端到端构建和测试应用程序的整个体验,以确保每个流符合您的期望。
组件测试:独立地从设计系统构建和测试组件,以确保每个状态符合您的期望。
端到端测试与组件测试之间的差异:
1、端到端测试:
(1)通过 cy.visit() 访问 URL
(2)跨多个页面测试流程和功能
(3)非常适合测试 CD 工作流中的集成流
2、组件测试:
(1)通过 cy.mount() 导入组件
(2)隔离测试设计系统的各个组件
(3)非常适合测试 CI 中的隔离流和组件
以端到端测试为例
选择浏览器,选择您首选的浏览器进行端到端测试。例如选择 Electron。
之后点击启动端到端测试。
创建你的第一个规范,可选择如下规范。
脚手架示例规范:我们将生成几个示例规范,帮助指导您如何在 Cypress 中编写测试。
创建新的空规范:我们将生成一个空的 spec 文件,用于开始测试应用程序。
点击创建新的空规范。
跳转到输入新规格路径对话框,输入新规范的名称即可。这里填写默认名称。
点击创建规范。
成功添加规范。
点击运行规范,执行成功。
5、第一个脚本
修改已创建的 spec.cy.js 规范。
修改前的脚本内容:
describe('empty spec', () => {it('passes', () => {cy.visit('https://example.cypress.io')})})
修改后的脚本内容:
describe('公众号:AllTests软件测试', () => {it('访问首页', () => {cy.visit('https://www.baidu.com/')// 访问网站首页cy.contains('百度一下')// 确认页面包含指定文本})it('搜索关键词', () => {cy.get('input[name="wd"]')// 获取搜索框.type('cypress')// 输入搜索关键词cy.get('input[type="submit"]')// 获取搜索按钮.click()// 点击搜索按钮cy.contains('cypress')// 确认搜索结果页面包含指定文本})})
上面的测试脚本包含两个测试用例,第一个测试用例访问网站首页并确认页面包含指定文本;第二个测试用例搜索关键词并确认搜索结果页面包含指定文本。在这个示例中,我们使用了 Cypress 提供的 API 来访问页面、获取元素、输入文本、点击按钮等操作,同时使用了 Cypress 提供的断言库来确认页面是否包含指定文本。
运行结果,执行成功。
6、Cypress设置
设置打开方式,修改 package.json 文件。
方式一:cypress run是以无头浏览器模式跑测试用例文件夹下的所有测试用例。
"scripts": {"cypress:run":"cypress run"}
例如:
{"name":"cypressprojects","version":"1.0.0","description":"","main":"index.js","scripts": {"cypress:run":"cypress run"},"keywords": [],"author":"","license":"ISC","devDependencies": {"cypress":"^10.6.0"}}
保存后,打开命令行,输入命令 npm run cypress:run
方式二:cypress open会打开测试用例集的界面,需要手动运行。
"scripts": {"cypress:open":"cypress open"}
例如:
{"name":"cypressprojects","version":"1.0.0","description":"","main":"index.js","scripts": {"cypress:open":"cypress open"},"keywords": [],"author":"","license":"ISC","devDependencies": {"cypress":"^10.6.0"}}
保存后,打开命令行,输入命令 npm run cypress:open
更多官方示例:
https://github.com/cypress-io/cypress-example-recipes
7、Cypress目录
最后: 下方这份完整的软件测试视频学习教程已经整理上传完成,朋友们如果需要可以自行免费领取【保证100%免费】
这些资料,对于【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴上万个测试工程师们走过最艰难的路程,希望也能帮助到你!