如何使用Cypress点击日期选择器并选择「Yesterday」选项？

原代码问题分析 #

1. cy.contains('[selected-date.bind="startDate"]')用法错误：contains是用来匹配元素文本内容的方法，不能直接传入属性选择器，应该用cy.get()来通过属性定位元素。
2. 未处理动态元素：日历弹窗展开后，Yesterday按钮是动态渲染的，直接点击可能会因为元素未加载完成而失败。

正确实现代码 #

步骤1：点击日历组件触发弹窗

通过属性定位date-picker组件，再找到内部绑定了toggleItems事件的可点击子元素：

// 定位date-picker组件，点击触发弹窗的子元素
cy.get('[selected-date.bind="startDate"]')
  .find('[click.delegate="toggleItems($event)"]')
  .click();

或者利用子元素的类名定位（更简洁）：

cy.get('[selected-date.bind="startDate"]')
  .find('.selecteditem.has-icon')
  .click();

步骤2：点击Yesterday按钮

结合按钮的data-hook属性和文本定位，同时添加断言确保元素可见：

// 精准定位Yesterday按钮，确保可见后点击
cy.get('[data-hook="datepicker-button"]')
  .contains('Yesterday')
  .should('be.visible')
  .click();

也可以直接通过文本+元素类型定位：

cy.contains('div', 'Yesterday')
  .should('be.visible')
  .click();

额外注意事项 #

• 优先使用唯一属性（如data-hook）定位元素，避免因类名、文本变化导致用例失效；
• 对动态渲染的元素，添加.should('be.visible')等断言，确保Cypress等待元素加载完成后再执行操作；
• 检查DOM结构，确认点击的是真正绑定了点击事件的元素（比如日历组件的容器可能不可点击，内部的子元素才是触发点）。

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