如何使用cypress与打印版面交互

如何使用cypress与打印版面交互,cypress,Cypress,我有一个打印按钮,点击按钮显示打印布局。如何使用cypress与“打印”布局交互。我想在这里检查几件事: cypress版本:3.5.0(最新) 下面是我的cypress测试,但未能识别CypressError:超时重试:应查找元素:“打印预览应用”,但从未找到它。 context('Print button tests', () => { it.only('Print action displays correct data', () => {

我有一个打印按钮,点击按钮显示打印布局。如何使用cypress与“打印”布局交互。我想在这里检查几件事:

cypress版本:3.5.0(最新)

下面是我的cypress测试,但未能识别
CypressError:超时重试:应查找元素:“打印预览应用”,但从未找到它。

context('Print button tests', () => {
            it.only('Print action displays correct data', () => {
                cy.get('.timetable-filter-panel-button.btn.btn-primary > span')
                    .contains("Print current view")
                    .click();
                cy.get('print-preview-app').find('#sidebar').find('#header').find('#headerContainer').find('h1').contains("Print")

            })
        })

这是我测试一个按钮的代码,该按钮调用打开打印对话框的
window.print()
方法

我使用
stub
,因为它会阻止实际的打印方法,并记录发生的情况。另一个选项是
spy
,它记录方法调用,但“通过”,因此实际调用将发生

Cypress.Commands.add('wasCalled',(stubOrSpy)=>{
expect(stubOrSpy).to.be.call;
})
它(`should call Print dialog`,()=>{
/*注意:无法在其外部存根()*/
让打印存根
cy.window().then(win=>{
printsub=cy.stub(win,'print')
cy.contains(selectorForPrintButton,'Print')。单击();
cy.wasCalled(打印存根)
})
})
我刚刚添加了一个小命令
cy.wasCalled()
,因为(从文档中)测试存根的唯一方法似乎是使用
expect(…)
表达式

在测试中按顺序使用
expect
在某些场景中可能会出现问题,因为据我所知,
expect
是同步的,因此可能会在前面的
cy
命令完成之前触发(例如调用动画的
click()

通过将其放入自定义命令中,
expect
有效地添加到命令链中。我可能误解了这里的某些内容,但除了模式
expect(stub).to.be.called
之外,找不到任何官方的Cypress示例


如果您想实际打开打印对话框,然后关闭它,您可以通过在文档上键入{esc}来完成,可能是
cy.document().type({esc})
。我还没试过这个不起作用

如果我们假设打印对话框是另一个窗口,那么这个答案表示您不能与它交互

但是,它确实显示了如何正确地测试存根是否被调用(请参见上面的注释)

cy.window().its('print').should('be.called'))

这是标准的chrome打印对话框-为什么要测试它?我肯定谷歌的开发者已经有了。@RichardMatsen我们在网页上有一个“打印”按钮,我有一个自动化任务来检查它是否显示打印对话框/窗口。然后关闭对话框。因为在点击打印按钮后,对话框仍然保持打开状态,其他规格的测试失败,因为对话框位于窗口顶部。我不打算检查对话框中任何与打印相关的功能。不过这是我的第一个问题,现在尝试在窗口打开后关闭
打印
。是的,我看到了另一个问题。它给出了以下错误
CypressError:cy.type()失败,因为它需要DOM元素。收到的主题是:>
哪一位导致了这种情况?当尝试使用
cy.document().type({esc})关闭打印对话框时,
Ok,这是最重要的内容。让我想想。我发现只有在我将代码
cy.wasCalled(printStub)
放入
中,然后在调用“打印”按钮后,
块中,代码才起作用。否则,窗口上的打印事件在“expect”检查之前尚未发生。
2) Click on the `Cancel` button: please see the html image below 
context('Print button tests', () => {
            it.only('Print action displays correct data', () => {
                cy.get('.timetable-filter-panel-button.btn.btn-primary > span')
                    .contains("Print current view")
                    .click();
                cy.get('print-preview-app').find('#sidebar').find('#header').find('#headerContainer').find('h1').contains("Print")

            })
        })