为什么Cypress测试不能在子窗口中触发脚本

Question

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

复制步骤：

1. 单击主窗口中的按钮
2. 包含简单窗体的子窗口处于打开状态
3. 移动到子窗口，填写表单字段，然后单击提交按钮

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

实际结果：出现错误："；submitMyForm未定义"；(引用：submitMyForm((是上面提到的脚本中包含的一个方法(。因此，问题是可以填充子窗口表单字段并单击表单按钮，但通过链接<a href="javascript:submitMyForm();">绑定到按钮的脚本不起作用，因为找不到函数submitMyForm((。显然，测试失败的原因是短截子窗口，这是为了防止同时有两个窗口。在此之后，子窗口在同一浏览器选项卡中打开，因为Cypress无法同时打开两个窗口。但在这种情况下，脚本既不会从测试中停止工作，也不会手动执行单击。

以下是Cypress测试的代码片段：

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
});
});

Answer 1

您正在超越Cypress的功能/设计。

我想问你为什么在应用程序中使用单独的窗口？你会遇到弹出窗口阻止程序，无论如何都会阻止打开新窗口。一定比例的用户将无法解决此问题。

有两种方法：

1. 使用模式对话框来实现这一点(在移动设备上不太好(
2. 使用其他路线/页面显示您的表格，完成后返回上一页

它们的优点是不会与弹出式拦截器发生冲突，并且您的Cypress测试会起作用，因为它们仍然在同一窗口中。