如何使用 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()，因为似乎（来自文档this section）测试存根的唯一方法是使用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')