How to perform click on an element using selenium for which I am getting staleState Exception

Question

Problem: There are couple of radio buttons with the same ID and I need to perform click on these. The first radio button gets the click where the second one is getting StaleElementReferenceException.

HTML:

<solvup-radio-type _ngcontent-c7="" _nghost-c10="">
   <div _ngcontent-c10="" class="validation-error ng-untouched ng-pristine ng-invalid">
      <solvup-label _ngcontent-c10="" _nghost-c33="">
         <label _ngcontent-c33="" class="control-label">
            Have you been able to resolve the issue based on this information? <!----><span _ngcontent-c33="" class="required-mark">*</span> 
         </label>
         <solvup-tooltip _ngcontent-c33="" _nghost-c36="">
            <!---->
         </solvup-tooltip>
      </solvup-label>
      <!---->
      <div _ngcontent-c10="" class="radio">
         <label _ngcontent-c10="">
         <input _ngcontent-c10="" type="radio" id="ts_note_questions" class="ng-untouched ng-pristine ng-invalid">
         Yes, issue is resolved - close case
         </label>
      </div>
      <div _ngcontent-c10="" class="radio">
         <label _ngcontent-c10="">
         <input _ngcontent-c10="" type="radio" id="ts_note_questions" class="ng-untouched ng-pristine ng-invalid">
         No - continue to next step
         </label>
      </div>
   </div>
   <solvup-hint-text _ngcontent-c10="" _nghost-c34="">
      <!---->
      <p _ngcontent-c34="" class="help-block"></p>
   </solvup-hint-text>
   <solvup-validation-messages _ngcontent-c10="" _nghost-c35="">
      <!---->
      <!---->
      <div _ngcontent-c35="" class="form-group">
         <small _ngcontent-c35="" class="err"><i _ngcontent-c35="" aria-hidden="true" class="fa fa-exclamation-triangle"></i>  Please select an option</small>
      </div>
   </solvup-validation-messages>
   [![This is the radio button - the second one with text no that i intend to click][1]][1]
</solvup-radio-type>

Selenium Code:

@Given("^User fills details in First of Five Troubleshooting  page$")
    public void user_fills_details_in_First_of_Five_Troubleshooting_page() throws Throwable {
        Thread.sleep(2000);
        List<WebElement> li = driver.findElements(By.className("radio"));
        Actions ob = new Actions(driver);
        ob.moveToElement(li.get(1));
        ob.click(li.get(1));
        Action action = ob.build();
        action.perform();
    }

Can anybody suggest me how it can be handled so that I can click the second radio button?

Answer 1

When element gets stale it means that its position inside DOM was changed after you saved it within an object in your code. So to avoid such the cases you can try to get rid of the actions in the middle like moving to the object.

Instead of:

    List<WebElement> li = driver.findElements(By.className("radio"));
    Actions ob = new Actions(driver);
    ob.moveToElement(li.get(1));
    ob.click(li.get(1));
    Action action = ob.build();
    action.perform();

Try this:

    WebElement secondRadioButton = driver.findElement(By.xpath("//div[@class='radio'][2]"));
    secondRadioButton.click();

Answer 2

Try introducing a FluentWait that will ignore the StaleElementReferenceException like this:

     FluentWait<WebDriver> fluentWait = new FluentWait<>(driver)
            .pollingEvery(Duration.ofMillis(500))
            .ignoring(StaleElementReferenceException.class)
            .ignoring(NotFoundException.class)
            .withTimeout(Duration.ofSeconds(10));

Then locate the desired radio:

 WebElement radio = fluentWait.until(ExpectedConditions.visibilityOfElementLocated(locator))

While for the locator I would go with directly for the input element of the second radio:

By locator = By.cssSelector("input[type='radio']:nth-child(2)")

I am not sure if the nth-child(2) will point directly to it, so this should be tested (might need to adjust the number). If nth-child does not work at all, capture the list and select the second radio (in this case use the ExpectedConditions.visibilityOfAllElementsLocatedBy as a condition for FluentWait).