Angular MDC升级后Cypress元素被遮挡的问题排查

方案1：模拟用户交互触发标签上浮 #

Material 16的MDC浮动标签会在输入框获得焦点后自动上浮，通过先触发输入框的点击或聚焦操作，再执行输入，就能避免标签遮挡问题：

// 点击输入框后输入
cy.get("#add-charger-name").click().type(chargerData.chargerName);

// 或者直接聚焦输入框后输入
cy.get("#add-charger-name").focus().type(chargerData.chargerName);

这种方式完全模拟真实用户操作，符合E2E测试的设计初衷，无需强制操作。

方案2：直接定位原生input元素 #

MDC表单字段会将原生input包裹在组件内部，直接定位到原生input进行输入，可绕过浮动标签的遮挡：

// 直接选择内部的input元素
cy.get("#add-charger-name input").type(chargerData.chargerName);

// 或者通过父元素查找input
cy.get("#add-charger-name").find("input").type(chargerData.chargerName);

原生input是实际接收输入的元素，直接操作它能避免组件层的交互干扰。

方案3：等待浮动标签动画完成 #

如果是标签上浮动画未完成导致的遮挡，可通过断言标签的浮动状态来确保时机正确：

// 等待浮动标签变为上浮状态（类名根据MDC实际生成的调整）
cy.get("#add-charger-name")
  .parent()
  .find(".mdc-floating-label--float-above")
  .should("exist");

// 确认标签上浮后再输入
cy.get("#add-charger-name").type(chargerData.chargerName);

不推荐硬等待（如cy.wait(200)），优先用状态断言保证测试稳定性。

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