使用 Cypress 的 Material Datepicker 选择日期答案

【问题标题】：Select a date with Material Datepicker with Cypress使用 Cypress 的 Material Datepicker 选择日期
【发布时间】：2021-01-19 09:17:25
【问题描述】：

我正在使用 Cypress 为使用 Angular 和 Angular Material 实现的应用程序实现一些测试。

对于我的某些屏幕，我有一些带有日期选择器的表单，我想在我的测试中使用选择器来填充这些字段，而不是使用赛普拉斯的 type 方法。

所以我需要让事情变得通用：

所以我的问题是：

非常感谢您的帮助，蒂埃里

【问题讨论】：

while 的实现方法 - 理论上你应该知道当前状态和新状态，所以 while 不是必须的。例如，当前月份是 1 月，而您想测试移动到 6 月，即正确点击 5 次。
如何与 Angular Material Datepicker 交互 - 用户与它交互的方式，直接点击 cy.contains('.mat-calendar-body-cell-content', targetDate) 或 cy.type({rightarrow}) 或两者都取决于你有多挑剔想成为。但是你在测试 Datepicker 本身吗？为什么不直接输入日期？
@AloysiusParker 感谢您的回答！单击该字段时，应用程序会直接打开选择器。这就是我想通过选择器模拟日期选择的原因。
@AloysiusParker “你应该知道当前状态和新状态”是什么意思？我的意思是这如何让我们不使用循环......

【解决方案1】：

选择正确的月份（所以我必须迭代几个月直到找到正确的月份）

这听起来有点像（伪代码）

while (cy.contains('#mat-calendar-button-0', targetMonth)) {
  cy.get('button.mat-calendar-next-button').click()
}

但它不起作用，因为赛普拉斯命令已排队并与while 循环异步运行。（这种方式也不能使用return）。

有很多问题要求条件测试，大多数答案最终都是优雅的分支代码，它执行赛普拉斯术语“后空翻”来设置闭包变量控制 while 循环。

但是，如果您知道页面以（例如）月份“Jan”开始，并且您想设置月份“Jun”，则可以使用更简单的 for 循环，它不依赖于页面测试来完成

// advance 5 months
for (let i = 0; i < 5; i++) {                        // queues up 5 clicks
  cy.get('button.mat-calendar-next-button').click()
}

如果你真的必须使用条件测试（比如下一个按钮是不稳定的并且并不总是响应点击），你可以使用一个同步的 jQuery 表达式来控制循环，比如

while (!Cypress.$(`#mat-calendar-button-0:contains(${targetMonth}).length) {
  cy.get('button.mat-calendar-next-button').click()
}

但问题是您失去了内置于（大多数）命令中的赛普拉斯自动重试功能。点击后发生的任何异步代码，甚至是动画，都会使测试变得不稳定。

【讨论】：