如何检查某个元素在量角器中是否具有显示块/无样式？

Question

我有两个具有相同CSS的div，唯一的区别是样式具有display：block和none。

<div class="autocomplete-suggestions " style="left: 91px; top: 333px; min-width: 747px; display: none;">
   <div>item1</div>
<div>item2</div>
</div>

<div class="autocomplete-suggestions " style="left: 91px; top: 333px; min-width: 747px; display: block;">
   <div>item3</div>
<div>item4</div>
</div>

如何确定量角器中哪个元素具有样式显示块或没有？

我需要单击display：block div所在的item3 div。

我尝试了以下代码。

browser.findElements(by.css('.autocomplete-suggestions')).then((autoSuggestions) => {
            autoSuggestions.map((item) => {
                if (item.isDisplayed()) {
                    item.getTagName().then((x) => {
                        console.log('tagname', x);
                    });
                    browser.pause();
                    //item[index].click();
                }
            })

从上面的代码中，我可以看到两个div。

我收到“找不到元素”单击未定义的点击”错误。

我正在尝试使用Anuglar 7，量角器，茉莉花和硒Web驱动程序进行端到端测试。

Answer 1

您需要过滤表达式以考虑style attribute。

您可能会发现XPath selector更易于编写/阅读/理解，您可以使用XPath contains() function仅选择div属性中具有display: block的{​​{1}}将是：

style

演示：

---

如果您想呆在CSS selectors上，则等效表达式为：

//div[contains(@class,'autocomplete-suggestions') and contains(@style, 'display: block')]/div[1]

Answer 2

如果您正在寻找使用CSS作为定位器的选项，则可以使用此

element(by.cssContainingText(".autocomplete-suggestions[style*='display: block'] div", "item3"))