Selecting an html element that is loaded after documents loads, using selenium find element by xpath to select the element

Question

How my web application works:

My web application loads a div with radio button input elements after conditions in the form above are changed. The form above will allow the manager to select a date and time. The div below will load with all the employees available at that date and time. I give this div the id "EmployeeListBox". Everytime conditions change in the form above the EmployeeListBox gets radio buttons injected using jquery's append method.

Okay so that's the idea of how my web application works. What I am trying to do is click the first radio button in the div EmployeeListBox after the form gets changed, using selenium web driver for Firefox in java. This is the line that I need to fix:

`driver.findElement(By.xpath("//[@id="EmployeeCell"]/span[2]/input")).click();`

When I run this xpath I recive this error: Exception processing script - Element not found in the cache - perhaps the page has changed since it was looked up. I guess the xpaths I have tried do not work because the elements are dynamically loaded.

Here is the JS code that loads the EmployeeListBox.

AvialableStaff = JSON.parse( data );
var MSG = "";
$('#EmployeeListBox').empty();
/*for each employee in AvialableStaff load the #CreateShiftLifeOfEmployees Select option*/
var eico = 0;
for (   var Staff in AvialableStaff )
{               
    var ID = AvialableStaff[Staff]["employeeID"];
    var name = AvialableStaff[Staff]["Firstname"]+" "+ AvialableStaff[Staff]["Lastname"];   
    MSG += "<div id = \"EmployeeCell\">";
    MSG += "<span class = \"MakeLeft\" id = \"EI"+eico+"\" > "+name+" </span>";                 
    MSG += "<span class = \"MakeRight\"><input type = \"radio\" name=\"ChooseStaff\" value = \""+ID+"\" class = \"CSTAFFradioButtons\" />    </span>";
    MSG += "</div>";                    
    eico++;
}
$('#EmployeeListBox').append( MSG );    

Here is my EmployeeListBox without the employee cells:

        <p>Select an available employee</p>
        <div id = "CSEmployeeList" >        
            <div id = "StaffAvaileP"> <h3> Staff Available</h3> </div>
            <div id = "EmployeeListBox">
                <!-- Radio Buttons go here -->

            </div>
        </div>

This is what the employee box looks like after the form has been changed and employee radio buttons have been inserted:

<div id="EmployeeListBox">

    <div id="EmployeeCell">
        <span class="MakeLeft" id="EI0"> Person One </span>
        <span class="MakeRight">
            <input type="radio" name="ChooseStaff" value="9" class="CSTAFFradioButtons">    
        </span>
    </div>

    <div id="EmployeeCell">
        <span class="MakeLeft" id="EI1"> Person Two </span>
        <span class="MakeRight">
            <input type="radio" name="ChooseStaff" value="10" class="CSTAFFradioButtons">    
        </span>
    </div>

    <div id="EmployeeCell">
        <span class="MakeLeft" id="EI2"> Person Three </span>
        <span class="MakeRight">
            <input type="radio" name="ChooseStaff" value="11" class="CSTAFFradioButtons">    
        </span>
    </div>

</div><!--End of EmployeeListBox --> 

Here is my java method which runs the test:

/** Method testCreateShifts
 *      purpose: Loads shifts with realistic shift data like the 
 *               real life Saturday schedule.
 */
public static void testCreateShifts()
{
    driver.get(theurl);        
    String createshiftPage = "https://***/index.php?/CreateAShift";
    driver.get(createshiftPage);
    new Select(driver.findElement(By.id("Day"))).selectByVisibleText("11");
    new Select(driver.findElement(By.id("StartTime"))).selectByVisibleText("8:30am");
    new Select(driver.findElement(By.id("EndTime"))).selectByVisibleText("2:00pm");
    driver.findElement(By.id("Instructor")).click();       

    /*TODO: Currently trying to click on first employee in employee list box*/
    driver.findElement(By.xpath("//*[@id=\"EmployeeCell\"]/span[2]/input")).click();



    driver.findElement(By.id("CreateShiftSubmit")).click();
}/*End of Method testCreateShifts*/

So using selenium in java how do I click first radio button that is in the list after the EmployeeListBox gets reloaded by jquery?

Answer 1

I found out what was wrong. I needed to give my webapplication time to load. I told my java test to wait 1 second with this line.

try {Thread.sleep(2000);}catch (InterruptedException ex) {  }