css - 如何使用 Protractor 或 Selenium 测试@media 打印？

Question

我已经在我的网站上实现了打印功能，我想通过 Protractor/selenium 对其进行测试。

有什么方法可以在测试期间“应用”@media print 下的样式？

我只看到一个相关的question , 但它没有任何好的答案。

例如，在该示例中，我希望 #hidden div 将在测试期间显示。

.print-only {
  display: none;
}

@media print {
  .print-only {
    display: block;
  }
}

<div id="hidden" class="print-only">Will be shown when printing</div>

Answer 1

我发现的一个选项是将所有“打印”css 拆分到一个单独的文件中，并通过带有 media="print" 的 link 标签加载它.

<link rel="stylesheet" type="text/css" href="print.css" media="print">

意思是根本不要在大型​​ css 文件中使用 media query。

这种方式将允许我在测试期间通过 executeScript 将 media="print" 属性更改为 all。

希望对大家有帮助。