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.

score 1 · Accepted Answer · answered May 08 '19 at 08:16

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)

answered May 08 '19 at 08:16

Dmitri T

159,985
5
83
133

Thanks for your effort, I'll try your code and 'll update you. – Cegone May 08 '19 at 08:45
I've tried with your code.. working fine.. Thank you @Dmitri – Cegone May 08 '19 at 09:08

score 1 · Answer 2 · answered May 08 '19 at 14:30

1

If you're looking for an option using CSS as locator then you can use this

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

answered May 08 '19 at 14:30

Sergey Pleshakov

7,964
2
17
40

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

2 Answers2