How to click a button from multiple buttons on same page in selenium web driver?

Question

Here my requirement is need to click on one button from multiple buttons, but which are having same class and type on same page. I need to click on button number 4 from below example.

For example

1. button type="button" class="button" onclick="checkout.setMethod();"><span><span>Continue</span></span></button>

2. button type="submit" class="button" onclick="onepageLogin(this)"><span><span>Login</span></span></button>

3. button type="button" title="Continue" class="button" onclick="billing.save()"><span><span>Continue</span></span></button> 

4. <button type="button" class="button" title="Continue" onclick="shipping.save()"><span><span>Continue</span></span></button>   

I have tried various methods Please look at below mentioned which I have tried.

i)
WebElement button = driver.findElements(By.cssSelector("button[@class='button' and @type = 'button' and @onclick = 'shippingMethod.save()']")).get(3); button.click();

ii) driver.findElements(By.xpath("//div[@oneclick,'shippingMethod.save()']//button[contains(text(),'continue')]"))).click();

iii)

String cssSelectorOfSameElements="button[class='button'][type='button']";
List<WebElement> a=driver.findElements(By.cssSelector("button[@class='button' and @type = 'button']"));

//  a.get(0).click();            
//  a.get(1).click();        
//  a.get(2).click();   


a.get(3).click();                                                                                     

Please suggest me, to overcome this issue. Looking forward to your suggestion. See my html code.

 

Continue

</div>
<div class="col-2">
<h3>Returning Customer</h3>
<form id="login-form" action="http://stage-retail.example.com/customer/account/loginPost/" method="post">
<fieldset>
<input name="form_key" type="hidden" value="qTQ1K2M3AHVALnNg" />
<ul class="form-list">
<li>
<label for="login-email" class="required"><em>*</em>E-mail</label>
<div class="input-box">
<input type="text" class="input-text required-entry validate-email" id="login-email" name="login[username]" value="" />
</div>
</li>
<li>
<label for="login-password" class="required"><em>*</em>Password</label>
<div class="input-box">
<input type="password" class="input-text required-entry" id="login-password" name="login[password]" />
</div>
</li>
</ul>
<div class="buttons-set">
<div class="clearfix">
<a href="http://example.com/customer/account/forgotpassword/" class="f-left">Forgot your password?</a>
</div>
<button type="submit" class="button" onclick="onepageLogin(this)"><span><span>Login</span></span></button>
</div>
<div class="other-login">
<h3 style="display: none;" class="mobile-title">Other Checkout Options</h3>
<div class="fb-connect-container">
<div class="aw-fb-login">
<a class="aw-fb-login-button" href="#" onclick="aw_fb_login(); return false;">Sign in with Facebook</a>
</div>
<div id="fb-loader" style="display:none;">
<p class="loader" id="loading_mask_loader">
<img src="http://www.example.com/preloader.gif" alt="Loading..." />

<span>Please wait...</span>
</p>
</div>
</div>
<div class="amazon-login-default">
<strong>- OR -</strong>
<div class="button-holder" id="AmazonPayButtonBefore"></div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</li>
<li id="opc-billing" class="section saved">
<div class="step-title">
<span class="number">2</span>
<h2>Billing Information</h2>
<a href="#">Edit</a>

</div>
<div id="checkout-step-billing" class="step a-item" style="display:none;">
<form id="co-billing-form" action="">
<div class="fieldset">
<p class="required">* Required Fields</p>
<ul class="form-list">
<li id="billing-new-address-form" class="scaffold-form">
<div class="fieldset">
<input type="hidden" name="billing[address_id]" value="6427608" id="billing:address_id" />
<ul>
<li class="fields">
<div class="field">
<label for="billing:email" class="required"><em>*</em>Email Address</label>
<div class="input-box">
<input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="billing[email]" id="billing:email" value="[email protected]" title="Email Address" class="input-text validate-email required-entry" />
</div>
</div>
</li>
<li class="fields"><div class="customer-name">
<div class="field name-firstname">
<label for="billing:firstname" class="required"><em>*</em>First Name:</label>
<div class="input-box">
<input type="text" id="billing:firstname" name="billing[firstname]" value="f" title="First Name" maxlength="255" class="input-text required-entry" />
</div>
</div>
<div class="field name-lastname">
<label for="billing:lastname" class="required"><em>*</em>Last Name:</label>
<div class="input-box">
<input type="text" id="billing:lastname" name="billing[lastname]" value="k" title="Last Name" maxlength="255" class="input-text required-entry" />
</div>
</div>
</div>
</li>
<li class="wide">
<label for="billing:street1" class="required"><em>*</em>Address</label>
<div class="input-box">
<input autocomplete="on" type="text" title="Street Address" name="billing[street][]" id="billing:street1" value="840 Massachusetts Avenue" class="input-text validate-english-alphanum-with-spaces required-entry" />
</div>
</li>
<li class="wide">
<label for="billing:street2">Apt, Suite, P.O.</label>
<div class="input-box">
<input autocomplete="off" type="text" title="Apt, Suite, P.O." name="billing[street][]" id="billing:street2" value="" class="input-text validate-english-alphanum-with-spaces " maxlength="12" />
</div>
</li>
<li class="fields">
<div class="field">
<label for="billing:country_id" class="required"><em>*</em>Country</label>


