ngx-bootstrap模态框关闭动画对Cypress测试的影响及解决方案

在ngx-bootstrap 18.0.2版本中，模态框组件的关闭行为发生了一个细微但重要的变化：关闭动画的持续时间从即时变为450毫秒。这个改动虽然提升了用户体验，但却给基于Cypress的自动化测试带来了挑战。

问题现象

当测试用例执行"关闭模态框后立即操作输入框"的流程时，会出现以下典型问题：

1. 输入框获得焦点后突然失去焦点
2. 测试断言失败
3. 需要添加人为延迟才能保证测试通过

根本原因是模态框关闭后，焦点会返回到触发按钮，但这个焦点转移操作现在会延迟约450毫秒发生。

技术原理

ngx-bootstrap的模态框组件包含两个关键特性：

1. 动画系统：默认启用淡出动画，完整周期为450ms
2. 焦点管理：遵循WAI-ARIA规范，关闭后焦点应返回触发元素

在18.0.0版本中，这些操作可能是同步完成的，而18.0.2版本改为完全遵循动画时序。

解决方案

方案一：禁用动画（推荐）

在测试环境中配置模态框不启用动画：

// 在测试配置中
TestBed.configureTestingModule({
  providers: [
    { provide: BsModalRef, useValue: { config: { animated: false } } }
  ]
});

方案二：使用服务方法绕过动画

直接调用BsModalService的hide方法会跳过动画阶段：

modalService.hide(); // 立即关闭，不触发动画

方案三：精确等待条件

如果必须保留动画，可使用更精确的等待条件：

// 等待焦点确实回到触发按钮
cy.get('#trigger-button').should('be.focused');
// 然后再操作输入框

最佳实践建议

1. 测试环境配置：建议在测试配置中全局禁用动画
2. 关注点分离：将模态框测试与其他操作分离
3. 升级策略：版本升级时特别注意动画相关的变更
4. 可访问性验证：确保焦点管理符合WCAG标准

对于大型测试套件，可以考虑创建自定义Cypress命令来封装模态框关闭后的等待逻辑，提高代码复用性和可维护性。