news 2026/7/15 4:45:00

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/7/15 3:30:48

颠覆级8K视频下载工具:DownKyi全场景资源保存解决方案

颠覆级8K视频下载工具:DownKyi全场景资源保存解决方案 【免费下载链接】downkyi 哔哩下载姬downkyi,哔哩哔哩网站视频下载工具,支持批量下载,支持8K、HDR、杜比视界,提供工具箱(音视频提取、去水印等&#…

作者头像 李华
网站建设 2026/7/15 3:30:46

LeagueAkari英雄联盟辅助工具实战手册:从入门到大师的效率提升指南

LeagueAkari英雄联盟辅助工具实战手册:从入门到大师的效率提升指南 【免费下载链接】LeagueAkari ✨兴趣使然的,功能全面的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/LeagueAkari …

作者头像 李华
网站建设 2026/7/15 3:32:09

写入、查询、可控性:我做时序数据库选型时最在意的三件事

🧠 时序数据库选型这件事,到底在选什么 很多技术负责人第一次接触时序数据库选型,直觉会把它当成一类“更窄的数据库”。 真正跑进生产之后才会发现,它更像一整套围绕时间序列数据构建的系统组合。 你选的从来不止一个产品名。 …

作者头像 李华
网站建设 2026/7/15 4:28:25

解锁视频转文字新方式:Bili2text智能转换效率工具全解析

解锁视频转文字新方式:Bili2text智能转换效率工具全解析 【免费下载链接】bili2text Bilibili视频转文字,一步到位,输入链接即可使用 项目地址: https://gitcode.com/gh_mirrors/bi/bili2text 在信息爆炸的数字时代,视频已…

作者头像 李华
网站建设 2026/7/15 4:30:30

三步掌握炉石传说游戏增强工具:从安装到精通的玩家实用指南

三步掌握炉石传说游戏增强工具:从安装到精通的玩家实用指南 【免费下载链接】HsMod Hearthstone Modify Based on BepInEx 项目地址: https://gitcode.com/GitHub_Trending/hs/HsMod 每天登录炉石传说完成日常任务需要40分钟?重复开包操作让你手指…

作者头像 李华