如何使用Cypress点击日历元素的Done确认按钮完成日期选择？

问题场景 #

编写e2e测试用例时，需要实现页面日历元素的点击操作：

• 目前Cypress可以在打开日历弹窗后正常点击选择日期数值
• 选完日期后无法成功点击Done（确认）按钮

相关截图：

• 元素检查结果：
• 日期选择器展示：

对应业务代码 #

<div style="text-align: center;">
  <ion-datetime 
    presentation="date" 
    *ngIf="showPicker" 
    display-format="MM/DD/YYYY" 
    min="1900-01-01"
    placeholder="*Enter your date of birth" 
    formControlName="dateOfBirth" 
    (ionChange)="dateChanged($event)"
    showDefaultButtons="true" 
    (ionCancel)="showPicker = false;">
  </ion-datetime>
</div>

已尝试的无效写法 #

已经尝试通过确认按钮的默认ID定位点击，以下两种写法均未生效：

cy.get('ion-datetime').find('#confirm-button').click();
cy.get('#confirm-button').click();

解决方案 #

核心原因：Ionic的ion-datetime组件基于Shadow DOM封装内部元素，常规DOM查询无法穿透Shadow边界获取内部节点，导致定位失败

可选择以下任意一种方式修复：

1. 单次查询手动穿透Shadow DOM
   直接在定位时调用.shadow()方法进入组件的Shadow根节点，再查找确认按钮，同时增加可见性校验避免动画遮挡：

   cy.get('ion-datetime')
     .shadow()
     .find('#confirm-button')
     .should('be.visible')
     .click();
   

   如果存在偶发的点击被遮挡问题，可以追加强制点击参数：

   cy.get('ion-datetime')
     .shadow()
     .find('#confirm-button')
     .click({ force: true });
   

2. 全局开启Shadow DOM支持（推荐）
   如果项目中大量使用Ionic组件，可以在Cypress配置文件中全局开启Shadow DOM穿透，后续所有查询都会自动识别Shadow边界内的元素，无需每次手动调用.shadow()：

   // cypress.config.js / cypress.config.ts
   const { defineConfig } = require("cypress");
   
   module.exports = defineConfig({
     e2e: {
       // 其余原有配置保留
       includeShadowDom: true
     },
   });
   

   开启该配置后，直接使用cy.get('#confirm-button').click()即可正常定位点击按钮。

内容的提问来源于stack exchange，提问作者D.Hodges