如何在Cypress中操作浏览器历史记录以测试页面返回按钮功能

安全阿岳

2026-4-29

在Cypress中操作浏览器历史记录测试返回按钮

当然有办法实现！Cypress本身没有提供像cy.history.push()这样的直接命令，但你可以通过访问浏览器的window对象来调用原生History API，完全能满足你的测试需求。

具体实现步骤

Cypress允许你用cy.window()获取当前浏览器窗口的引用，之后就能手动调用history.pushState()添加历史记录项。下面是一个完整的测试示例：

it('测试返回按钮能正确回到上一页', () => {
  // 1. 先访问带有返回按钮的目标页面
  cy.visit('/your-target-page');

  // 2. 向浏览器历史记录中添加自定义URL条目
  cy.window().then((win) => {
    // pushState参数：状态对象、页面标题（多数浏览器忽略）、目标URL
    win.history.pushState({}, '', '/previous-page');
  });

  // 3. 点击页面上的「返回」按钮（替换成你实际的按钮选择器）
  cy.get('[data-testid="back-button"]').click();

  // 4. 验证是否回到了模拟的上一页
  // 方式一：验证URL匹配
  cy.url().should('eq', Cypress.config().baseUrl + '/previous-page');

  // 方式二：验证页面核心内容（比URL验证更可靠）
  cy.get('[data-testid="previous-page-header"]').should('be.visible');
});

关键注意事项

history.pushState()不会触发实际页面导航，它只是修改浏览器的历史记录栈。如果你需要模拟真实的页面跳转流程（比如先访问上一页再回到当前页），可以用两次cy.visit()：

// 先访问上一页，构建真实的历史记录
cy.visit('/previous-page');
// 跳回目标页面
cy.visit('/your-target-page');
// 此时点击返回按钮即可验证原生导航行为
cy.get('[data-testid="back-button"]').click();
cy.url().should('include', '/previous-page');