How to wait for an Ajax call working on populating a drop down list in Selenium

Question

Ok so I have two drop down lists. List B populates based on the selection made on List A using the Ajax technology.

Now the problem is that once I select an option form List A, I am not able to see the List B populated as Ajax is taking a lot of time to load. I want to know how to use the Wait condition in this scenario to give Ajax enough time to Load. I am a beginner so I am sorry if my question sounds stupid. But I am really stuck at this for long.

I can't use:

WebDriverWait wait = new WebDriverWait(driver,30);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id/xpath)));

because the id, xpath etc remains the same always, even when the list is not populated.

Answer 1

I'd suggest two approaches, one is waiting for option Item x, the other way is waiting for options count to be greater than one.

So try the followings (untested Java code, so you might need to debug a bit):

Wait for one option you want (either by its value or text):

By byValue = By.cssSelector("#alertSubCatSelectBox > option[value='18222216517']");
//By byText = By.xpath("//select[@id='alertSubCatSelectBox']/option[text()='Item x']");
new WebDriverWait(driver, 10).until(ExpectedConditions.presenceOfElementLocated(byValue));

Or wait for options count bigger than one

WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(new ExpectedCondition<Boolean>() {
    public Boolean hasMoreThanOneOptions(WebDriver driver) {
        return driver.findElements(By.cssSelector("#alertSubCatSelectBox option")).size() > 1;
  }
});