Selenium-webdriver (Java Script) wait for element to disappear

Question

driver.wait(until.elementIsPresent(By.css(".popup-backdrop fade")), 15000);

How do I do the opposite of this? I want to wait till the ".popup-backdrop fade" overlay disappears before I click on an element.

I am using Selenium-webdriver (using Javascript and not using Java or Python or C#)

Answer 1

Haven't found the negative wait in the code source. A solution would be to implement your own condition:

var webdriver = require('selenium-webdriver');
var until = webdriver.until;
var By = webdriver.By;

until.elementIsNotPresent = function elementIsNotPresent(locator) {
  return new until.Condition('for no element to be located ' + locator, function(driver) {
    return driver.findElements(locator).then(function(elements) {
      return elements.length == 0;
    });
  });
};

driver.wait(until.elementIsNotPresent(By.css(".popup-backdrop fade")), 15000);

Answer 2

As indicated on the comment to the accepted question, until.Condition is not a valid constructor in Selenium 4. Instead, one can do this:

const { By, until, Condition } = require('selenium-webdriver');

until.elementIsNotPresent = function elementIsNotPresent(locator) {
  return new Condition('for no element to be located ' + locator, function(driver) {
    return driver.findElements(locator).then(function(elements) {
      return elements.length === 0;
    });
  });
};

The reference to using Condition can be found here: https://github.com/seleniumhq/selenium/issues/2755

Answer 3

This is another solution of the problem, more inline (but it works, as opposed to the accepted answer which crashes with "TypeError: until.Condition is not a constructor"):

    await this._webDriver.wait(() => {
        return this._webDriver.findElements(By.id('loadingIndicator')).then(function(found) {
            return found.length === 0;
        });
    }, 3000, 'The element should disappear');