创建可动态添加 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]
})
})
}
)代码解释：
- Cypress.Commands.add('selectButton', ...): 这行代码定义了一个名为 selectButton 的自定义命令。
- (text: string, ...actionTypes: string[]): selectButton 接受一个字符串 text 和一个可变参数 actionTypes。text 用于选择包含指定文本的按钮，actionTypes 是一个字符串数组，用于指定要执行的 action。
- cy.get('button').contains(text).then($el => { ... }): 这行代码首先使用 cy.get('button') 选择所有 button 元素，然后使用 .contains(text) 过滤出包含指定文本的按钮。.then($el => { ... }) 允许我们访问被选中的 DOM 元素。
- const expectWrapper = expect($el): 这行代码使用 expect() 函数将选中的 DOM 元素 $el 包装起来，创建了一个 expect 包装器。
- [...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 代码。
