Angular E2E测试使隐藏的元素仅在E2E期间显示

Question

Currently I am using browser.executeScript to change hidden elements to show up during E2E.

In my app.po.ts, I have a function to set display to inline .

    browser.executeScript('arguments[0].style.display = "inline"',getHiddenElements());

By default, the hidden elements have css display = none so it won't show up during prod/dev.

My hidden component template:

.hidden{
    display: none;
}

<div class="hidden">
   ...... my hidden elements .......
</div>

Problem: The code in hidden component runs when the elements are hidden too. I prefer not to run it. Currently I am trying to have a conditional check in the component code to check for the hidden element css display style but I am unable to achieve it with Renderer2 or ElementRef to get the css class.hidden .

How can I ensure that codes in hidden elements only runs during E2E testing, but not during dev/prod mode? Is there anyway to check if .hidden.display is none or in-line in hidden.component.ts ?

Answer 1

Try it

browser.executeScript('arguments[0].style.display = "inline-block"',getHiddenElements());

or

browser.executeScript('arguments[0].style.display = "block"',getHiddenElements());