Wait until div is displayed

Question

I have Angular SPA application which is displaying login notification message. I use selenium web driver with Java:

   Thread.sleep(1500);
    
   WebElement element = failedLoginWebElement.findElement(By.xpath("//*[@id='toast-container']/div/div"));

From time to time the code is failing because message is delayed. How I can implement a listener which will wait for example 10 seconds the message to appear?

Answer 1

Waits in Selenium are one of the essential pieces of code that executes a test case. It runs on specific commands called scripts that make a page load.

Selenium wait commands have two sections

• Implicit wait
• Explicit wait

Implicit wait in Selenium

An implicit wait is a condition-less wait command in Selenium. Since it is condition-less, it is applied to all the web elements on the web page.

This can be applied implicit wait through three functions:

• implicitlyWait()
• pageLoadTimeout()
• setScriptTimeout()

Below will be focused on implicitlyWaits().

As the name suggests pageLoadTimeout() command waits for the page to load completely for a specified number of seconds. The setScriptTimeout() command waits for the asynchronous parts of the web page to finish loading for a specified number of seconds.

implicitlyWait() command

In implicitlyWait(), the WebDriver will poll the DOM for certain specified time units while trying to find any element. If the element is found earlier, the test executes at that point otherwise the WebDriver waits for the specified duration.

Ex:

import java.util.concurrent.TimeUnit;

WebDriver driver = new FirefoxDriver();
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
driver.get("https://somedomain/url_that_delays_loading");
WebElement myDynamicElement = driver.findElement(By.id("myDynamicElement"))

Explicit wait in Selenium

An explicit wait is a conditional wait strategy in Selenium in other words you wait until the condition you specified becomes true or the time duration has elapsed.

Explicit wait provides the following conditions for usage:

• alertIsPresent()
• elementSelectionStateToBe()
• elementToBeClickable()
• elementToBeSelected()
• frameToBeAvaliableAndSwitchToIt()
• invisibilityOfTheElementLocated()
• invisibilityOfElementWithText()
• presenceOfAllElementsLocatedBy()
• presenceOfElementLocated()
• textToBePresentInElement()
• textToBePresentInElementLocated()
• textToBePresentInElementValue()
• titleIs()
• titleContains()
• visibilityOf()
• visibilityOfAllElements()
• visibilityOfAllElementsLocatedBy()
• visibilityOfElementLocated()

Two types of explicit wait commands:

• WebDriverWait
• FluentWait

WebDriverWait

WebDriverWait specifies the condition and time for which the WebDriver needs to wait. Practically, WebDriverWait and explicit wait go synonymously as their definitions and usage match perfectly.

Ex:

WebElement firstResult = new WebDriverWait(driver, Duration.ofSeconds(10)).until(ExpectedConditions.elementToBeClickable(By.xpath("//a/h3")));

Fluent wait in Selenium

The fluent wait is similar to explicit wait in Selenium with one additional argument of frequency (also known as polling time). The frequency number tells the WebDriver to keep checking for the element at regular intervals and wait till the maximum of "Duration.ofSeconds".

Ex:

Wait<WebDriver> wait = new FluentWait<WebDriver>(driver)
  .withTimeout(Duration.ofSeconds(30))
  .pollingEvery(Duration.ofSeconds(5))
  .ignoring(NoSuchElementException.class);

In the above example, the maximum allowed time for waiting is specified as 30 seconds (Duration.ofSeconds(30)) and the polling time is 5 seconds (pollingEvery(Duration.ofSeconds(5))). With this arrangement, the WebDriver will keep checking for the element every 5 seconds to a maximum elapse of 30 seconds.

As for the above question you can use both Implicit,Explicit wait commands.

Answer 2

You can use ExpectedConditions

WebDriverWait wait = new WebDriverWait(driver, 10); // waits for up to 10 seconds
WebElement loginNotification = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("toast-container")));

This will wait for up to 10 seconds for the element with the ID toast-container to be visible. If the element is not visible within 10 seconds, a TimeoutException will be thrown.

You can also use wait.until()

WebDriverWait wait = new WebDriverWait(driver, 10); // waits for up to 10 seconds

WebElement loginNotification = wait.until(new ExpectedCondition<WebElement>() {
  @Override
  public WebElement apply(WebDriver d) {
    return d.findElement(By.id("toast-container"));
  }
});