Cypress测试框架详解:轻松实现端到端自动化测试

news2025/4/7 19:07:12

端到端自动化测试工具市场中,Cypress正以其易用性和强大功能,迅速成为开发者和测试人员的首选工具之一。无论是前端开发还是测试,Cypress都能在性能和效率上脱颖而出。

那么,Cypress具体能为端到端测试带来哪些便利?它有哪些核心功能和独特优势呢?

Cypress 是一个功能强大、易于使用的自动化测试工具,适用于现代 Web 应用的端到端测试。它的自动化处理、实时反馈、调试功能和易于集成的特性,使得它成为现在测试人员的热门测试框架选择

随着前端框架(如React、Vue、Angular)的流行,复杂的交互场景和高频迭代已成为常态。传统的手动测试或旧式自动化测试工具,往往无法满足现代化开发流程对快速反馈高稳定性的要求,而Cypress的兴起正好填补了这一需求空白。

Cypress是一款专为现代前端构建的测试工具,它与传统的Selenium等工具相比,具有以下特点:

  1. 实时运行与调试:Cypress支持实时查看测试结果和运行状态,调试体验友好。
  2. 内置等待机制:无需显式添加等待时间,Cypress能自动识别页面加载或元素渲染完成后继续执行测试。
  3. 快速搭建和配置:零复杂配置,新手也能快速上手。
    例如,在一个电商网站的购物车功能测试中,使用Cypress可以通过简单的链式命令快速完成用户登录、商品添加到购物车以及订单提交的全流程验证。

什么是 Cypress 框架?

Cypress 是一款开源的 JavaScript 自动化测试框架,是基于 NodeJS 的现代自动化工具,专为端到端测试设计,用于简化 Web 应用的测试自动化。支持使用 JavaScript 或 TypeScript 编写测试脚本。虽然推出时间较短,但凭借其易用性和高效性,Cypress 已成为测试人员实施自动化测试的热门选择。

为什么选择 Cypress 进行自动化测试?

Cypress 因以下特点备受青睐:

  1. 跨浏览器测试 支持在多种浏览器上运行测试,包括 Chrome、Firefox、Edge 等

  2. 简单易用 安装 Cypress 非常简单,无需复杂的依赖配置,适用于新老项目

  3. 无缝集成 与 CI 工具(如 Jenkins)持续集成结合。

  4. 自动等待 自动等待页面元素加载,无需显式的等待或sleep语句。

  5. 强大的调试能力内置调试工具可与浏览器开发者工具集成,方便排查问题。

如何安装 Cypress?

环境要求:

  1. 安装 Visual Studio Code。

  2. 安装 NodeJS。

安装步骤:

  1. 创建一个新文件夹(如 cypressdemo)。

  2. 在文件夹内打开终端。

  3. 执行以下命令安装 Cypress:

    npm install cypress --save-dev

  4. 安装完成后,启动 Cypress:

    npx cypress open

此命令将打开 Cypress 测试运行器,可以选择E2E Testing或者Component Testing。

图片

5. 配置Cypress

这里我们选择E2E Testing,选择默认配置继续

图片

图片

选择Cypress给我们生成的一些示例测试脚本:

图片

Cypress 文件夹结构介绍

图片

当Cypress工程结构初始化完毕之后,我们可以使用VScode打开工程,存在以下目录结构:

  • cypress cypress核心目录,包含所有与测试相关的子文件夹和文件。默认情况下,Cypress 在运行 npx cypress open 后会自动生成该目录。

  • node_modules 存储 Cypress 和其他 NPM 依赖项的文件。

  • cypress.config.js 全局配置文件,用于设置 Cypress 的运行参数

  • package.json 定义 Cypress 相关依赖和运行脚本

  • package-lock.json npm 自动生成的一个文件,它用于记录项目中所有已安装的依赖项的精确版本

cypress核心目录结构如下:

  • e2e:存放测试用例的文件夹。

  • fixtures:存储测试数据,例如 JSON 文件。

  • support:包含自定义命令和全局设置的文件夹。

编写第一个 Cypress 测试脚本

我们在 e2e 文件夹下创建名为 demo.cy.js 的测试文件:

describe('我的第一个 Cypress 测试', () => {
  it('访问网站并验证标题', () => {
    cy.visit('https://www.baidu.com');
    cy.title().should('include', '百度一下');
  });
});

