如何在Cypress中通过文本选择p-dropdown下拉选项？

核心思路 #

PrimeNG的p-dropdown组件渲染后会生成独立的触发按钮和下拉选项列表，需要先展开列表，再定位到目标文本对应的选项完成点击操作。

具体实现方案 #

方案1：基础版（适配多数PrimeNG版本）

// 定位下拉组件，点击内部触发按钮展开选项列表
cy.get('[data-cy="scenarioDropdownList"]').find('.ui-dropdown-trigger').click();

// 找到目标文本的选项并点击
cy.get('.ui-dropdown-items .ui-dropdown-item')
  .contains('test 1 GROUP')
  .click();

方案2：带等待与可见性校验（适合动态加载场景）

// 直接点击下拉组件展开列表（部分PrimeNG版本支持此方式）
cy.get('[data-cy="scenarioDropdownList"]').click();

// 等待选项列表可见后，精准选择目标选项
cy.get('.ui-dropdown-items')
  .should('be.visible')
  .contains('.ui-dropdown-item', 'test 1 GROUP')
  .click();

方案3：限定范围避免冲突（页面存在多个下拉框时）

// 在目标下拉组件的范围内点击展开按钮
cy.get('[data-cy="scenarioDropdownList"]').within(() => {
  cy.get('.ui-dropdown-trigger').click();
});

// 筛选出含目标文本的选项并点击
cy.get('.ui-dropdown-item')
  .filter(':contains("test 1 GROUP")')
  .click();

注意事项 #

• 类名适配：PrimeNG新版本（如10+）会将类名前缀从ui-改为p-，比如p-dropdown-trigger、p-dropdown-items，需通过浏览器开发者工具查看实际DOM结构调整类名。
• 动态加载处理：如果选项列表是异步加载的，需添加等待逻辑，比如cy.get('.ui-dropdown-item').should('have.length.greaterThan', 0)，确保选项已加载完成后再执行选择操作。
• 可靠性优先：避免使用索引选择选项，依赖文本匹配的方式更稳定，不受选项顺序变化影响。

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