Cypress测试Ionic/Angular应用：无法访问ion-select-option的问题

我之前也碰到过一模一样的糟心问题！在Ionic/Angular应用里测试ion-select组件时，Cypress明明能定位到元素，就是点不动，还一直报因为display: none导致元素不可见的超时错误。试了{force: true}强制点击、换popover/alert类型的interface都没用，甚至用cy.select()还直接报错说只支持原生<select>元素。

后来升级了技术栈（Angular 11.2.6、Cypress 6.7.1等）之后，用@VégerLóránd的解决方案终于搞定了，针对不同的interface类型给大家整理了具体实现：

针对alert类型的ion-select #

问题根源在于Ionic的ion-select用了Shadow DOM封装，直接用cy.click()没办法触发到组件内部的可点击按钮。我们需要直接访问Shadow DOM里的按钮来唤起alert弹窗：

// 定位到目标ion-select，通过Shadow DOM点击内部按钮唤起弹窗
cy.get('[cy-data=type] > ion-select').should((e) => {
  const [dom] = e.get();
  dom.shadowRoot.querySelector('button').click();
});
// 弹窗唤起后，正常点击对应的选项即可
cy.get('ion-select-option[value="EPFIRMF001"]').click();

针对action-sheet类型的ion-select #

如果你的ion-select用的是action-sheet类型的interface，操作起来更简单，直接通过选项文本定位点击就行（如果需要唤起弹窗，同样可以用上面Shadow DOM的方式）：

// 先唤起action-sheet弹窗（可选，根据你的组件触发逻辑）
cy.get('ion-select[name="typeCode"]').should((e) => {
  const [dom] = e.get();
  dom.shadowRoot.querySelector('button').click();
});
// 直接通过选项文本点击选中
cy.contains('.action-sheet-button', 'Formal/Ltd.').click();

注：action-sheet类型的选择不需要额外点击OK按钮，选中选项后弹窗会自动关闭并完成赋值。

踩坑总结 #

• 别用cy.get('ion-select').click()：Cypress默认不会穿透Shadow DOM，根本没触发到组件内部的交互按钮
• {force: true}没用：只是绕过了可见性检查，但没真正触发Ionic组件的弹窗逻辑
• cy.select()不适用：这个方法只支持原生HTML的<select>元素，对Ionic封装的组件无效

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