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

Question

I'm having two div's which are having same css, only difference is the style is having display:block and 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>

How we could identify the which element is having the style display block or none in Protractor?

I need to click item3 div which is reside with display:block div.

I have tried the below code.

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();
                }
            })

from the above code i can see both div's.

I'm receiving 'could not find element 'click on undefined' error.

I'm trying end to end testing with Anuglar 7, protractor, jasmine and selenium web driver.

Answer 1

You need to filter your expression to take into consideration the style attribute.

You might find XPath selector easier to write/read/understand, you can use XPath contains() function to select only div which has display: block in the style attribute would be:

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

Demo:

---

If you would like to stay with CSS selectors the equivalent expression will be:

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