创建可动态添加 Cypress Action 的自定义命令

创建可动态添加 Cypress Action 的自定义命令

Cypress 是一款流行的端到端测试框架，它提供了强大的 API 用于编写和执行测试用例。在实际测试中，我们经常需要根据不同的条件执行不同的操作。为了提高代码的复用性和可维护性，我们可以创建自定义命令来封装这些操作。本文将介绍如何创建一个 Cypress 自定义命令，该命令可以根据用户传入的参数动态地添加 Cypress action，并将其链式调用。

在 Cypress 中，断言通常使用 .should() 方法，其底层语法基于 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]       })           })   } )

代码解释：

1. Cypress.Commands.add(‘selectButton’, …): 这行代码定义了一个名为 selectButton 的自定义命令。
2. (text: string, …actionTypes: string[]): selectButton 接受一个字符串 text 和一个可变参数 actionTypes。text 用于选择包含指定文本的按钮，actionTypes 是一个字符串数组，用于指定要执行的 action。
3. cy.get(‘button’).contains(text).then($el => { … }): 这行代码首先使用 cy.get(‘button’) 选择所有 button 元素，然后使用 .contains(text) 过滤出包含指定文本的按钮。.then($el => { … }) 允许我们访问被选中的 dom 元素。
4. const expectWrapper = expect($el): 这行代码使用 expect() 函数将选中的 DOM 元素 $el 包装起来，创建了一个 expect 包装器。
5. […actionTypes].forEach(actionType => { expectWrapper[actionType] }): 这行代码遍历 actionTypes 数组，对于每个 actionType，都将其作为 expectWrapper 的属性进行访问。由于 expectWrapper 包含了 .to、.be、.visible 等属性，因此可以通过这种方式动态地添加断言。

使用示例：

cy.selectButton('Send', 'to', 'be', 'visible') // 相当于 cy.get('button').contains('Send').should('be.visible')

注意事项：

• actionTypes 数组中的字符串必须是 expect 包装器支持的属性。
• 该方法主要用于添加断言，对于添加命令可能不太适用。Cypress 通常在运行之前设置命令队列，因此动态添加命令可能比较困难。
• 如果需要更复杂的逻辑，可以考虑使用 .then() 方法，在其中编写自定义的 JavaScript 代码。

总结：

通过使用 expect 包装器，我们可以方便地创建可以动态添加断言的 Cypress 自定义命令。这种方法可以提高代码的复用性和可维护性，并简化测试用例的编写。然而，对于动态添加命令，可能需要采用其他方法，例如使用 .then() 方法和自定义 JavaScript 代码。