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

news2024/11/14 11:58:12

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

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

在这里插入图片描述

一、安装 Cypress

安装 Node.js

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

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

sh
node -v
npm -v

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

配置 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识别为测试文件。