时间戳

首页 > 解决方案 > 测试从 web 应用程序打印页面（Cypress、Jest、Storybook ???）

unit-testing - 测试从 web 应用程序打印页面（Cypress、Jest、Storybook ???）

问题描述

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

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

标签： unit-testingtestingcypresse2e-testinge2e

解决方案

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

推荐阅读