Cypress安装与使用教程（4）—— 软测大玩家

Cypress安装与使用教程（4）—— 软测大玩家-LMLPHP

阅读目录

1. 接上回
2. Cypress插件
- 2.1 插件安装
- 2.2 实用插件推荐
3. 后话

1. 接上回

上一篇我们介绍了Cypress中的自定义命令和一些高频场景下的对应使用技巧。当然，除了自定义命令外，为了应对日常的各类测试业务场景，我们仍旧需要其他的手段来灵活组合使用。今天就继续带着大家来看看Cypress还有什么其他的对应用法。

2. Cypress插件

除了Cypress自带的功能方法外，我们还可以利用它的另一个强大功能 —— 插件。这可以说是一个让使用者通向另一个新世界的大门。有了插件系统，我们就可以将Cypress的功能进一步进行扩展，来额外为Cypress添加全新的功能以适应更多的各类测试场景。在众多插件中存在着相当多的优秀功能插件，比如自动重试、模拟真实事件、截图甚至于一些非功能性的测试插件。

2.1 插件安装

要使用Cypress插件，我们就必须先将插件系统安装上，在安装了Cypress的前提下，具体参看《Cypress安装与使用教程（1）—— 软测大玩家》。

检查你的Cypress项目目录下是否有plugins文件夹，没有的话可以手动创建一个。在plugins文件夹下创建一个名为index.js的文件，这个文件是之后用来保存和配置Cypress插件的。

然后我们打开cmd，在终端中输入以下命令，来安装对应的插件，这里的name是你需要安装的具体插件名。

npm install cypress-plugin-name --save-dev

安装完成之后我们回到plugins/index.js文件中，在文件中配置并引入插件，同样的插件名name要改成你具体安装的插件名，格式如下：

// plugins/index.js
module.exports = (on, config) => {
  require('cypress-plugin-name/lib/plugin')(on);
};

2.2 实用插件推荐

cypress-plugin-retries是可以让测试用例在失败的时候进行自动重试的插件，一般在一些运行稳定性较差的测试场景中会普遍用到。

安装

npm install cypress-plugin-retries --save-dev

配置插件

module.exports = (on, config) => {
  require('cypress-plugin-retries/lib/plugin')(on);
};

这里我们举一个简单的例子，假设我们有一个网络请求的测试用例，有时由于网络波动或服务器问题，请求可能会出现失败的场景。这里就需要使用cypress-plugin-retries来提高测试用例执行的稳定性。

describe('Network Requests', () => {
  it('should retry on network failure', { retries: 2 }, () => {
    cy.intercept('GET', '/api/data', { forceNetworkError: true });
    cy.visit('/');
    
    cy.get('.data-display').should('contain.text', 'Success');
  });
});

通过上面的这个例子，由于我们使用了cy.intercept拦截了一个GET请求，并强制让它返回网络错误。这样我们的测试用例就会强制错误，而测试用例中使用了 { retries: 2 } 来指定在测试失败时重试的次数为2次。这意味着如果请求失败，Cypress 将会再次尝试运行该测试用例，最多重试2次。所以一旦使用了cypress-plugin-retries这个插件，即使请求由于网络问题失败，测试用例也有机会在重试时成功。简单来说就是提高了测试的鲁棒性，特别是一些需要频繁在网络敏感的测试场景中进行测试的任务。另外需要注意的是，重试的次数也是有一定的讲究的，不可设置的过高，万一功能有一些难以复现的问题出现，就会因为设置了过高的重试次数而导致用例通过，从而隐藏了真正的问题。

cypress-real-events这个插件允许Cypress去模拟一些真实的浏览器事件，比如模拟用户的输入文字的过程、鼠标事件、获取焦点与失焦等，让一些测试用例提供了更为高级和复杂的UI交互事件。

安装

npm install cypress-real-events --save-dev

配置

import 'cypress-real-events/support';

同样的在我们的测试场景中，比如有一个输入框，用户在输入框中输入文字后，页面会显示相应的提示。如果使用了cypress-real-events插件，我们就可以模拟用户输入文字的过程，已验证提示是否正确。

describe('Input Interaction', () => {
  it('should show suggestions as user types', () => {
    cy.visit('/');
    // 模拟用户输入文字
    cy.get('#search-input').realType('Cypress');

    // 验证提示框是否正确显示
    cy.get('.suggestions').should('contain.text', 'Cypress Testing Framework');
  });
});

在上面的例子中，我们使用了realType方法来模拟用户在输入框中输入文字的过程。这比普通的type方法更为真实，能够触发更多与输入相关的事件，从而更全面地测试输入框的交互行为。

cypress-image-snapshot用来进行测试中页面图像快照测试，可以比较页面截图，验证页面的外观是否符合预期。

安装

npm install cypress-image-snapshot --save-dev

配置

import 'cypress-image-snapshot/command';

我们考虑一个场景，假设我们有一个页面，包含了一个动态生成的图表，我们希望能够在每次测试运行时截取图表的截图，并与之前保存的预期截图进行比较，以验证图表的外观是否保持一致。

describe('Chart Snapshot Test', () => {
  it('should match the snapshot', () => {
    cy.visit('/');

    // 等待图表加载
    cy.wait(2000);

    cy.screenshot('chart-snapshot', { capture: 'viewport' });
    cy.compareSnapshot('chart-snapshot');
  });
});

上面的这个例子中，我们使用了cy.screenshot来捕捉当前视口的截图，然后使用cy.compareSnapshot来与之前保存的预期截图进行比较。如果比较失败，那么测试结果也将会变为失败，来告知页面的外观不符合预期结果。

一些注重用户体验的产品与项目中测试团队经常会进行可访问性测试，而cypress-axe则是我们做此类测试中经常会用到的一个插件。

安装

npm install cypress-axe --save-dev

配置

import 'cypress-axe';

比如我们需要对一个登录表单的页面进行对应的可访问性测试，作为测试来说就需要确保该表单在可访问性方面符合标准。而接下来我们会用cy.checkA11y()来触发可访问性检查，当然实际场景不会是如此的简单，如果只需要检查页面中的某一个区域就只要将对应的指向具体的某个组件即可，比如我需要检查这个登录表单的可访问性，就只需要cy.get(‘form’).checkA11y()这样写即可。

describe('Accessibility Test', () => {
  it('should pass accessibility checks for login form', () => {
    // 访问包含登录表单的页面
    cy.visit('/login');

    // 触发 cypress-axe 插件进行可访问性检查
    cy.checkA11y();

    // 或者只检查页面的一部分，比如登录表单区域
    cy.get('form').checkA11y();

    // 可以传入一些配置参数，比如忽略某些规则
    cy.checkA11y({
      runOnly: {
        type: 'tag',
        values: ['wcag2a', 'wcag2aa'],
      },
    });
  });
});

3. 后话

以上就是一些实用的Cypress插件的具体使用方法与场景，那么在我们使用的过程中也需要同时注意一些特殊的情况，一个就是插件与Cypress的版本兼容性，我们需要确保所使用的 Cypress 插件与 Cypress 测试框架的版本兼容。有些插件可能对特定版本的 Cypress 有依赖，所以在使用之前在官网查看对应的版本需求是一个不容忽视的点；另外一般的插件在测试调试或执行的过程中出现报错都可以通过对应的Cypress自身日志来进行问题的调查与定位。

Austin_zhai