Waiting for a control (select) to update

Question

I'm using Selenium Webdriver, based on the following Maven (Java) dependency:

    <dependency>
        <groupId>org.seleniumhq.selenium</groupId>
        <artifactId>selenium-server</artifactId>
        <version>3.3.1</version>
    </dependency>

I have an issue, where I can't figure out the criteria/condition to use where I have a set of cascading combo boxes (HTML select elements which, based on the option clicked on a parent, all it's children combos are updated with data brought via AJAX. Thought of extracting the "text" (list of option texts) from the children prior to triggering the update and then comparing it with the "text" of the same element to be changed, but that may not be exact, as may catch the text partially and not once it has entirely refreshed/updated.

Sounds a bit complex my explanation, but it's not a really strange scenario, I'll add an image for better understanding.

In red is the select element whose options are clicked, and based on which option is clicked, the contents of the select element in green are changed. So I'm looking for the wait condition on the green element to be used.

Cliente (red) select:

<select id="cliente" class="Combo">
<option value="302">
  ANDES AIRPORT SERVICES
</option>

<option value="301">
  CASTANO
</option>

<option value="2">
  CASTA&Ntilde;O
</option>

<option value="319">
  CASTANO FRIO
</option>

<option value="1176">
  CEMENTOS BIO BIO S A
</option>

<option value="1093">
  CENTROPUERTO LIMITADA
</option>

<option value="162">
  ESACHS
</option>

<option value="445">
  ESACHS TRANSPORTE
</option>

<option value="576">
  ESSBIO
</option>

<option value="161">
  CHILEXPRESS S.A.
</option>

<option value="450">
  ENANGAB
</option>

<option value="766">
  ENANGAB VINOS
</option>

<option value="311">
  FRIOCHILE CONSOLIDADO
</option>

<option value="852">
  INGGEPRO
</option>

<option value="424">
  MAQSA
</option>

<option value="1103">
  MAQUINARIAS INDEMAX LIMITADA
</option>

<option value="392">
  SITRANS LTDA.
</option>

<option value="1209">
  TRANSPORTES JOTA EFE S.A
</option>

<option value="1348">
  TRANSVER
</option>

<option value="1341">
  USC-GENERADORES
</option>

<option value="582">
  WAYPOINT OPERACIONES
</option>

<option value="1040">
  WAYPOINT I+D
</option>

<option value="53">
  WAYPOINT S.A.
</option>
</select>

Associated JavaScript event:

$("#cliente").change(function() {
    GruposListBox("idgrupo", $(this).val(), "nombre", "id", callbackGrupoListBox),
    zoneManager.loadZones($("#cliente").val()),
    sensorManager.clientId = $("#cliente").val(),
    sensorManager.getData()
}),

Sample Grupo (green) select, before clicking/selecting an element in cliente select:

 <select id="idgrupo" class="Combo">
<option value="-1" selected="selected">
  Todos
</option>

<option value="1142">
  ANF
</option>

<option value="244">
  General
</option>

<option value="1337">
  IPC
</option>

<option value="1141">
  SCL
</option>
  </select>

Sample Grupo (green) select after selecting an element in the Cliente select box:

<select id="idgrupo" class="Combo">
<option value="-1" selected="selected">
  Todos
</option>

<option value="272">
  General
</option>
</select>

Answer 1

You should be able to implement an explicit wait for the selection to be made on the element. Whatever selenium call you utilized to select the element, just wait on the element to be selected with a wait. Then after it's selected then check the options on the green select box.

org.openqa.selenium.support.ui.Select select = new org.openqa.selenium.support.ui.Select(driver.findElement(By.xpath("//select[@id='cliente']")));
select.selectByValue("576");
WebDriverWait wait = new WebDriverWait(driver, 15);
        wait.until(org.openqa.selenium.support.ui.ExpectedConditions.elementSelectedStateToBe(By.xpath("//select[@id='cliente']/option[@value='576']"), true));
        wait.until(org.openqa.selenium.support.ui.ExpectedConditions.numberOfElementsToBeMoreThan(By.xpath("//select[@id='idgrupo']/option"), 1);
select = new org.openqa.selenium.support.ui.Select(driver.findElement(By.xpath("//select[@id='idgrupo']")));
select.selectByValue("-1")

There are other ways to wait until. The main point being to utilize a wait for the selection to happen before moving on with the test.

It depends on the timing of the rendering in the browser, so you might have to wait more than once to get what you are after, but the wait should work to find what you are looking for and then you act on it.

Edit to above.