How to test @media print using protractor or selenium?

Question

I implemented the print function on my website and I would like to test it through protractor / selenium.

Is there a way to “apply” the styles under @media print during the test?

I saw only one relevant question , but he did not get any good answer.

For example, in this example, I would like div #hidden show 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> 

Answer 1

One of the options I found is to split all the “print” css into a separate file and load it using the link tag using media="print" .

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

The value is not to use media query inside a large css file at all.

That way I can change the media="print" attribute during the test to all through executeScript .

Hope this helps someone.