Cypress 集成 Allure 报告框架详细指南

最新推荐文章于 2025-06-11 19:49:06 发布

朱公子的Note

最新推荐文章于 2025-06-11 19:49:06 发布

阅读量1.2k

点赞数 30

CC 4.0 BY-SA版权

分类专栏： python自动化文章标签： Cypress集成Allure

本文链接：https://blog.csdn.net/m0_58552717/article/details/145190299

python自动化专栏收录该内容

202 篇文章

订阅专栏

随着现代自动化测试需求的不断增长，Cypress 已成为前端测试的热门工具。而在测试报告领域，Allure 以其强大的可视化和丰富的数据展示，成为自动化测试报告的首选方案之一。那么，如何将 Cypress 与 Allure 报告框架无缝集成呢？今天带你深入解析，快速上手！

Cypress 测试框架如何生成专业的 Allure 测试报告？实现的关键步骤有哪些？

Cypress 提供了强大的自动化测试能力，而 Allure 则为测试结果提供了丰富、直观的展示方式。将两者结合使用，不仅能够提高测试效率，还能够让团队更快速地发现和解决问题，提升软件的质量。

Cypress 是一个快速、可靠、易于使用的前端自动化测试框架，广泛应用于 Web 应用的测试中。而 Allure 则是一个强大的测试报告框架，可以生成结构化、直观的测试报告，帮助开发和测试人员快速了解测试的执行结果。在实际开发中，结合使用 Cypress 和 Allure，可以大大提升测试报告的可读性与实用性。本文将详细介绍如何在 Cypress 集成 Allure，生成美观的测试报告。

为什么选择 Cypress 和 Allure？

Cypress 的优势：
- 支持现代 JavaScript 框架；
- 易于使用的交互式调试工具；
- 快速运行和稳定的测试执行。
Allure 的亮点：
- 可视化的测试报告；
- 支持多语言、多框架；
- 丰富的测试数据统计和展示。

案例场景：
某团队在 E2E 测试中使用 Cypress，测试结果需要以直观的方式向团队汇报，通过引入 Allure 报告框架，开发和测试团队的沟通效率显著提高。

一、前期准备

需要确保项目已经安装了 Cypress。如果尚未安装，可以使用以下命令进行安装：

npm install cypress@12.14.0 --save-dev

除了 Cypress，我们还需要安装 Allure 相关的工具和插件。Allure 是一个第三方报告框架，因此我们需要借助 @shelex/cypress-allure-plugin这个开源项目将 Cypress 与 Allure 报告集成，对应地址：https://github.com/Shelex/cypress-allure-plugin

需要注意的是使用该项目集成Allure报告时，对于Cypress版本是有要求的，目前Cypress V13版本+暂不支持，我们可以使用v12.14.0版本

同时，我们还需要安装 Allure 的命令行工具来生成最终的报告。

在命令行中运行以下命令，安装所需的工具：

npm install --save-dev @shelex/cypress-allure-plugin
npm install -g allure-commandline --save-dev

二、配置 Cypress 和 Allure 插件

1. 配置插件

首先，我们需要配置 Cypress 插件，使其能够支持 Allure。在项目的 cypress.config.js 文件中，加入以下代码来启用 Allure 插件：

对应代码如下：

const { defineConfig } = require("cypress");
const allureWriter = require('@shelex/cypress-allure-plugin/writer');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      allureWriter(on, config); // 引入 Allure 插件
      return config;
    },
    env: {
      allure: true, //使Allure生效
    },
  },
});

上述代码中，我们通过 allureWriter 来启用 Allure 插件，使得 Cypress 在测试过程中生成 Allure 格式的结果。

2. 配置支持文件

接下来，在 cypress/support/e2e.js 文件中引入 Allure 插件：

import '@shelex/cypress-allure-plugin'; // 引入 Allure 插件

这样，Cypress 的测试用例就能够使用 Allure 插件提供的功能了。

三、编写测试用例

现在，我们已经完成了必要的配置，接下来可以编写一些简单的 Cypress 测试用例。以下是一个基本的测试用例：

describe('百度测试', function () {
    it('搜索测试', function () {
        cy.visit('https://www.baidu.com'); // 访问网页
        cy.get('#kw').type('lemon');
        cy.get('#su').click();

        // 添加 Allure 标签
        cy.allure().feature('搜索模块').story('成功搜索');
    });
});

在这个测试用例中，我们通过 cy.allure().feature() 和 cy.allure().story() 添加了 Allure 的标签，用来描述测试的功能和场景。这样，生成的报告中就能更清晰地显示该测试用例的背景信息。