正文

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

cat2007
cat2007 V管理员 /22阅读/0评论
0409

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

Cypress 是一个强大的端到端（End-to-End, E2E）功能测试框架，基于 Node.js

构建，支持本地浏览器直接模拟测试，并具有测试录屏功能，极大地方便了测试失败时的场景重现与问题定位。本文将详细介绍 Cypress

的安装、配置以及一个实际的自动化测试示例。

前端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/