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

Question

当前，我正在使用browser.executeScript更改隐藏元素以在E2E期间显示。

在我的app.po.ts中，我具有一个将display设置为inline的功能。

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

默认情况下，隐藏元素的css display = none因此它不会在prod / dev中显示。

我隐藏的组件模板：

.hidden{
    display: none;
}

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

问题：元素也被隐藏时，隐藏组件中的代码也会运行。 我宁愿不运行它。 目前，我正在尝试在组件代码中进行条件检查，以检查隐藏元素css的display样式，但是我无法通过Renderer2或ElementRef来实现，以获取css class.hidden 。

如何确保隐藏元素中的代码仅在E2E测试期间运行，而不在开发/生产模式下运行？ 无论如何，是否要检查.hidden.display是none还是hidden.component.ts ？

Answer 1

试试吧

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

要么

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