使用 Cypress 自定义命令动态添加链式操作

本文将介绍如何使用 Cypress 自定义命令，根据用户传入的参数动态地为元素添加链式操作。重点在于利用 expect 包装器处理断言，并讨论了动态添加 Cypress 命令的可能性和局限性。通过学习本文，你将能够更灵活地编写 Cypress 测试，并更好地理解 Cypress 的工作原理。

动态添加断言

Cypress 提供了强大的断言机制，should 命令可以链式调用各种断言方法。但是，如果我们需要根据用户传入的参数动态地添加断言，该如何实现呢？一种方法是利用 expect 包装器。

should(‘be.visible’) 这样的断言，其底层语法实际上是 expect(subject).to.be.visible。to、be、visible 只是 expect(subject) 包装器的属性。因此，我们可以利用这一点，动态地添加断言。

以下是一个示例：

Cypress.Commands.add(   'selectButton',   (text: string, ...actionTypes: string[]) => {     cy.get('button').contains(text).then($el => {       const expectWrapper = expect($el);  // wraps subject for chain of assertions        [...actionTypes].forEach(actionType => {         expectWrapper[actionType];       });     });   } );

在这个例子中，selectButton 命令接受一个按钮文本 text 和一个断言类型数组 actionTypes 作为参数。首先，我们使用 cy.get(‘button’).contains(text) 获取到目标按钮元素。然后，我们使用 expect($el) 创建一个 expect 包装器。

接下来，我们遍历 actionTypes 数组，对于每个断言类型，我们直接访问 expectWrapper 的对应属性，从而动态地添加断言。

例如，如果我们这样调用 cy.selectButton(‘Send’, ‘be’, ‘visible’, ‘be’, ‘disabled’)，实际上就相当于执行了：

cy.get('button').contains('Send').then($el => {   expect($el).be.visible.be.disabled; });

注意事项：

• actionTypes 数组中的元素必须是 expect 包装器支持的属性，例如 be、visible、disabled 等。
• 这种方法只适用于断言，不适用于执行 Cypress 命令，例如 click()、blur() 等。

动态添加 Cypress 命令的局限性

虽然我们可以动态地添加断言，但是动态地添加 Cypress 命令则比较困难。Cypress 倾向于在运行前设置命令队列，因此动态地添加命令可能无法正常工作。

虽然有一些方法可以尝试动态地添加命令，例如使用 Cypress.Commands.overwrite 或 Cypress.Commands.add，但是这些方法都比较复杂，并且可能存在一些限制。

因此，建议尽量避免动态地添加 Cypress 命令，而是尽量使用现有的 Cypress 命令和断言，或者使用自定义命令来封装常用的操作。

总结

本文介绍了如何使用 Cypress 自定义命令，根据用户传入的参数动态地为元素添加链式操作。通过利用 expect 包装器，我们可以方便地动态添加断言。但是，动态添加 Cypress 命令则比较困难，建议尽量避免。

通过学习本文，你将能够更灵活地编写 Cypress 测试，并更好地理解 Cypress 的工作原理。在实际项目中，可以根据具体需求选择合适的方法，编写简洁、高效的测试代码。