</div>
<div class="field">
<label for="billing:region_id" class="required"><em>*</em>State/Province</label>
<div class="input-box">
<select id="billing:region_id" name="billing[region_id]" title="State/Province" class="validate-select" style="display:none;">
<option value="">Please select region, state or province</option>
</select>
<input type="text" id="billing:region" name="billing[region]" value="Massachusetts" title="State/Province" class="input-text regions" style="display:none;" />
</div>
</div>
</li>
<li class="fields">
<div class="field">
<label for="billing:city" class="required"><em>*</em>City</label>
<div class="input-box">
<input type="text" title="City" name="billing[city]" value="Lexington" class="input-text validate-english-alphanum-with-spaces required-entry" id="billing:city" />
</div>
</div>
<div class="field">
<label for="billing:postcode" class="required"><em>*</em>Zip</label>
<div class="input-box">
<input type="text" title="Zip" name="billing[postcode]" id="billing:postcode" value="02420" class="input-text validate-zip-international required-entry" />
</div>
</div>
</li>
<li class="fields">
<div class="field">
<label for="billing:telephone" class="required"><em>*</em>Telephone</label>
<div class="input-box">
<input type="tel" maxlength="20" name="billing[telephone]" value="321456987456" title="Telephone" class="input-text validate-phone-length validate-phoneLax required-entry validate-length minimum-length-10 maximum-length-255" id="billing:telephone" />
</div>
</div>
</li>
<li class="fields" id="register-customer-password">
<div class="field">
<label for="billing:customer_password" class="required"><em>*</em>Password</label>
<div class="input-box">
<input type="password" name="billing[customer_password]" id="billing:customer_password" title="Password" class="input-text required-entry validate-password" />
</div>
</div>
<div class="field">
<label for="billing:confirm_password" class="required"><em>*</em>Confirm Password</label>
<div class="input-box">
<input type="password" name="billing[confirm_password]" title="Confirm Password" id="billing:confirm_password" class="input-text required-entry validate-cpassword" />
</div>
</div>
</li>
<li class="no-display"><input type="hidden" name="billing[save_in_address_book]" value="1" /></li>
</ul>
<div class="remember-me-popup">
<div class="remember-me-popup-head">
<h3>What's this?</h3>
<a href="#" class="remember-me-popup-close" title="Close">Close</a>

</div>
<div class="remember-me-popup-body">
<p>Checking &quot;Remember Me&quot; will let you access your shopping cart on this computer when you are logged out</p>
<div class="remember-me-popup-close-button a-right">
<a href="#" class="remember-me-popup-close button" title="Close"><span>Close</span></a>
</div>
</div>
</div>
</div>
</li>
<li class="control">
<input type="radio" name="billing[use_for_shipping]" id="billing:use_for_shipping_yes" value="1" checked="checked" title="Ship to this address" onclick="$('shipping:same_as_billing').checked = true;" class="radio" /><label for="billing:use_for_shipping_yes">Ship to this address</label></li>
<li class="control">
<input type="radio" name="billing[use_for_shipping]" id="billing:use_for_shipping_no" value="0" title="Ship to different address" onclick="$('shipping:same_as_billing').checked = false;" class="radio" /><label for="billing:use_for_shipping_no">Ship to different address</label>
</li>
</ul>
<div class="buttons-set" id="billing-buttons-container">
<button type="button" title="Continue" class="button" onclick="billing.save()"><span><span>Continue</span></span></button>
<span class="please-wait" id="billing-please-wait" style="display:none;">
<img src="http://www.example.com/skin/frontend/rwd /opc-ajax-loader.gif" alt="Loading next step..." title="Loading next step..." class="v-middle" /> Loading next step... </span>
</div>
</div>
</form>
</div>
</li>
<li id="opc-shipping" class="section allow saved">
<div class="step-title">
<span class="number">3</span>
<h2>Shipping Address</h2>
<a href="#">Edit</a>

