Cypress点击带routerLink的链接后路由未切换问题排查

问题场景 #

Angular 13.2.5项目中，带有[routerLink]和(click)事件的<a>标签，在Cypress 9.7.0中执行点击操作时，路由偶尔不切换，无报错信息，尝试cy.wait()、可见性/焦点断言均无效。

相关代码：
HTML：

<a [routerLink]="['my_link_here']" (click)="closeDialog()">some string</a>

Cypress测试代码：

cy.contains('some string', {timeout: 30000}).should('be.visible').focus().wait(1000).click();

核心原因 #

Angular中(click)事件和routerLink的默认导航事件执行顺序无严格保障，当closeDialog()涉及DOM销毁（如关闭弹窗）时，可能会中断routerLink的导航流程，导致路由跳转失败。

解决方案 #

1. 直接调用Angular Router导航，分离事件逻辑

绕过元素点击的事件冲突，直接获取路由目标并调用Router API，同时手动执行弹窗关闭逻辑：

cy.contains('some string').then(($a) => {
  // 解析routerLink的目标路径
  const routerLinkValue = $a.attr('ng-reflect-router-link');
  const targetRoute = JSON.parse(routerLinkValue);
  
  // 获取Angular Router实例并导航
  cy.window().then(win => {
    const router = win.ng.probe($a[0]).injector.get(win.ng.coreTokens.Router);
    router.navigate(targetRoute);
  });
  
  // 执行弹窗关闭方法
  cy.window().then(win => {
    const componentInstance = win.ng.probe($a[0]).componentInstance;
    componentInstance.closeDialog();
  });
});

2. 调整Angular组件内的事件执行顺序

修改closeDialog()方法，确保路由跳转优先完成后再关闭弹窗：

// 组件代码
import { Router } from '@angular/router';

constructor(private router: Router, private dialogRef: MatDialogRef<YourDialogComponent>) {}

closeDialog() {
  // 先执行路由跳转，完成后再关闭弹窗
  this.router.navigate(['my_link_here']).then(() => {
    this.dialogRef.close();
  });
}

同时修改HTML，移除[routerLink]，仅保留点击事件：

<a (click)="closeDialog()">some string</a>

3. 强制触发原生点击事件

使用原生DOM事件触发，避免Cypress点击可能的拦截问题：

cy.contains('some string', {timeout: 30000})
  .should('be.visible')
  .then(($a) => {
    $a[0].dispatchEvent(new MouseEvent('click', { 
      bubbles: true, 
      cancelable: true, 
      view: window 
    }));
  });

4. 等待Angular Zone稳定后再点击

确保Angular所有异步操作完成后再执行点击，避免DOM状态不稳定：

// 等待Angular Zone稳定
cy.window().then(win => {
  return new Cypress.Promise(resolve => {
    const ngZone = win.ng.probe(document.body).injector.get(win.ng.coreTokens.NgZone);
    ngZone.onStable.subscribe(() => {
      resolve();
    });
  });
});

cy.contains('some string').should('be.visible').click();

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