I am getting Stale element exception when I try to automate angular js - drop down using Selenium with Java

Question

- I have around 40 items in my Drop down and I can see it by scrolling down in Gui - But when I inspect the DOM, I can see the code for only 10. I can see the rest only when I scroll it in GUI. (Mean to say- items are loaded in DOM only when I scroll) - I tried to pick the 11th item from the drop down using xpath. So I scrolled it using Java script and then waited for few seconds for items to be loaded and then tried to pick it using xpath. But getting stale element exception.

My katalon code: driver.findElement(By.xpath("//input[@role='combobox']")).click();

List options = driver.findElements(By.xpath("//ng-dropdown-panel//div[@role='option']"));

KeywordUtil.logInfo("effectiveDate Size: "+options.size())

for(int i=1;i < options.size();i++) {

   if ( options.get(i).getText().trim().equals("01/01/2016")) {

          KeywordUtil.logInfo("True: "+options.get(i).getText())

          options.get(i).click();

          break;

   }

   else{

          String str=driver.findElement(By.xpath("//ng-dropdown-panel//div[@role='option']["+i+"]")).getAttribute("id")

          KeywordUtil.logInfo("id: "+str)

          String[] a=str.split("-");

          WebElement abc = driver.findElement(By.xpath("//ng-dropdown-panel//div[contains(@id,'-"+Integer.parseInt(a[1])-1+"')]"))

          ((JavascriptExecutor)driver).executeScript("arguments[0].scrollIntoView(true);", abc);

          //WebElement abc = driver.findElements(By.xpath("//ng-dropdown-panel"))

//((JavascriptExecutor)driver).executeScript("arguments[0].scrollTo(0,0);");

          //((JavascriptExecutor)driver).executeScript("arguments[0].scrollIntoView(true);", options.get(i));

   Thread.sleep(1000);

// WebElement r=driver.findElement(By.xpath("//ng-dropdown-panel//div[@role='option']"))

// ((JavascriptExecutor)driver).executeScript("window.scrollBy(0,document.body.scrollHeight)");

// options = driver.findElements(By.xpath("//ng-dropdown-panel//div[@role='option']"));

// WebElement scroll = driver.findElement(By.xpath("//ng-dropdown-panel//div[@role='option']"));

// scroll.sendKeys(Keys.PAGE_UP);

   }

}

Answer 1

This is likely to happen because you are using some WebElement (that you have located before you scroll) as the base for inner elements lookup.

After you had scrolled, the dom was rebuilt so that your "base" element went stale.

Try to find your elements after scroll using your driver as the search context. Not the elements you have located before.

Answer 2

StaleElementReferenceException occurs when the old element occurs in DOM. Lets suppose that there is an element found on webpage. If the DOM changes, then the WebElement goes stale. In such scenario, when we try to interact with this element then StaleElementReferenceException exception is thrown.

In software testing solutions, we fix this exception by any of the below 02 approaches:

1) Adding the problem code in try catch block

Sample code:

element = driver.findElement(locator); try { element.click() }

catch (StaleElementReferenceException e) ( element = driver.findElement(locator); // re-identify the same element element.click(); )

2) Add a refresh command before performing any operation

Sample code:

element = driver.findElement(locator); driver.navigate().refresh(); // add this line element = driver.findElement(locator); // perform the same operation by adding one step to refersh the page

try { element.click() }

catch(StaleElementReferenceException e) { element = driver.findElement(locator); // perform the same operation by adding one step to refresh the page element.click() }