</div>
<div id="checkout-step-shipping" class="step a-item" style="display:none;">
<form action="" id="co-shipping-form">
<ul class="form-list">
<li id="shipping-new-address-form" class="scaffold-form">
<div class="fieldset">
<p class="required">* Required Fields</p>
<input type="hidden" name="shipping[address_id]" value="6427609" id="shipping:address_id" />
<ul>
<li class="fields"><div class="customer-name">
<div class="field name-firstname">
<label for="shipping:firstname" class="required"><em>*</em>First Name:</label>
<div class="input-box">
<input type="text" id="shipping:firstname" name="shipping[firstname]" value="f" title="First Name" maxlength="255" class="input-text required-entry" onchange="shipping.setSameAsBilling(false)" />
</div>
</div>
<div class="field name-lastname">
<label for="shipping:lastname" class="required"><em>*</em>Last Name:</label>
<div class="input-box">
<input type="text" id="shipping:lastname" name="shipping[lastname]" value="k" title="Last Name" maxlength="255" class="input-text required-entry" onchange="shipping.setSameAsBilling(false)" />
</div>
</div>
</div>
</li>
<li class="wide">
<label for="shipping:street1" class="required"><em>*</em>Address</label>
<div class="input-box">
<input type="text" title="Street Address" name="shipping[street][]" id="shipping:street1" value="840 Massachusetts Avenue" class="input-text validate-english-alphanum-with-spaces required-entry" onchange="shipping.setSameAsBilling(false);" />
</div>
</li>
<li class="wide">
<label for="shipping:street2">Apt, Suite, P.O.</label>
<div class="input-box">
<input type="text" title="Apt, Suite, P.O." name="shipping[street][]" id="shipping:street2" value="" class="input-text validate-english-alphanum-with-spaces" onchange="shipping.setSameAsBilling(false);" maxlength="12" />
</div>
</li>
<li class="fields">
<div class="field">
<label for="shipping:country_id" class="required"><em>*</em>Country</label>
<div class="input-box">

</div>
<div class="field">
<label for="shipping:region" class="required"><em>*</em>State/Province</label>
<div class="input-box">
<select id="shipping:region_id" name="shipping[region_id]" title="State/Province" class="validate-select" style="display:none;">
<option value="">Please select region, state or province</option>
</select>
<input type="text" id="shipping:region" name="shipping[region]" value="Massachusetts" title="State/Province" class="input-text regions" style="display:none;" />
</div>
</div>
</li>
<li class="fields">
<div class="field">
<label for="shipping:city" class="required"><em>*</em>City</label>
<div class="input-box">
<input type="text" title="City" name="shipping[city]" value="Lexington" class="input-text validate-english-alphanum-with-spaces required-entry" id="shipping:city" onchange="shipping.setSameAsBilling(false);" />
</div>
</div>
<div class="field">
<label for="shipping:postcode" class="required"><em>*</em>Zip</label>
<div class="input-box">
<input type="text" title="Zip" name="shipping[postcode]" id="shipping:postcode" value="02420" class="input-text validate-zip-international required-entry" onchange="shipping.setSameAsBilling(false);" />
</div>
</div>
</li>
<li class="fields">
<div class="field">
<label for="shipping:telephone" class="required"><em>*</em>Telephone</label>
<div class="input-box">
<input type="tel" maxlength="20" name="shipping[telephone]" value="321456987456" title="Telephone" class="input-text validate-phone-length validate-phoneLax required-entry validate-length minimum-length-10 maximum-length-255" id="shipping:telephone" onchange="shipping.setSameAsBilling(false);" />
</div>
</div>
</li>
<li class="no-display"><input type="hidden" name="shipping[save_in_address_book]" value="1" /></li>
</ul>
</div>
</li>
<li class="control">
<input type="checkbox" name="shipping[same_as_billing]" id="shipping:same_as_billing" value="1" checked="checked" title="Use Billing Address" onclick="shipping.setSameAsBilling(this.checked)" class="checkbox" /><label for="shipping:same_as_billing">Use Billing Address</label>
</li>
</ul>
<div class="buttons-set" id="shipping-buttons-container">
<p class="back-link"><a href="#" onclick="checkout.back(); return false;"><small>&laquo; </small>Back</a></p>
<button type="button" class="button" title="Continue" onclick="shipping.save()"><span><span>Continue</span></span></button>
<span id="shipping-please-wait" class="please-wait" style="display:none;">
<img src="http://www.example.com/skin/frontend /images/opc-ajax-loader.gif" alt="Loading next step..." title="Loading next step..." class="v-middle" /> Loading next step... </span>
</div>
</form>
</div>
</li>
<li id="opc-shipping_method" class="section allow">
<div class="step-title">
<span class="number">4</span>
<h2>Shipping Method</h2>
<a href="#">Edit</a>

