javascript - 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 还是 in-line 在 hidden.component.ts 中？

Answer 1

尝试一下

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

或

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