Angular15+Cypress12迁移后输入链随机失效问题求助

将应用从Angular 12迁移至Angular 15（同步升级Material 15），同时将Cypress从8.7.0升级到12.3.0后，原有Cypress测试执行结果不稳定，存在两类问题：

• 无法通过ID或CSS类获取元素，报错信息为…is being covered by another element
• 输入链式操作同步异常，例如执行以下代码时：

cy.get('#birthPlace_id')
  .clear()
  .type('London')
  .should('have.class', 'ng-valid');

type()操作会在clear()未完全结束时启动，导致输入值新旧内容混杂。

现有Cypress配置 #

defaultCommandTimeout: 60000,
execTimeout: 60000,
pageLoadTimeout: 60000,
requestTimeout: 60000,
responseTimeout: 60000,
taskTimeout: 60000,
videoUploadOnPasses: true,
screenshotOnRunFailure: false,
videoCompression: false,
numTestsKeptInMemory: 0,
animationDistanceThreshold: 20,
waitForAnimations: false,
env: { 'NO_COLOR': '1' },
retries: {
    runMode: 4,
    openMode: 0
},
fileServerFolder: '.',
modifyObstructiveCode: false,
video: false,
chromeWebSecurity: true,
component: {
    devServer: {
        framework: 'angular',
        bundler: 'webpack'
    }
}

已尝试方案 #

• 添加force: true参数
• 设置wait(1000)等固定等待时间
• 前置click()方法
• 全局增加超时时间

问题仍随机出现，期望clear()、type()、should()能完美同步，前一个操作完成后再执行下一个，咨询：

1. 是否有更优的链式操作写法？
2. Cypress 8到12版本间，元素链式指令是否有变更？

一、更优的链式操作写法 #

1. 用断言等待状态稳定替代固定等待 #

针对clear()和type()的同步问题，不要依赖固定wait()，而是用Cypress的断言机制等待输入框状态满足条件后再执行下一步：

cy.get('#birthPlace_id')
  .clear()
  .should('have.value', '') // 等待清空完成，确保输入框值为空
  .type('London')
  .should('have.class', 'ng-valid');

2. 适配Angular Material的状态同步 #

Angular Material输入框的表单控件状态更新可能存在延迟，可结合组件实例的valueChanges事件等待同步：

cy.get('#birthPlace_id')
  .clear()
  .then($input => {
    // 获取Angular表单控件实例（索引需根据实际Angular版本调整）
    const formField = Cypress.$($input).closest('mat-form-field')[0];
    const control = formField.__ngContext__[8].control;
    return cy.wrap(control.valueChanges).should('emit', '');
  })
  .type('London')
  .should('have.class', 'ng-valid');

3. 解决元素被覆盖问题 #

除了force: true，可以先等待覆盖元素消失，再确保目标元素可交互：

// 若存在加载遮罩等覆盖元素，先等待其消失
cy.get('.loading-overlay').should('not.exist');

cy.get('#birthPlace_id')
  .should('be.visible')
  .should('be.enabled')
  .clear()
  .should('have.value', '')
  .type('London');

二、Cypress 8到12的链式指令相关变更 #

Cypress 8到12的核心链式机制未发生根本性改变，但以下细节调整可能影响测试稳定性：

1. 自动等待逻辑更严格：Cypress 9+对元素可交互状态的校验更严谨，若Angular Material组件在状态更新时存在短暂的元素覆盖（如验证提示动画），会触发Cypress的拦截。
2. clear()行为优化：Cypress 10+的clear()模拟真实用户操作（选中全部内容再删除），而非直接设为空值。若Angular表单控件响应速度跟不上模拟节奏，会出现type()提前执行的情况。
3. modifyObstructiveCode默认值变更：Cypress 10+默认开启modifyObstructiveCode: true，会自动修改页面中阻碍测试的代码（如阻止点击的事件监听器）。你当前配置关闭了该选项，可能导致交互兼容性问题，建议尝试开启。

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