如何在Cypress中用非XPath方法定位双选项下拉列表元素？

针对包含Admin、ESS选项的下拉列表，下面提供几种比原冗长XPath更可靠的定位方法：

1. 类名+文本内容定位 #

利用统一的oxd-select-text-input类结合精准文本匹配：

// 定位Admin选项
cy.get('.oxd-select-text-input').contains('Admin')

// 定位ESS选项
cy.get('.oxd-select-text-input').contains('ESS')

若页面存在同类干扰元素，可先定位下拉容器缩小范围：

// 假设下拉容器类名为oxd-select-wrapper
cy.get('.oxd-select-wrapper').find('.oxd-select-text-input').contains('Admin')

2. 属性+文本的CSS选择器 #

结合稳定的data-v-5df604d8属性和类名定位：

cy.get('[data-v-5df604d8].oxd-select-text-input').contains('ESS')

3. 精简版XPath定位 #

替换原冗长易失效的XPath，改用类+文本的简洁写法：

// 精准匹配Admin文本
cy.xpath("//div[@class='oxd-select-text-input' and text()='Admin']")

// 精准匹配ESS文本
cy.xpath("//div[@class='oxd-select-text-input' and text()='ESS']")

若文本存在空格/换行，用contains()适配：

cy.xpath("//div[@class='oxd-select-text-input' and contains(text(), 'Admin')]")

4. 结合tabindex属性定位 #

利用选项统一的tabindex="0"属性配合类名：

cy.get('.oxd-select-text-input[tabindex="0"]').contains('Admin')

完整操作示例 #

下拉列表通常需先触发展开再选择，完整流程：

// 点击下拉框展开选项
cy.get('.oxd-select-text').click()
// 等待选项可见后选择Admin
cy.get('.oxd-select-text-input').should('be.visible').contains('Admin').click()

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