如何用量角器或硒测试@media打印? [英] How to test @media print with protractor or selenium?

问题描述

我已经在自己的站点上实现了打印功能，我想通过量角器/硒对其进行测试.

I've implemented an print functionallity at my site, and I would like to test it via protractor / selenium.

在测试过程中，有什么方法可以应用" @media print下的样式?

There is any method to "apply" the styles that are under @media print during the test?

我仅看到一个相关的问题，但是它没有任何好的答案.

I saw only one relevant question, but it without any good answer.

例如，在该示例中，我希望在测试过程中显示#hidden div.

For example at that sample I would like to the #hidden div will be shown during the test.

.print-only {
  display: none;
}

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

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

推荐答案

我发现的一个选择是将所有打印" css拆分成一个单独的文件，并通过link标签和media="print"加载它.

One option that I've found is to split all the "print" css into a separate file, and load it via link tag with media="print".

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

表示完全不在大型css文件中使用media query.

Meaning not to use media query inside large css file at all.

通过这种方式，我可以在测试过程中通过executeScript将media="print"属性更改为all.

That way will allow me to change the media="print" attribute during test to all via executeScript.

希望它将对某人有所帮助.

Hope it will help someone.

这篇关于如何用量角器或硒测试@media打印?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！