0

我有两个具有相同 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、量角器、jasmine 和 selenium 网络驱动程序进行端到端测试。

4

2 回答 2

1

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

您可能会发现XPath 选择器更易于编写/阅读/理解，您可以使用XPathcontains()函数 仅选择属性div中具有以下内容display: block的选项：style

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

演示：

在此处输入图像描述

如果您想继续使用CSS 选择器，等效表达式将是：

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

在此处输入图像描述

于 2019-05-08T08:16:33.520 回答
1

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

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

于 2019-05-08T14:30:52.667 回答