如何运行 Cypress 测试?

Cypress 提供两种测试运行方式:

1、使用 Cypress 测试运行器(UI)


执行以下命令打开测试运行器:

npx cypress open

选择 demo.cy.js 文件运行测试。

图片

2、使用命令行(CLI)运行测试
 

命令示例:

npx cypress run --spec "./cypress/e2e/demo.cy.js"

以上命令在无头模式下运行测试,后台执行,无需启动浏览器。

图片

Cypress 工作机制

图片

Cypress 的测试执行流程如下:

  1. 用户与应用交互后,测试脚本向 Cypress Runner 发送指令。

  2. Runner 与代理服务器通信,向应用服务器发送请求。

  3. 应用服务器处理请求并返回响应。

  4. Cypress Runner 记录快照和视频。

  5. 测试人员根据结果验证应用的功能。

如果你还在寻找更高效的端到端测试工具,不妨尝试Cypress!通过它直观的界面和强大的功能,轻松优化测试效率,让你的开发和测试协作更上一层楼。

从功能齐全到调试便捷,Cypress不仅提升了测试效率,更重新定义了端到端自动化测试的可能性。

“在自动化测试的赛道上,Cypress如同一台高性能跑车,为你的测试之旅提速前行!”

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2268652.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Nginx - 整合lua 实现对POST请求的参数拦截校验(不使用Openresty)

文章目录 概述步骤 1: 安装 Nginx 和 Lua 模块步骤 2: 创建 Lua 脚本用于参数校验步骤 3: 配置 Nginx 使用 Lua 脚本写法二: 状态码写法三 : 返回自定义JSON复杂的正则校验 步骤 4: 测试和验证ngx.HTTP_* 枚举值 概述 一个不使用 OpenResty 的 Nginx 集…

在 React 项目中安装和配置 Three.js

React 与 Three.js 的结合 :通过 React 管理组件化结构和应用逻辑,利用 Three.js 实现 3D 图形的渲染与交互。使用这种方法,我们可以在保持代码清晰和结构化的同时,实现令人惊叹的 3D 效果。 在本文中,我们将以一个简…

logstash 对配置文件conf敏感信息加密处理

logstash的配置文件conf经常会涉及敏感信息,比如ES,数据库的账户密码等,以下使用logstash导入ORACLE为例子,加密隐藏ORACLE的密码。 1.先创建keystore,可以不设置keystore密码,直接选择y 在logstash目录下&#xff0…

为什么MoE推理效率更高:精简FFN

MoE全称是“混合专家”,它由多个专家网络和一个门控网络组成……整个MoE完全复用了Transformer的结构,只是将其中的FFN层替换成了MoE层。MoE层里的门控网络其实就是个专家分类器,每次根据输入Token生成专家的概率分布,然后选择排序靠前的K个专家进行Token处理,最后再将K个…

课设CLion连接Ubuntu14makeQt项目出错解决汇总

在这之前需要注意以下几点: 1、需要 确保CLion能连接Ubuntu14 2、cmakelist.txt文件配置 3、知道部署路径: 问题一:/usr/bin/ld: cannot open output file GreedySnake: Is a directory 否则就会出现make以后应该生成一个可执行文件&…

第T4周:TensorFlow实现猴痘识别(Tensorboard的使用)

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 目标: 1、学习tensorboard的使用 具体实现: (一)环境: 语言环境:Python 3.10 编 译 器…

LeetCode:513.找二叉树左下角的

跟着carl学算法,本系列博客仅做个人记录,建议大家都去看carl本人的博客,写的真的很好的! 代码随想录 LeetCode:513.找二叉树左下角的 给定一个二叉树的 根节点 root,请找出该二叉树的 最底层 最左边 节点的…

【Redis】Redis 典型应用 - 缓存 (cache)

目录 1. 什么是缓存 2. 使用 Redis 作为缓存 3. 缓存的更新策略 3.1 定期生成 3.2 实时生成 4. 缓存的淘汰策略 5. 缓存预热, 缓存穿透, 缓存雪崩 和 缓存击穿 关于缓存预热 (Cache preheating) 关于缓存穿透 (Cache penetration) 关于缓存雪崩 (Cache avalanche) 关…

