How to monitor a web page and know when a new html element is appeared using Selenium?

Question

I have a web page that sometimes new elements are added dynamically like :

<span class="chat_message">| New Login</span>

How do i capture when the above code is added to my page ?

My code trials:

WebDriver driver = new ChromeDriver () ;
 driver.get("http://www.example.com") ;
// code to monitor the new span

Answer 1

If you know the locator of that element - have a "while" loop that has a findElement() in it, and catches NoSuchElementException. If the element is not present, you'll catch the exception, pause for some time (though sleep), and will start a new loop cycle. If the exception is not thrown, the element is present; change your while controlling variable to true, and continue.

I'd suggest to have a counter how many times did the loop ran, and if it reaches a certain threshold - break out of it, with an error/exception - so you don't get stuck in an infinite loop.

Congrats - you have just implemented WebDriverWait with the presenceOfElementLocated() ExpectedConditions. You can go with it (the vanilla selenium version), or stick with the homegrown solution, which will give you more granular control & decision tree - but will require more coding.

---

If you don't have a specific element, but just want to see when the page itself changes, the algorithm is the same, but: before starting the loop, get the page source. Inside its body, get it again; if the two are different, that's your breakout condition.
This approach though is going to be affected by the slightest change in the page.

Answer 2

Kindly use below code snippet. findElements will return an empty list if no matching elements are found instead of an exception however, I have done the exception handling though.

import java.awt.AWTException;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class Testing {
 public static WebDriver driver;

 @Test
 public void test() throws InterruptedException, AWTException {
  WebDriver driver = new ChromeDriver();
  driver.get("http://www.example.com");
  Boolean isPresent = driver.findElements(By.xpath("//span[@class='chat_message']")).size() > 0;
  try {
   if (isPresent == true) {
    System.out.println("New Login is added to my page");
   } else {
    System.out.println("New Login is not added to my page");
   }
  } catch (Exception e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
 }
}

This will return true if at least one element is found and false if it does not exist.

Kindly accept the answer if it meets your expectation and do the upvote.Thanks in advance.

Answer 3

When you mention you need to capture the element the usecase boils down to induce WebDriverWait with ExpectedConditions as visibilityOfElementLocated(By locator) so you can extract any of the element attributes:

• innerHTML
• class attribute
• outerHTML

In these cases the best option would be to create a function as follows:

public void getElementAttribute()
{
    try {
      System.out.println(new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//span[@class='chat_message']"))).getAttribute("innerHTML"));
    }
    catch(Exception TimeoutException) {
      System.out.println("Element no found");
    }
}

Now, you can call this function from anywhere within your program to check for the visiblity of the element as follows:

getElementAttribute();

Note:

• As the element is a dynamic element you need to induce WebDriverWait.
• As you need to capture the element visibilityOfElementLocated fits just perfect.
• As it happens sometimes you need to wrapup the line of code within a try-catch {} block and incase of an exception gracefully handle TimeoutException and continue with your next steps.