为什么赛普拉斯测试无法在子窗口中触发脚本？答案

【问题标题】：Why Cypress test is not able to trigger a script in a child window?为什么赛普拉斯测试无法在子窗口中触发脚本？
【发布时间】：2021-06-17 22:52:54
【问题描述】：

我有一个弹出窗口，其中包含一个脚本。这个脚本应该通过点击窗口按钮来触发。但是单击此按钮后，脚本不会运行。你能说出原因吗？

重现步骤：

单击主窗口中的按钮。
包含简单表单的子窗口已打开。
移至子窗口，填写表单字段并单击提交按钮。

预期结果：点击触发位于子窗口头部的脚本。脚本处理表单并提交。

实际结果：出现错误：“submitMyForm is not defined”（参考：submitMyForm()是上面提到的脚本中包含的方法）。所以问题是可以填充子窗口表单字段并且可以单击表单按钮，但是通过链接<a href="javascript:submitMyForm();"> 绑定到按钮的脚本不起作用，因为找不到函数 submitMyForm()。显然，测试失败的原因是为了防止同时有 2 个窗口而执行的子窗口存根。此后，子窗口在同一个浏览器选项卡中打开，因为赛普拉斯无法同时打开 2 个窗口。但在这种情况下，脚本既不会因测试而停止工作，也不会因手动执行单击而停止工作。

这是来自 Cypress 测试的代码 sn-p：

const pop_url = `/dir1/dir2/file.php?id=${sectionId}`; // Here is a new window URL
cy.window().then( win => {
  const stub = cy.stub(win, 'open').as('windowopen');
  newSurveySectionListObj.AddNewBtnClick();  // Triggers form opening in the new window
  cy.get('@windowopen').should('be.called.with', pop_url);
  cy.window().then( $win => {
    $win.location.href = pop_url
    newSurveySectionListObj.typeDropdownSelect('Matrix'); // works fine
    newSurveySectionListObj.modalDescriptionFldType('Cypress test string'); // works fine
    newSurveySectionListObj.responseTypeDropdownSelect('Checkbox'); // works fine
    cy.get('a[href="javascript:submitMyForm();"]').click(); // Does not work despite the button is clicked. An error "submitMyForm is                                                             // not defined" arises
   });
});

【问题讨论】：

有关如何将赛普拉斯上下文更改为子窗口的信息，请参阅Cypress using child window。设置cy.state('document') 和cy.state('window') 就不会再犯规了。

标签： cypress

【解决方案1】：

您正在超越赛普拉斯的能力/设计能力。

我会质疑您为什么在应用程序中使用单独的窗口？您将与弹出窗口阻止程序发生冲突，这些阻止程序无论如何都会阻止新窗口打开。一定比例的用户将无法解决。

有两种方法：

使用模式对话框来实现这一点（在移动设备上不是很好）
使用其他路线/页面显示您的表单，完成后返回上一页

它们的优点是它们不会被弹出窗口阻止程序破坏，并且您的赛普拉斯测试将起作用，因为它们仍在同一个窗口中。

【讨论】：