news 2026/6/8 18:07:34

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/6/2 8:37:40

拓竹科技-bambu studio 强度高级设置: 手办党终极抄作业!拓竹H2C参数全解析

🎯拓竹科技-bambu studio 强度高级设置: 手办党终极抄作业!拓竹H2C参数全解析 目录 🎯拓竹科技-bambu studio 强度高级设置: 手办党终极抄作业!拓竹H2C参数全解析 🛠️ 先看懂“开局配置”:打好模型的底层基础 💪 「强度」标签深度拆解:模型的“骨架与皮肤”全靠…

作者头像 李华
网站建设 2026/6/2 17:12:27

做拓竹科技智能客服的一些理解:明明能解决问题,为何我们还是偏爱人工客服?藏在人性里的底层逻辑

做拓竹科技智能客服的一些理解:明明能解决问题,为何我们还是偏爱人工客服?藏在人性里的底层逻辑 目录 做拓竹科技智能客服的一些理解:明明能解决问题,为何我们还是偏爱人工客服?藏在人性里的底层逻辑 而人对人的沟通,恰好契合了人性底层的社交需求、认知习惯、情绪诉求…

作者头像 李华
网站建设 2026/6/4 3:01:13

手握选择权,真的是内心强大的底层逻辑吗?面对现实,解决问题

手握选择权,真的是内心强大的底层逻辑吗?面对现实,解决问题 目录手握选择权,真的是内心强大的底层逻辑吗?面对现实,解决问题一、为什么“手握选择权”有道理?二、这个观点的矫正与局限三、更落地…

作者头像 李华
网站建设 2026/6/6 20:03:40

这些“办事玄学”,真的是成年人的社交生存指南吗?

这些“办事玄学”,真的是成年人的社交生存指南吗? 目录 这些“办事玄学”,真的是成年人的社交生存指南吗? 一、为什么这些说法有道理? 二、这些“玄学”的矫正与局限 三、更落地的社交原则 网上流传的这几条“办事玄学”,看起来都是人情世故的“实用技巧”,但我们不妨拆…

作者头像 李华
网站建设 2026/6/5 2:51:39

3步完成右键菜单效率革命:ContextMenuManager让Windows操作提速80%

3步完成右键菜单效率革命:ContextMenuManager让Windows操作提速80% 【免费下载链接】ContextMenuManager 🖱️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 你是否注意到,每次右键…

作者头像 李华
网站建设 2026/6/8 10:34:57

MDK在工业控制中的应用:入门必看指南

以下是对您提供的博文内容进行 深度润色与工程化重构后的版本 。我以一位深耕工业嵌入式十余年的技术博主身份,摒弃模板化表达、弱化AI痕迹,强化真实开发语境下的经验沉淀与逻辑穿透力。全文采用自然叙述流,融合教学性、实战性与思辨性&…

作者头像 李华