Как проверить, что элемент имеет стиль отображения блока / нет в транспортире?

Question

У меня есть два div, которые имеют одинаковый css, единственное отличие в том, что у стиля есть 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>

Как мы могли бы определить, какой элемент имеет блок отображения стиляили его нет в Protractor?

Мне нужно щелкнуть по элементу div3, который находится вместе с дисплеем: блок 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, транспортира,Веб-драйвер для жасмина и селена.

Answer 1

Если вы ищете вариант с использованием CSS в качестве локатора, то вы можете использовать это

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

Answer 2

Вам необходимо отфильтровать выражение, чтобы учесть атрибут style .

Возможно, вам будет проще XPath селектор писать / читать / понимать, вы можете использовать XPath contains() функция , чтобы выбрать только 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)