</div>
<div id="checkout-step-shipping_method" class="step a-item" style="display:none;">
<form id="co-shipping-method-form" action="">
<div id="checkout-shipping-method-load">
<!-- Content loaded dynamically -->
<h3 class="required mobile-special"><em>*</em> Delivery time is estimated in business days</h3>
<input type=hidden id="transaction_id" value='' />
<dl class="sp-methods">
<dd>
<ul>
<li class="header-sp">
<span class="select-method-frame required"><em>*</em> Select Method</span>
<label>
<span class="service">Service</span>
<span class="price-cell">Delivery Time</span>
<span class="price-cell">Cost</span>
</label>
</li>
<!--<dd>-->
<!--<ul>-->
<li>
<div class="select-method-frame">
<span class="no-display"><input name="shipping_method" type="radio" value="shqusps1st_1st_class_US48_envelope" id="s_method_shqusps1st_1st_class_US48_envelope" checked="checked" /></span>
</div>
<label for="s_method_shqusps1st_1st_class_US48_envelope">
<span class="service">
<span class="method-title">Standard </span> <span class="method-extra"></span> </span>
<span class="price-cell price-cell-days">
5 - 6 </span>
<span class="price-cell">
<span class="price">$0.00</span> </span>
</label>
</li>
<!--</ul>-->
<!--</dd>-->
</ul>
</dd>
</dl>
</div>
<div id="onepage-checkout-shipping-method-additional-load">
</div>
<div class="buttons-set" id="shipping-method-buttons-container">
<p class="back-link"><a href="#" onclick="checkout.back(); return false;"><small>&laquo; </small>Back</a></p>
<button type="button" class="button" onclick="shippingMethod.save()"><span><span>Continue</span></span></button>
<span id="shipping-method-please-wait" class="please-wait" style="display:none;">
<img src="http://www.example.com/skin/frontend/rwd /images/opc-ajax-loader.gif" alt="Loading next step..." title="Loading next step..." class="v-middle" /> Loading next step... </span>
</div>

Answer 1

Why your attempts failed:

• your first attempt:

  WebElement button = driver.findElements(By.cssSelector("button[@class='button' and @type = 'button' and @onclick = 'shippingMethod.save()']")).get(3);    button.click();
  

  The CSS selector is not valid - attributes should not start with @, and is not used to join conditions in the CSS selectors.

• your second attempt:

  driver.findElements(By.xpath("//div[@oneclick,'shippingMethod.save()']//button[contains(text(),'continue')]"))).click();
  

  Here the problem is in the button[contains(text(),'continue')] part - the text() of your desired button is actually empty because that continue you are looking for is on the deeper depth level, button[contains(.//text(),'continue')] would've worked.

• your third attempt: again, not a valid CSS selector

And, overall, I would not go the way of getting the button by an index - relying on that it is the 4th, or the last button on the page, because in this case you make your locator dependent on the buttons positions on the page - simple layout changes will break it.

Solution

There are multiple ways to get to the desired button, probably one of the simplest would be to check the title attribute to be Continue and for onclick to contain shipping:

driver.findElement(By.cssSelector("button[title=Continue][onclick*=shipping]"))

Or, even easier would be to check the id of the parent container element:

driver.findElement(By.cssSelector("#shipping-method-buttons-container button"))

Answer 2

I've a simple construct for cases like this which might be a little runtime heavy but at least finds the Element reliably.

static WebElement getElement(By Type, String Attr, String ExpVal){
    List<WebElement> Elems = driver.findElement(Type); //just throw down an unique as possible locator (ex. By.tagName("button"))
    for(WebElement Elem : Elems){
        if(Elem.getAttribute(Attr).contains(ExpVal) return Elem; //Attr is the unique Attribute (in your case "onclick") ExpVal is the corresponding Value.
    }
}

Answer 3

Thanks guys, finally i got solution from seleniumhq.

         System.out.print("Enabled");
         WebDriverWait wait = new WebDriverWait(driver, 40);
         wait.until(ExpectedConditions.visibilityOfElementLocated(By
                     .xpath("//div[@id ='shipping-method-buttons-
         container']/button/span/span[text()='Continue']")));

         driver.findElement(By.xpath("//div[@id ='shipping-method-buttons-
         container']/button/span/span[text()='Continue']")).click();

Reason is "public class ElementNotInteractableException extends InvalidElementStateException. Thrown to indicate that although an element is present on the DOM, it is not in a state that can be interacted with."

Answer 4

Option 1:
You should try using By.Xpath, the x path will be of the child element element(button 4) will be :

.//button[@title = 'Continue']

Option 2:
find_all_elements of type button and store in a list and access the one you want.