news 2026/3/7 7:21:28

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Cypress测试框架详解:轻松实现端到端自动化测试

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

前言

什么是 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
  1. 安装完成后,启动 Cypress:

npx cypress open

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

5. 配置Cypress

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

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

Cypress 文件夹结构介绍

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

  • cypresscypress核心目录,包含所有与测试相关的子文件夹和文件。默认情况下,Cypress 在运行npx cypress open后会自动生成该目录。
  • node_modules存储 Cypress 和其他 NPM 依赖项的文件。
  • cypress.config.js全局配置文件,用于设置 Cypress 的运行参数
  • package.json定义 Cypress 相关依赖和运行脚本
  • package-lock.jsonnpm 自动生成的一个文件,它用于记录项目中所有已安装的依赖项的精确版本

cypress核心目录结构如下:

  • e2e:存放测试用例的文件夹。
  • fixtures:存储测试数据,例如 JSON 文件。
  • support:包含自定义命令和全局设置的文件夹。

编写第一个 Cypress 测试脚本

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

describe('我的第一个 Cypress 测试', () => { 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. 测试人员根据结果验证应用的功能。

最后感谢每一个认真阅读我文章的人,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走:

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/3/3 3:33:27

RePKG资源管理工具:提升Wallpaper Engine效率的完整指南

RePKG资源管理工具:提升Wallpaper Engine效率的完整指南 【免费下载链接】repkg Wallpaper engine PKG extractor/TEX to image converter 项目地址: https://gitcode.com/gh_mirrors/re/repkg RePKG是一款专为Wallpaper Engine设计的资源管理工具&#xff0…

作者头像 李华
网站建设 2026/3/4 12:40:57

零基础玩转XNB文件处理:游戏资源定制从入门到精通

零基础玩转XNB文件处理:游戏资源定制从入门到精通 【免费下载链接】xnbcli A CLI tool for XNB packing/unpacking purpose built for Stardew Valley. 项目地址: https://gitcode.com/gh_mirrors/xn/xnbcli 想自定义《星露谷物语》的游戏资源却不知从何下手…

作者头像 李华
网站建设 2026/3/6 6:58:24

Z-Image-Turbo社区潜力巨大,未来可期

Z-Image-Turbo社区潜力巨大,未来可期 Z-Image-Turbo不是又一个参数堆砌的模型,而是一次对“真正能用”的重新定义。当别人还在为20步采样等待时,它用8步交出照片级画面;当多数开源模型在中文文字渲染上频频翻车,它让“…

作者头像 李华
网站建设 2026/3/4 7:02:08

亲测科哥版Emotion2Vec+系统:9种情绪精准识别效果惊艳

亲测科哥版Emotion2Vec系统:9种情绪精准识别效果惊艳 1. 开箱即用的语音情感识别体验 你有没有过这样的时刻——听一段客户录音,却拿不准对方是真生气还是只是语速快?看一段产品反馈语音,分不清是满意还是勉强应付?在…

作者头像 李华