0

假设您刚刚收到关于在您的 web 应用程序中实现一项新功能的要求,该功能应在纸上打印该页面的一部分。该要求讨论了可选元素是否是印刷产品的一部分。

自动测试此功能的最佳方法是什么?我知道,一旦您调用超出浏览器范围的打印命令,就不可能编写完美的自动化测试,因此问题的导向是找到最好的“足够好”的方法,希望比只监视窗口更好.print() 来断言它被调用了。

4

1 回答 1

2

Chrome 中有一个仿真模式,请参阅using-chromes-element-inspector-in-print-preview-mode

您可以使用赛普拉斯将其打开,请参阅使用赛普拉斯的 Chrome 调试器协议

HTML

<body>
  <h1>Title</h1>
  <style>
    @media screen {
      h1 {
        color: red;
      }
    }
    @media print {
      h1 {
        color: blue;
      }
    }
  </style>
</body>

示例测试

Cypress.Commands.add('setCssMedia', (media) => {
  cy.log(`Setting CSS media to ${media}`)
  Cypress.automation('remote:debugger:protocol', {
    command: 'Emulation.setEmulatedMedia',
    params: {
      media
    },
  })
})

it('tests for print and screen media', () => {

  cy.setCssMedia('print')
  cy.get('h1').should('have.css', 'color', 'rgb(0, 0, 255)')

  cy.setCssMedia('screen')
  cy.get('h1').should('have.css', 'color', 'rgb(255, 0, 0)')
})

于 2021-08-19T00:24:42.383 回答