前端Cypress自动化测试全网详解

embedded/2024/11/14 10:34:57/

Cypress 自动化测试详解:从安装到实战

Cypress 是一个强大的端到端(End-to-End, E2E)功能测试框架,基于 Node.js
构建,支持本地浏览器直接模拟测试,并具有测试录屏功能,极大地方便了测试失败时的场景重现与问题定位。本文将详细介绍 Cypress
的安装、配置以及一个实际的自动化测试示例。

在这里插入图片描述

一、安装 Cypress

  1. 安装 Node.js

首先,你需要安装 Node.js。Node.js
的安装包可以从其官方网站(https://nodejs.org/en/download/)下载。下载完成后,按照提示进行安装。

安装完成后,打开命令行工具(cmd 或 PowerShell),输入以下命令以确认安装成功:

sh
node -v
npm -v
  1. 安装 Cypress

接下来,我们需要安装 Cypress。首先,在你的工作目录中创建一个新的文件夹

例如 Ui_test,然后使用 cd 命令进入该文件夹。
sh
mkdir Ui_test
cd Ui_test
执行以下命令以安装 Cypress:
sh
npm init -y
npm install cypress --save-dev

这将创建一个 package.json 文件并安装 Cypress 及其依赖。

  1. 配置 Cypress

在项目根目录下,创建一个 package.json 文件(如果 npm init 没有自动生成),并添加以下配置,以便可以通过 npm
命令启动 Cypress:

json
{"scripts": {"cypress:open": "cypress open"}
}

二、启动 Cypress

现在,你可以通过以下命令启动 Cypress:

sh
npm run cypress:open

或者,如果你已经全局安装了 Cypress,可以直接使用:

sh
npx cypress open

Cypress 启动后,你将看到一个图形化的界面,其中包含了所有测试用例的列表。

三、编写测试用例

Cypress 的测试用例通常写在 cypress/integration 目录下。在该目录下,你可以创建多个文件夹和 .js
文件来组织你的测试用例。

以下是一个简单的登录测试用例示例:

  • 在 cypress/integration 目录下创建一个新的文件夹,例如 demo。
  • 在 demo 文件夹中创建一个新的文件,例如 login.js。
  • 在 login.js 文件中,编写以下测试代码:
js
describe('Login Test', function() {beforeEach(function() {// 在每个测试用例之前执行的代码cy.visit('http://your-test-url.com/login'); // 替换为你的登录页面 URL});it('Should login successfully', function() {// 定位用户名输入框并输入用户名cy.get('#username').type('your-username'); // 替换为你的用户名// 定位密码输入框并输入密码cy.get('#password').type('your-password'); // 替换为你的密码// 点击登录按钮cy.get('#login-button').click();// 断言登录成功后跳转的页面包含某个特定元素或文本cy.url().should('include', '/dashboard'); // 替换为登录成功后应该跳转的 URL 路径});
});

四、运行测试用例

回到 Cypress 的图形化界面,你将看到刚才创建的 login.js 测试用例。点击它,然后点击界面右上角的 “Run” 按钮来运行测试用例。

你也可以通过命令行来运行测试用例:

sh
npx cypress run --spec "cypress/integration/demo/login.js"

这将运行指定的测试用例并生成测试报告。

五、生成测试报告

Cypress 支持多种测试报告生成器,例如 Mocha Awesome。要生成 Mocha Awesome 报告,你需要安装以下依赖:

sh
npm install --save-dev mocha mochawesome mochawesome-merge mochawesome-report-generator

然后,在 cypress.json 文件中添加以下配置:

json
{"env": {"search": "Cypress e2e"},"reporter": "mochawesome","reporterOptions": {"reportDir": "cypress/results","overwrite": false,"html": true,"json": true}
}

再次运行测试用例时,Cypress 将在 cypress/results 目录下生成 HTML 和 JSON 格式的测试报告。

文件夹目录的详解

在Cypress测试框架中,fixtures、integration、plugins、support以及cypress.json是构成其项目结构的核心目录和文件。以下是对这些目录和文件的详细讲解:

1. fixtures
  • 作用:主要用于存储测试用例的外部静态数据。
  • 使用:通常与cy.fixture()命令配合使用,以加载和引用这些静态数据。
  • 文件类型:一般为.json后缀的文件,用于存储如HTTP状态码和返回值等静态数据。
  • 优点:
    可以模拟接口返回值,避免实际调用接口,从而提高测试速度。
    消除了对外部功能模块的依赖,使测试用例更加稳定可靠。
2. integration
  • 作用:存放集成测试用例。
  • 文件类型:支持多种文件格式,包括.js(普通JavaScript文件)、.jsx(带有扩展的JavaScript文件,可包含处理XML的ECMAScript)、.coffee(JavaScript的转译语言,拥有更严格的语法)以及.cjsx(CoffeeScript中的jsx文件)。
  • 特点:所有位于integration目录下的符合上述文件类型的文件,都将被Cypress识别为测试文件。
3. plugins
  • 作用:存放自定义插件或Cypress提供的现成插件。
  • 功能:允许修改或扩展Cypress的内部行为,如动态修改配置信息和环境变量等。
  • 默认文件:默认情况下,插件位于cypress/plugins/index.js中,但也可以配置到另一个目录。
  • 加载:每个测试文件运行之前,Cypress都会自动加载插件文件。
4. support
  • 作用:存放辅助文件,如命令、配置等。
  • 默认文件:默认情况下,支持文件位于cypress/support/index.js中,但也可以配置到另一个目录。
  • 功能:
    可以在其中配置一些辅助函数和命令,以便在测试用例中重复使用。
    通过导入命令文件,可以在测试用例中直接使用定义的命令。
5. cypress.json
  • 作用:Cypress的配置文件,用于定义Cypress项目的配置选项。
    配置选项:
  • baseUrl:用作cy.visit()或cy.request()命令的前缀URL。
  • chromeWebSecurity:是否启用Chrome的安全策略。
  • retries:测试用例的重试次数。
  • env:设置任意环境变量。

案例地址和官网地址

大家可以自己去下载 因为通过命令去下载可能不会生成integration文件 好像是因为最新版本的缘故

案例地址:https://github.com/TheBrainFamily/cypress-cucumber-example
官网地址:https://www.cypress.io/


http://www.ppmy.cn/embedded/137228.html

相关文章

数字后端教程之Innovus report_property和get_property使用方法及应用案例

数字IC后端实现Innovus中使用report_property可以报告出各种各样object的属性,主要有cell,net,PG Net,Pin,时钟clock,时序库lib属性,Design属性,timing path,timin arc等…

发布一个npm组件库包

Webpack 配置 (webpack.config.js) const path require(path); const MiniCssExtractPlugin require(mini-css-extract-plugin); const CssMinimizerPlugin require(css-minimizer-webpack-plugin); const TerserPlugin require(terser-webpack-plugin);module.exports {…

uniapp中使用原生ajax上传文件并携带其他数据,实时展示上传进度

在uniapp开发过程中,我们经常遇到需要上传文件并携带其他数据的场景。本文将详细介绍如何在uniapp中使用原生ajax实现文件上传,并实时展示上传进度,帮助大家轻松应对此类需求。 一、准备工作 在开始之前,请确保你的uniapp项目已…

python爬虫豆瓣top250

注意 1,BeautifulSoup lxml解析器安装 2,代码缩进格式 f.close() import csvimport requests from bs4 import BeautifulSoup# 请求头部 headers {User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) …

【计网不挂科】计算机网络期末考试——【选择题&填空题&判断题&简述题】试卷(4)

前言 大家好吖,欢迎来到 YY 滴计算机网络 系列 ,热烈欢迎! 本章主要内容面向接触过C的老铁 本博客主要内容,收纳了一部门基本的计算机网络题目,供yy应对期中考试复习。大家可以参考 本章是去答案版本。带答案的版本在下…

Python 正则表达式基础教程:简单匹配

Python 正则表达式基础教程:简单匹配 正则表达式(Regular Expression)是一种用于匹配字符串模式的强大工具。在 Python 中,正则表达式广泛用于数据处理、文本分析等任务,能够帮助我们快速找到或替换特定的字符或字符串…

vue-h5:在h5中实现相机拍照加上身份证人相框和国徽框

1.基础功能 参考: https://blog.csdn.net/weixin_45148022/article/details/135696629 https://juejin.cn/post/7327353533618978842?searchId20241101133433B2BB37A081FD6A02DA60 https://www.freesion.com/article/67641324321/ https://github.com/AlexKrat…

面试:TCP、UDP如何解决丢包问题

文章目录 一、TCP丢包原因、解决办法1.1 TCP为什么会丢包1.2 TCP传输协议如何解决丢包问题1.3 其他丢包情况(拓展)1.4 补充1.4.1 TCP端口号1.4.2 多个TCP请求的逻辑1.4.3 处理大量TCP连接请求的方法1.4.4 总结 二、UDP丢包2.1 UDP协议2.1.1 UDP简介2.1.2…