对于测试开发来说，最头疼的莫过于 flaky tests——同一条测试，有时候过，有时候失败，还没规律。今天我们就聊聊如何用 自定义 Cypress 插件，让测试稳定、易维护，同时提升工作效率。

为什么需要自定义插件？

如果你在做端到端测试，经常会遇到这些情况：

  • 页面动画、微调器挡住按钮，cy.click() 报错

  • GraphQL / REST 数据异步加载，元素还没渲染

  • 网络请求偶尔慢或重复触发

传统解决方案：

cy.wait(500)  // 等半秒再操作

问题：

  • 测试慢

  • 易失败

  • 调试困难

✅ 核心问题是：盲目等待不如智能等待。插件可以让测试像“人眼”一样，等页面真正稳定再操作。

从自定义命令到插件

基础自定义命令

// cypress/support/commands.js
Cypress.Commands.add('waitForSpinnerToDisappear', () => {
  cy.get('.loading-spinner', { timeout: 10000 }).should('not.exist');
});

小项目可以用，但逻辑无法跨项目复用，且仅能操作浏览器端。

插件化思路

  • 自定义命令 → 浏览器端操作

  • Node.js 后端任务 → 文件操作、日志、复杂逻辑

图片

八个实用经验（针对日常工作）

  1. 聚焦核心痛点不要做“通用工具库”，先解决最常见问题。

  2. 可扩展架构

cy.waitUntilStable(() => {
  cy.get('#special-element').should('be.visible');
});

  1. 直观、可调试Cypress.log() 帮你看到插件在做什么，调试更轻松。

  2. 充分测试插件

    • 单元测试（Jest）

    • 端到端测试（独立 Cypress 实例）

  3. 小步迭代先解决动画等待 → 再加网络空闲等待 → 再加其他自定义逻辑

  4. 文档和示例

cy.get('#open-modal-btn').click();
cy.waitUntilStable().then(() => {
    cy.get('.modal-content').should('be.visible');
    cy.get('.modal-title').should('contain', '重要信息');
});

  1. 可调参数设计

cy.waitForNetworkIdle({ settleTime: 250 });

  1. 自动化维护CI/CD 流程自动跑插件测试，保证新版本 Cypress 不破坏插件功能。

插件目录结构建议

your-plugin/
├── package.json
├── README.md
├── types.d.ts        # TypeScript 可选
└── src/
    ├── index.js      # Node.js 后端逻辑
    └── support.js    # 浏览器端自定义命令

Node.js 后端任务示例

module.exports = (on, config) => {
  on('task', {
    logMessage(message) {
      console.log(`[Plugin Log]: ${message}`);
      return null;
    },
    // 可以增加更多任务，例如清理文件夹、读取 JSON
  });
  return config;
};

浏览器端自定义命令示例

Cypress.Commands.add('login', (username, password) => {
  cy.log(`登录用户 ${username}`);
  cy.visit('/login');
  cy.get('#username').type(username);
  cy.get('#password').type(password);
  cy.get('#submit').click();
});

实战示例

示例 1：读取 JSON 数据

cy.task('readJson', 'test-data/userData.json').then((data) => {
  cy.get('input#name').type(data.name);
  cy.get('input#email').type(data.email);
});

示例 2：测试前清理文件夹

describe('报表测试', () => {
  before(() => {
    cy.task('cleanFolder', 'cypress/reports');
  });
});

sequenceDiagram
    participant T as 测试用例
    participant P as 插件任务
    participant F as 文件系统
    T->>P: 调用 cleanFolder
    P->>F: 清空 reports 文件夹
    F-->>P: 完成
    P-->>T: 返回

最佳实践

  • 命名清晰：一眼看出插件功能

  • 版本管理规范：Major.Minor.Patch

  • 文档完整：安装、API、示例

  • CI/CD 自动化：保证稳定性

写在最后

自定义 Cypress 插件可以帮助测试开发者：

  • 避免 flaky tests

  • 提高测试效率

  • 简化重复操作

  • 增强团队对 CI/CD 流程的信任

从日常工作痛点出发，小步迭代、封装插件、记录流程，让测试更稳定、更高效。

 推荐阅读

* https://blog.csdn.net/chengzi_beibei/article/details/150393633?spm=1001.2014.3001.5501

* https://blog.csdn.net/chengzi_beibei/article/details/150393354?spm=1001.2014.3001.5501

* https://blog.csdn.net/chengzi_beibei/article/details/150393354?spm=1001.2014.3001.5501

 学社精选

技术成长路线

系统化进阶路径与学习方案

  • 人工智能测试开发路径
  • 名企定向就业路径
  • 测试开发进阶路线
  • 测试开发高阶路线
  • 性能测试进阶路径
  • 测试管理专项提升路径
  • 私教一对一技术指导
  • 全日制 / 周末学习计划
  • 公众号：霍格沃兹测试学院
  • 视频号：霍格沃兹软件测试
  • ChatGPT体验地址：霍格沃兹测试开发学社
  • 霍格沃兹测试开发学社

企业级解决方案

测试体系建设与项目落地

技术平台与工具

自研工具与开放资源

人工智能测试开发学习专区

# 人工智能
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

java学习 day8

首先在main.js里面new 一个vue对象，然后router 指定路由，redner 是把import 过来的 的app.vue页面做一个视图渲染让他变成dom(从静态的vue变成活的dom树).然底下mount是挂载的意思，就是把挂在id=app的html页面也就是index.html页面。打包只需点击build就可以了。这张图解决了之前困扰我已久的一个疑惑，就是异步交互，之前刷油管，我想要

avatar 2048 AI社区
cover

GEO优化投资决策全案：价格、流程与BugooAI布谷的实效

avatar 2048 AI社区

人工智能基础、核心模型、工程实践及前沿应用基本知识

要获得所有30题的详尽答案，直接查阅整理好的专业资料是最高效的方式。人工智能是一个广阔的领域，旨在让机器能够执行通常需要人类智能的任务。，提供可以直接用于面试作答的要点和逻辑。以下是几个贯穿AI面试始终的“必考题”的解析范本，你可以参照此逻辑准备其他题目。为例，展示完整的解析结构，并为你提供获取全部问题详细解析的最有效路径。好的，我们先梳理一下人工智能相关的基本知识，然后重点解释。正是为了解决上述

avatar 2048 AI社区