How do I select html injected from jQuery with Selenium IDE?

Question

I'm currently using Selenium IDE to fill a form. The form has a select box for countries:

<select id="id_country">
    <option>Canada</option>
    <option>England</option>
</select>

<select id="id_province"></select>

The province options above is not generated until a country with provinces is selected. jQuery takes care of that generation:

options = '<options>Alberta</options><options>Ontario</option>';
$('#id_province').html(options);

My Selenium IDE workflow looks like the following:

Command       Target           Value
select        id_country       label=Canada
select        id_province      label=Ontario

After Canada is selected, Alberta shows up as the default province but Ontario is not selected and I get the following error in my log:

[error] Option with label 'Ontario' not found

Does anyone know which Selenium IDE command I should specify to properly select a generated HTML from Javascript?

Answer 1

You probably need to pause while the thing loads, using a waitFor assertion, e.g.

Command                 Target                Value
waitForSelectOptions    id_province           glob:*Ontario*