Cypress - 插件

Cypress - 使用插件扩展功能

Cypress 有一个强大的插件系统，允许您扩展其功能。插件可以添加自定义命令、修改 Cypress 的内部行为、与第三方服务集成等等。您可以在 plugins.cypress.io 找到各种社区和官方插件。

插件通常涉及两个主要方面：通过 npm/yarn 安装，并在您的 Cypress 设置中进行配置。

常用插件安装和设置

1. 安装： 大多数插件作为开发依赖项通过 npm 或 yarn 安装。

npm install --save-dev plugin-name
# or
yarn add --dev plugin-name

2. 配置： 这因插件而异：

• 自定义命令： 通常，您需要在 cypress/support/e2e.js 文件（或如果您采用其他结构，则在 cypress/support/commands.js 文件）中导入插件。示例：import 'cypress-plugin-name/commands'; 或 require('cypress-plugin-name/commands');。
• Node 层面任务： 某些插件需要在您的 cypress.config.js（或 cypress.config.ts）文件中的 setupNodeEvents 函数内进行配置。这允许插件在测试执行期间利用 Node.js 的能力（例如，与数据库交互，为组件测试修改 webpack 配置）。

常用插件及示例

1. 文件上传 (cypress-file-upload)

用于测试文件上传功能。

安装： npm install --save-dev cypress-file-upload

设置： 将 import 'cypress-file-upload'; 添加到 cypress/support/e2e.js 文件中。

使用示例：

cy.get('input[type="file"]').attachFile('path/to/your/fixture/file.json');

2. XPath 支持 (@cypress/xpath)

为 Cypress 添加 XPath 选择器功能。

安装： npm install --save-dev @cypress/xpath

设置： 将 require('@cypress/xpath'); 添加到 cypress/support/e2e.js 文件中。

使用示例：

cy.xpath('//button[contains(., "Submit")]').click();

3. 与 iframes 交互 (cypress-iframe)

提供命令以便更轻松地与 iframes 内的元素交互。

安装： npm install --save-dev cypress-iframe

设置： 将 import 'cypress-iframe'; 或 require('cypress-iframe'); 添加到 cypress/support/e2e.js 文件中。

使用示例：

cy.frameLoaded('#my-iframe');
cy.iframe('#my-iframe').find('button#submit-in-iframe').click();

4. 视觉回归测试（例如，cypress-image-snapshot 或 Applitools/Percy）

像 cypress-image-snapshot（用于本地比较）或基于云的服务如 Applitools Eyes 或 Percy 这样的插件允许您捕获屏幕截图并将其与基准图进行比较，以检测视觉变化。

安装 (cypress-image-snapshot)： npm install --save-dev cypress-image-snapshot

设置： 需要将命令添加到 cypress/support/e2e.js，并可能需要在 cypress.config.js 中配置 setupNodeEvents。

// 在 cypress/support/commands.js 或 e2e.js 中
import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
addMatchImageSnapshotCommand();

// 在 cypress.config.js 中
const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      addMatchImageSnapshotPlugin(on, config);
      // ... 其他 node 事件监听器
    },
  },
});

使用示例：

cy.get('.my-component').matchImageSnapshot('component-name');

5. 可访问性测试（例如，cypress-axe）

集成 Axe-core 进行自动化可访问性测试。

安装： npm install --save-dev cypress-axe axe-core

设置： 将 import 'cypress-axe'; 添加到 cypress/support/e2e.js 文件中。

使用示例：

cy.visit('/my-page');
cy.injectAxe();
cy.checkA11y(); // 检查整个页面
cy.checkA11y('.specific-component', { /* options */ }); // 检查特定组件

重要注意事项：

• 始终参考特定插件的文档，获取最新的安装和配置说明。
• cypress.config.js 文件是 Cypress 配置的核心位置，包括涉及 Node.js 能力的插件设置。
• cypress/support/e2e.js 文件在每个 spec 文件执行之前运行，是导入自定义命令或全局配置的理想位置。

延伸阅读：

• Cypress 插件指南
• Cypress 官方插件目录