如何在Cypress中选择下拉菜单选项及查找定位DOM对象相关咨询

问题解答 #

1. Cypress下拉菜单选择指定条目（示例为test选项） #

分两种场景处理：

• 原生<select>标签下拉
  直接调用Cypress内置select()方法即可，无需额外展开操作：

  // 先定位到select元素，按显示文本选择
  cy.get('select选择器').select('test')
  // 也可按option的value属性选择
  cy.get('select选择器').select('对应test的value值')
  

• 自定义模拟下拉（非原生select标签，由div等元素拼接实现）
  需要先触发下拉展开，再点击对应选项：

  // 点击下拉触发元素，展开选项列表
  cy.get('下拉触发按钮的选择器').click()
  // 定位到文本为test的选项并点击
  cy.contains('下拉选项的通用选择器，比如[role="option"]', 'test').click()
  

可通过封装自定义Cypress命令优化复用性，示例逻辑如下：

Cypress.Commands.add('selectCustomOption', (triggerSelector, optionText) => {
  cy.get(triggerSelector).click()
  cy.contains('[role="option"]', optionText).should('be.visible').click()
})
// 调用示例
cy.selectCustomOption('下拉触发选择器', 'test')

2. DOM定位学习方法 #

可按照优先级顺序学习定位逻辑，上手成本低且稳定性高：

• 优先使用测试专属属性定位：开发时给需要测试的元素添加data-cy、data-testid这类专属属性，不会因为样式、文本迭代发生变化，是最稳定的定位方式，示例：cy.get('[data-cy="user-select"]')
• 次选静态固定属性定位：如果没有测试专属属性，优先用不会动态变化的id、name、placeholder等属性定位
• 最后选择文本或动态属性定位：只有当上述属性都不存在时，再用文本匹配、class属性定位，注意避开动态生成的class值
  平时可以用浏览器开发者工具的「元素」面板，先选中目标元素查看所有属性，多尝试写不同的选择器验证匹配效果，练习几次就能熟练掌握。

内容的提问来源于stack exchange，提问作者Tomasito