如何在Cypress存根中捕获动态URL以替代新窗口打开？

问题原因 #

你遇到的错误是因为**cy.stub()的回调是同步执行的，而Cypress命令（比如cy.wrap()）属于异步命令队列**，不能直接在同步的存根回调里调用，否则会打破Cypress的命令执行顺序，导致冲突。

正确实现方式 #

不要在存根内部使用Cypress命令，而是用一个外部变量来捕获动态URL，之后再通过Cypress命令使用这个变量：

cy.visit('https://myUrl.com');

let newWindowUrl; // 声明外部变量存储URL

cy.window().then(win => {
  cy.stub(win, 'open').callsFake((url) => {
    newWindowUrl = url; // 直接把URL赋值给外部变量
    return false; // 阻止默认的新窗口打开行为
  });
});

cy.get('#myButton').click(); // 触发按钮点击，此时存根会捕获URL

// 确认URL已被捕获后，访问该地址
cy.wrap(newWindowUrl).should('not.be.undefined').then(url => {
  cy.visit(url);
});

关键说明 #

• 用callsFake()替代直接传回调：callsFake()更清晰地表示我们要替换原方法的逻辑，同时在内部同步赋值变量，避免异步命令冲突。
• 外部变量存储URL：同步变量赋值不会触发Cypress的命令队列问题，之后用cy.wrap()把变量引入Cypress的异步上下文，确保命令顺序正确。
• 添加断言验证URL存在：should('not.be.undefined')可以确保URL确实被捕获到，避免后续cy.visit()执行时出现未定义的错误。

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