Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to wait for when an element is removed from DOM?

I run into this issue whenever I try to wait until an DOM element is removed from the current DOM tree on the web page that my protractor test is testing. I already got a hang of it when I try to wait until a DOM element becomes hidden with this nice technique offered by user2912739 in another thread.

var el = element(by.css('.your-css-class'));
return browser.wait(protractor.until.elementIsNotVisible(el));

This works pretty decent. However, when it comes to waiting for an element got removed from the DOM tree both .isDisplayed() and .isPresent() or the above lines do NOT seem to work. The test would continue run but it appears like it is trying to get that element but never succeeds so it eventually timed out based on the timeout setting the configuration file. For example. this is the log.

timeout: timed out after 30000 msec waiting for spec to complete

The use case of this can be quite frequent whenever you are dealing with testing if an element is removed from the DOM tree, for instance, a modal that is closed and removed from the page when user click actions that dismisses that modal element, or an element that you just want to "delete" so that it no longer exists on the page. So, in the test, you just want to continue the test run as soon as it is removed from DOM tree.

I've searched through protractor and web driver api, and it seems there is no api that does this job.

like image 354
vichsu Avatar asked Feb 10 '15 00:02

vichsu


People also ask

How can you tell if a element is removed from DOM?

We can detect whether an element has been removed DOM using the MutationObserver object. MutationObserver provides the ability to observe for changes being made to the DOM tree.

How do you wait for an element to appear?

If you need to wait for an element to appear, the async wait utilities allow you to wait for an assertion to be satisfied before proceeding. The wait utilities retry until the query passes or times out. The async methods return a Promise, so you must always use await or . then(done) when calling them.

How do you make a JavaScript function wait until an element exists before running it?

To wait to do something until an element exists in the DOM, you can use JavaScript MutatationObserver API. As the name suggests, it can be used to listen out for changes in the DOM. You can then fire a (callback) function in response to this.


1 Answers

not sure where you got protractor.until from as that's not part of the core library. This is how you would do it with protractor:

var el = element(by.css('.your-css-class'));
return browser.wait(function() {
  return el.isPresent().then(function(present) {
    return !present;
  })
});

Once feat(expectedConditions) is in (probably protractor 1.7), you can do:

var EC = protractor.ExpectedConditions;

var el = element(by.css('.your-css-class'));
return browser.wait(EC.not(EC.presenceOf(el)));
like image 187
hankduan Avatar answered Sep 30 '22 20:09

hankduan