Why is a Stale Element exception occurring in this case?

Question

I have the following webdriver function:

this.clickButton = async function () {
  try {
    var buttonElement = await driver.findElement(By.className('button-class'));
    await buttonElement.click();
  }
  catch (err) {
    console.log(err);
  }
}

This sometimes gives a Stale Element exception.

I sometimes get that exception even if I change it to:

this.clickButton = async function () {
  try {
    await driver.findElement(By.className('button-class')).click();
  }
  catch (err) {
    console.log(err);
  }
}

My questions are:

1. Is it normal / expected that a Stale Reference exception can occur in this function, where I get the element reference, then use it on the very next line, or even the same line, doing nothing else with the page? (I could understand getting an 'element not found' exception, if no element of 'button-class' existed, but it doesn't make sense to me that the element exists at the time which I'm searching for it, but it's gone by the time the next line of code is reached.)

2. If the answer to question 1 is yes, then how is that possible? The element found is immediately acted upon, as it is in this case? As you can see, I am not reusing locators / elements; the function searches for the element each time it is called, and ends immediately after the click.

3. Is it relevant that clicking the button removes itself from the page? That is, could I be getting this exception because the button is gone after the click?

Answer 1

You must use the wait-until-clickable operator of selenium,this error occurred because it is still not appeared in DOM or still not clickable. Example Code:

var webDriver= new ChromeDriver(Constants.DriverPath);
WebDriverWait wait = new WebDriverWait(webDriver, TimeSpan.FromSeconds(5));
            wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementToBeClickable(By.ClassName('button-class')));

Then after that you can do your operation:

var buttonElement = await webDriver.FindElement(By.ClassName('button-class'));
    await buttonElement.Click();

In JavaScript there is no clickable but you can check for visible and enable state like :

driver.findElement(webdriver.By.name('q')).then(function (element) {
    driver.wait(function () {
        return element.isDisplayed().then(function (displayed) {
            if (!displayed)
                return false;

            return element.isEnabled();
        });
    });
    element.sendKeys('webdriver');
});