Cypress - 角度 MDC 升级后元素被另一个元素覆盖

Question

我最近将 Angular 升级到版本 16，材质也随之更新。材料 16 引入了 MDC，因此我现有的 E2E 测试用例失败了。

我正在尝试在具有输入元素的表单字段中键入内容。到目前为止，它一直在使用此命令

cy.get("#add-charger-name").type(chargerData.chargerName);

。它现在被浮动标签覆盖。

如果我使用

cy.get("#add-charger-name").type(chargerData.chargerName, {force: true});

我就能让它工作。假设有更干净的方法，我不想使用武力。

Answer 1

查看 MDC 文档中的 浮动标签

浮动标签是显示在表单字段控件顶部的文本标签

因此您会期望用户在开始输入文本之前单击或按 Tab 键进入字段。

---

方法1 - 点击标签

在单击标签之前 - 标签覆盖了 <input>

 元素，导致测试失败。

单击标签后 - 标签已向上移动并且输入可用。

您可以在 Cypress 测试中模拟相同的情况，

cy.visit('https://material.angular.io/components/form-field/overview');

cy.get('input#mat-input-5')
  .siblings('label')           // clicking on the label to make it move up
  .click()

cy.get('input#mat-input-5').type('something')
cy.get('input#mat-input-5').should('have.value', 'something')

---

方法 2 - 使用 Tab 键进入字段

不幸的是，没有

cy.tabTo()

 命令，因为 Tab 键切换是浏览器本机功能，但 

cy.focus()

 实现了效果。

cy.visit('https://material.angular.io/components/form-field/overview');

cy.get('input#mat-input-5').focus()
cy.get('input#mat-input-5').type('something')
cy.get('input#mat-input-5').should('have.value', 'something')