如何在Cypress中实现多页面的地理位置Mock？

问题根源在于：Cypress中每个页面加载都会生成全新的window对象，你之前在初始页面设置的navigator.geolocation Stub仅绑定在旧页面的window上，跳转后的新页面不会继承这个Stub——即使关闭测试隔离也无法解决，因为测试隔离控制的是测试间的状态，而页面跳转属于同一测试内的新页面加载。

下面是两种可靠的解决方法：

方法1：全局监听页面加载事件，自动注入Stub #

在测试的beforeEach或测试用例中添加window:before:load事件监听，每次有新页面（包括跳转后的页面）加载时，自动重新Stub地理位置：

const mockLocation = (latitude, longitude) => {
  return (win) => {
    cy.stub(win.navigator.geolocation, "getCurrentPosition").callsFake(
      (cb, err) => {
        if (latitude && longitude) {
          return cb({ coords: { latitude, longitude } });
        }
        throw err({ code: 1 });
      },
    );
  };
};

context("Mocked geolocation across page navigation", () => {
  beforeEach(() => {
    // 监听所有新窗口加载事件，自动注入Stub
    cy.on("window:before:load", mockLocation(46.8182, 8.2275));
    
    cy.visit("www.test.com");
  });

  it("Should display my location after navigation", () => {
    cy.get(".button").click(); // 点击跳转至带地图的新页面
    // 验证地图标记是否显示在模拟位置
    cy.get(".map-marker").should("exist");
  });
});

这种方法最贴近真实用户操作流程，无需修改页面跳转逻辑，能自动处理所有页面加载场景。

方法2：拦截跳转URL，直接访问时注入Stub #

如果需要精确控制跳转后的页面加载，可以先获取按钮的跳转URL，然后用cy.visit直接加载该页面并带上地理位置Mock：

const mockLocation = (latitude, longitude) => {
  return {
    onBeforeLoad(win) {
      cy.stub(win.navigator.geolocation, "getCurrentPosition").callsFake(
        (cb, err) => {
          if (latitude && longitude) {
            return cb({ coords: { latitude, longitude } });
          }
          throw err({ code: 1 });
        },
      );
    },
  };
};

context("Mocked geolocation with direct page visit", () => {
  it("Should display my location on map page", () => {
    cy.visit("www.test.com");
    // 获取按钮的跳转URL
    cy.get(".button").invoke("attr", "href").then((mapPageUrl) => {
      // 直接访问地图页面并注入Mock
      cy.visit(mapPageUrl, mockLocation(46.8182, 8.2275));
    });
    // 验证地图标记
    cy.get(".map-marker").should("exist");
  });
});

这种方法适合不需要验证按钮跳转逻辑，仅需测试地图页面功能的场景。

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