Cypress 如何获取具有动态选择器的元素？

当您遇到动态选择器时，Cypress 提供了几种方法来获取元素。动态选择器通常是指元素的类名、ID 或其他属性在页面加载或用户交互后可能会改变的情况。以下是一些处理动态选择器并定位元素的方法：

1. 包含静态文本内容的元素

如果元素的文本内容是静态的并且唯一，您可以使用 contains 命令定位元素：

javascript
cy.contains('固定文本内容');

2. 使用固定属性

如果元素的某些属性是固定的，您可以直接使用这些属性进行定位：

javascript
cy.get('[data-cy="固定属性"]');

3. 正则表达式匹配属性

如果属性值遵循特定的模式，可以使用正则表达式来匹配这些属性：

javascript
cy.get('input[name^="input-name-prefix-"]');
cy.get('div[class*="partial-class-name"]');

4. 使用父元素或兄弟元素的关系

有时，可以通过查找具有稳定选择器的父元素或兄弟元素来定位动态元素：

javascript
cy.get('#parent-element-id').find('.child-element-class');
cy.get('.sibling-element-class').next('.target-element');

5. 使用 .invoke() 和 jQuery 方法

对于复杂的选择需求，您可以使用 .invoke() 函数结合 jQuery 方法：

javascript
cy.get('.dynamic-element').invoke('attr', 'name').then((name) => {
  // 这里可以基于 name 的值做更多的逻辑处理
});

6. 使用回调函数过滤

可以使用 .filter() 方法并传递一个回调函数来进一步过滤匹配的元素：

javascript
cy.get('.list-item').filter((index, element) => {
  return element.textContent.includes('固定文本');
});

实际例子

假设有一个待办事项列表，在用户添加新的待办事项时，每个条目的 id 都是动态生成的。我们可以使用一个静态的类名和包含待办事项文本内容的 contains 方法来获取特定的待办事项元素：

javascript
cy.get('.todo-list-item').contains('买菜');

或者，如果每个待办事项都有一个以特定格式开始的 data-test-id 属性，例如 todo- 后跟一串数字，我们可以使用正则表达式来定位元素：

javascript
cy.get('[data-test-id^="todo-"]');

总的来说，最佳实践是尽可能使用固定的属性来定位元素，例如 data-* 属性，它们专门用于测试且不太可能随着应用程序的变动而变动。如果元素的选择器是动态的，那么上述方法可以帮助您有效地定位这些元素。