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

Cypress 自动化测试详解：从安装到实战

Cypress 是一个强大的端到端（End-to-End, E2E）功能测试框架，基于 Node.js
构建，支持本地浏览器直接模拟测试，并具有测试录屏功能，极大地方便了测试失败时的场景重现与问题定位。本文将详细介绍 Cypress
的安装、配置以及一个实际的自动化测试示例。

一、安装 Cypress

1. 安装 Node.js

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

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

sh
node -v
npm -v

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

1. 配置 Cypress

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

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

二、启动 Cypress

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

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

• 作用：存放集成测试用例。
• 文件类型：支持多种文件格式，包括.js（普通JavaScript文件）、.jsx（带有扩展的JavaScript文件，可包含处理XML的ECMAScript）、.coffee（JavaScript的转译语言，拥有更严格的语法）以及.cjsx（CoffeeScript中的jsx文件）。
• 特点：所有位于integration目录下的符合上述文件类型的文件，都将被Cypress识别为测试文件。

3. plugins

• 作用：存放自定义插件或Cypress提供的现成插件。
• 功能：允许修改或扩展Cypress的内部行为，如动态修改配置信息和环境变量等。
• 默认文件：默认情况下，插件位于cypress/plugins/index.js中，但也可以配置到另一个目录。
• 加载：每个测试文件运行之前，Cypress都会自动加载插件文件。

4. support

• 作用：存放辅助文件，如命令、配置等。
• 默认文件：默认情况下，支持文件位于cypress/support/index.js中，但也可以配置到另一个目录。
• 功能： 可以在其中配置一些辅助函数和命令，以便在测试用例中重复使用。 通过导入命令文件，可以在测试用例中直接使用定义的命令。

5. cypress.json

• 作用：Cypress的配置文件，用于定义Cypress项目的配置选项。 配置选项：
• baseUrl：用作cy.visit()或cy.request()命令的前缀URL。
• chromeWebSecurity：是否启用Chrome的安全策略。
• retries：测试用例的重试次数。
• env：设置任意环境变量。

案例地址和官网地址

大家可以自己去下载 因为通过命令去下载可能不会生成integration文件 好像是因为最新版本的缘故

案例地址：https://github.com/TheBrainFamily/cypress-cucumber-example
官网地址：https://www.cypress.io/