selenium - clicking on radio button generated by javascript

Question

My code is written in Java.

I have a set of radio button that is dynamically generated by javascript. I want to click on one of them.

I use xpath but it doesn't work. It says

Exception in thread "main" org.openqa.selenium.NoSuchElementException: Unable to locate element:

I tried both deliveryType method below, after I "Inspect elements" on google chrome.

 //WebElement deliveryType = driver.findElement(By.xpath("//div[contains(@id, 'checkout-shipping-method-load')]//*[contains(@name, 'shipping_method')]"));
    //WebElement deliveryType = driver.findElement(By.cssSelector("[name='shipping_method'][id='s_method_matrixrate_matrixrate_5983']"));
    //deliveryType.click();

Below is the inspected element for that radio button.

 <div id="checkout-shipping-method-load">
  <dl class="sp-methods">
  <dt>Select Shipping Method</dt>
    <dd>
        <ul>
          <li>
            <input name="shipping_method" type="radio" value="matrixrate_matrixrate_5983" id="s_method_matrixrate_matrixrate_5983" class="radio validation-passed">
<label for="s_method_matrixrate_matrixrate_5983">Standard Shipping<span class="price">NT$300</span></label></li>
         <li>
           <input name="shipping_method" type="radio" value="matrixrate_matrixrate_5991" id="s_method_matrixrate_matrixrate_5991" class="radio validation-passed">
<label for="s_method_matrixrate_matrixrate_5991">Express Shipping<span class="price">NT$1,200</span></label></li>
        </ul>
    </dd>
  </dl>
</div>

I have tried to code my script to click on it. I tried my xpath to follow "inspect element" and "view page source". Both give me same error as no such element found.

How do I make my selenium script to click on one of the radio button that are dynamically generated by javascript?

My xpath should point to raw javascript coding or the html generated by javascript after window load?

Kindly help me.

Closed: I have used Implict Wait to wait for my javascript to run and load my html. After loaded, I used List to store all of my radio buttons. From the List, I get it by index.

Thanks to Girish Sortur & JeffC.

Below is my code.

driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
List<WebElement> methods = driver.findElements(By.cssSelector("input[name='shipping_method']"));
methods.get(0).click();

Answer 1

The best way to click on a dynamic element is to wait for it to appear. In Selenium you can wait for an element until it appears using WebDriverWait() method. ExpectedConditions are used in Selenium to check for expectations. Here you can use expect the visibility of the element. Here's a sample code -

WebElement radioBtn = driver.findElement(By.xpath("//input[@id='s_method_matrixrate_matrixrate_5983']"));
new WebDriverWait(driver,10).until(ExpectedConditions.visibilityOf(radioBtn));

Also you can try with FluentWait which is the best option to wait for an element to appear. Here's how to do it -

new FluentWait<WebElement>(radioBtn).
    withTimeout(50, TimeUnit.SECONDS).
    pollingEvery(2,TimeUnit.SECONDS);

FluentWait waits for an element to appear with the options that we specify. Polling checks for the element's presence at that interval. Provide timeout based on the time element takes to appear in DOM. Hope this helps.

Answer 2

I would pull all the INPUT s corresponding to shipping methods into a collection methods and then click the one that I wanted. Sample code is below.

List<WebElement> methods = driver.findElements(By.cssSelector("input[name='shipping_method']"));
methods.get(0).click(); // clicks the first element, Standard Shipping