如何用Cypress测试关闭/刷新标签页触发确认弹窗的功能？

问题根源 #

你用的cy.reload()是Cypress内置命令，它会直接跳过浏览器beforeunload事件触发的确认弹窗，自然不会触发页面里的确认逻辑，导致测试没效果。

正确的测试写法 #

要模拟用户手动刷新/关闭标签的真实行为，得触发浏览器原生的beforeunload事件，或者调用原生刷新方法，同时监听确认框：

测试刷新场景 #

// 监听确认框，返回false模拟点击「取消」
cy.on('window:confirm', () => false);

// 调用浏览器原生刷新，触发beforeunload事件
cy.window().then(win => {
  win.location.reload();
});

// 验证页面没刷新，比如检查某个元素的内容和刷新前一致
cy.get('[data-testid="target-element"]').should('have.text', '刷新前的内容');

测试关闭标签页场景 #

cy.on('window:confirm', () => false);

// 直接触发beforeunload事件，模拟关闭标签页的操作
cy.window().trigger('beforeunload');

// 验证页面仍存在，没有被关闭
cy.get('body').should('exist');

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