【Rust自学】7.6. 将模块拆分为不同文件

喜欢的话别忘了点赞、收藏加关注哦(加关注即可阅读全文),对接下来的教程有兴趣的可以关注专栏。谢谢喵!(・ω・) 7.6.1. 将模块的内容移动到其他文件 如果在模块定义时模块名后边跟的是;而不是代码块&#…

随机种子定不死找bug

记录一次debug的心路历程 在运行别人的开源项目时遇到了随机种子定不死的情况, 运行一开始会有1e-5次方左右的误差, 后面误差会越来越大。 一开始以为是随机种子没有定死, 使用的以下代码固定的随机种子: torch.manual_seed(seed)torch.cuda.manual_seed(seed)torch.cuda.manu…

STM32学习之 按键/光敏电阻 控制 LED/蜂鸣器

STM32学习之 按键/光敏电阻 控制 LED/蜂鸣器 1、按键控制 LED 按键:常见的输入设备,按下导通,松手断开 按键抖动:由子按键内部使用的是机械式弹簧片来进行通断的、所以在按下和松手的瞬间会伴随有一连串的抖动 按键控制LED接线图: 要有工程…

深入理解Redis:从理论到实践的Java之旅

Redis,这个开源的内存数据结构存储系统,自2009年诞生以来,凭借其丰富的数据结构、快速的读写性能以及高度的可扩展性,迅速成为了分布式系统和高并发应用中的明星组件。本文将带你深入理解Redis,并通过Java语言的实践示…

VS Code中怎样查看某分支的提交历史记录

VsCode中无法直接查看某分支的提交记录,需借助插件才行,常见的插件如果git history只能查看某页面的改动记录,无法查看某分支的整体提交记录,我们可以安装GIT Graph插件来解决这个问题 1.在 VSCode的插件库中搜索 GIT Graph安装&a…

Flutter适配HarmonyOS实践

大家在知道纯血鸿蒙到来的时候一定很疑惑,使用跨平台语言的到底该怎么办,不管使用Flutter还是使用原生鸿蒙开发,都会考虑到一个成本问题,特别是一些无法支持鸿蒙开发团队,已经使用跨平台开发已经很成熟的公司或者团队。…

XIAO Esp32S3 播放网络Mp3

本文旨在使用XIAO Esp32S3 播放网络Mp3 所需硬件 max98357 接线 Xiao Esp32 S3Max983574LRC5BCLK 6DIN5VVinGNDGND代码: #include "Arduino.h" #include "WiFiMulti.h" #include "Audio.h"// Digital I/O used #def

智能边缘计算×软硬件一体化:开启全场景效能革命新征程(高校开发者作品)

边缘智能技术快速迭代,并与行业深度融合。它正重塑产业格局,催生新产品、新体验,带动终端需求增长。为促进边缘智能技术的进步与发展,拓展开发者的思路与能力,挖掘边缘智能应用的创新与潜能,高通技术公司联…

ubuntu22 安装CUDA

在Ubuntu系统中,使用nvidia-smi命令可以看到当前GPU信息,在右上角可以看到CUDA Version,意思是最大支持的CUDA版本号。 安装下载 CUDA Toolkit 11.6 Downloads | NVIDIA Developer https://developer.nvidia.com/cuda-downloads?target_osL…

VectorCAST入门指导

文章目录 1. VectorCAST 概述2. 启动 VectorCAST(Windows用户)2. 故障排除3. VectorCAST 界面4. 创建一个 VectorCAST 项目5. 设置工作目录6. 创建一个新项目7. 添加一个单元测试环境8. 添加测试用例9. 执行所有测试1. VectorCAST 概述 VectorCAST是一套测试自动化工具: Vecto…

12.30 linux 文件操作,磁盘分区挂载

ubuntu 在linux 对文件的相关操作【压缩,打包,软链接,文件权限】【head,tail,管道符,通配符,find,grep,cut等】脑图-CSDN博客 1.文件操作 在家目录下创建目录文件&#…

Zabbix 监控平台 添加监控目标主机

Zabbix监控平台是一个企业级开源解决方案,用于分布式系统监视和网络监视。它由Zabbix Server和可选组件Zabbix Agent组成,通过C/S模式(客户端-服务器模型)采集数据,并通过B/S模式(浏览器-服务器模型&#x…