Cypress如何断言未发生页面导航？

DevOps 小满

2026-7-22

在Cypress中断言未触发页面导航的最优方案

你原来用固定等待时间的方法确实存在可靠性问题，这里有两种更优的方案，无需硬编码等待时长，且能精准判断导航是否触发：

方案1：存根原生`window.location.assign`方法

如果按钮是通过window.location.assign()触发跳转（比如跳转到外部链接或刷新页面），可以提前存根这个方法，然后断言它从未被调用：

// 先获取当前窗口对象，存根location.assign方法并命名为navigate
cy.window().then(win => {
  cy.stub(win.location, 'assign').as('navigate');
});

// 点击目标按钮
cy.get('button').click();

// 断言存根方法从未被调用，即未触发导航
cy.get('@navigate').should('not.be.called');

// 可选：额外断言当前URL未发生变化，双重验证
cy.url().should('eq', `${Cypress.config('baseUrl')}/original/url`);

方案2：存根History API方法（单页应用场景）

如果是单页应用（比如用React Router、Vue Router），导航通常通过history.pushState或history.replaceState实现，此时可以存根这两个方法：

cy.window().then(win => {
  // 存根pushState和replaceState并分别命名
  cy.stub(win.history, 'pushState').as('pushState');
  cy.stub(win.history, 'replaceState').as('replaceState');
});

cy.get('button').click();

// 断言两个History方法都未被调用
cy.get('@pushState').should('not.be.called');
cy.get('@replaceState').should('not.be.called');

// 验证当前URL仍为原始地址
cy.url().should('contain', 'original/url');