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

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>

我们如何识别哪个元素具有样式显示块或量角器中的 none？

我需要点击 display:block div.

所在的项目 3 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。

我收到“找不到元素 'click on undefined' 错误。

我正在尝试使用 Anuglar 7、量角器、jasmine 和 selenium 网络驱动程序进行端到端测试。

Answer 1

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

您可能会发现 XPath selector easier to write/read/understand, you can use XPath contains() function 到 select 只有 div 在 style 属性中具有 display: block 将是：

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

演示：

如果您想继续使用 CSS selectors，则等效表达式为：

div[class*="autocomplete-suggestions"][style *= "display: block"] >:nth-child(1)

Answer 2

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

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

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

How to check an element is having display block / none style in Protractor?

jasmine

selenium-webdriver

protractor

e2e-testing

angular-e2e