如何使用 cypress 与打印布局交互

Question

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

cypress version: 3.5.0 (latest)

1) Check the text "Print" available in `h1` inside the header container div, see image

2) Click on the `Cancel` button: please see the html image below 

下面是我的 cypress 测试，但这未能识别CypressError: Timed out retrying: Expected to find element: 'print-preview-app', but never found it.

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")

            })
        })

Answer 1

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

我使用它是stub因为它阻止了实际的打印方法以及记录它发生的情况。另一个选项是spy记录方法调用但“传递”，以便实际调用发生。

Cypress.Commands.add('wasCalled', (stubOrSpy) => {
  expect(stubOrSpy).to.be.called;
})

it(`should call Print dialog`, () => {

  /* NOTE: Cannot stub outside of it() */
  let printStub

  cy.window().then(win => {
    printStub = cy.stub(win, 'print')
    cy.contains(selectorForPrintButton, 'Print').click();
    cy.wasCalled(printStub)
  })
})

我刚刚添加了一个小命令，因为（从本节的cy.wasCalled()文档来看）测试存根的唯一方法是使用表达式。expect(...)

expect在某些情况下，在测试中按顺序使用可能会出现问题，因为据我了解，expect它是同步的，因此可能会在某些前面的命令完成之前cy触发（例如click()调用动画的命令）。

通过将其放入自定义命令中，expect可以有效地将其添加到命令链中。我可能在这里误解了一些东西，但除了模式之外找不到任何官方的赛普拉斯示例expect(stub).to.be.called。

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

如果我们假设打印对话框是另一个窗口，那么这个答案Access a new window - cypress.io表示您无法与它交互。

然而，它确实展示了如何正确测试存根被调用（请参阅上面我的注释），

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