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

字节自动化测试

于 2025-05-23 14:22:19 发布

阅读量788

点赞数 18

分类专栏：软件测试程序员自动化测试文章标签：前端功能测试职场经验深度学习自动化测试软件测试程序员

本文链接：https://blog.csdn.net/software_test010/article/details/148167591

版权

程序员同时被 3 个专栏收录

1441 篇文章

订阅专栏

软件测试

1435 篇文章

订阅专栏

自动化测试

842 篇文章

订阅专栏

📝 面试求职： 「面试试题小程序」，内容涵盖测试基础、Linux操作系统、MySQL数据库、Web功能测试、接口测试、APPium移动端测试、Python知识、Selenium自动化测试相关、性能测试、性能测试、计算机网络知识、Jmeter、HR面试，命中率杠杠的。（大家刷起来…）

📝 职场经验干货：

软件测试工程师简历上如何编写个人信息（一周8个面试）

软件测试工程师简历上如何编写专业技能（一周8个面试）

软件测试工程师简历上如何编写项目经验（一周8个面试）

软件测试工程师简历上如何编写个人荣誉（一周8个面试）

软件测试行情分享（这些都不了解就别贸然冲了.）

软件测试面试重点，搞清楚这些轻松拿到年薪30W+

软件测试面试刷题小程序免费使用（永久使用）

一、安装Cypress

1. 安装 Node.js

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

安装完成后，打开命令行工具（cmd 或 PowerShell），输入以下命令以确认安装成功：

　　sh
　　node -v
　　npm -v

2. 安装 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 及其依赖。

3. 配置 Cypress

在项目根目录下，创建一个 package.json 文件（如果 npm init 没有自动生成），并添加以下配置，以便可以通过 npm

命令启动 Cypress：

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

二、启动 Cypress

现在，你可以通过以下命令启动 Cypress：

　　sh
　　npx cypress open

　　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

作用：存放集成测试用例。