CODEWITHSUNDEEP
protractor
Billa
Billa

Reputation: 13

How to wait on element when a new attribute gets added in the DOM?

functionality in my application is user will see a "loading" notification until data is loaded into table. While the notification "loading" is visible element in DOM looks like 

<div class="loading_message">
        <i class="loading_gear_symbol"></i> Loading data...
    </div>

When it is invisible new attribute "hidden" gets added

<div class="loading_message" hidden>
<i class="loading_gear_symbol"></i> Loading data...
</div>

And in other table when "loading" notification is invisible new attribute "style="display: none;" gets added

<div class="loading_message" style="display: none;">
<i class="loading_gear_symbol"></i> Loading data...
</div>

I want to wait until "loading" notification is invisible and then perform my action. I am using protractor for automation. How to wait until the "loading" notification is invisible?

Upvotes: 1

Views: 468

Answers (1)

Sudharsan Selvaraj
Sudharsan Selvaraj

Reputation: 4832

You can use protractor's ExpectedConditions along with browser.wait to achieve this. try the below code,

var EC = protractor.ExpectedConditions;
var loadingElement = $(".loading_message");
browser.wait(EC.invisibilityOf(loadingElement),waitTime);

Upvotes: 1

Related Questions