Selenium -- How to deal with 2 submit buttons and click on one of them?

Question

The key HTML is:

<div class="col col3 actionCol"> 
  <button type="submit" class="booking fRight">Book</button>
</div>

but we also have other forms on the same page, e.g. for login, that have a similar "submit" button.

How do i click this specific one?

Answer 1

I would recommend you find the element using xpath and specify index within xpath. So for the button you are referring to, the code with indexed xpath would be

driver.findElement(By.xpath("(//button[contains(text(),'Book')])[2]"));

Alternatively, if you wish to avoid indexes, you may write a more specific xpath to find the element

driver.findElement(By.xpath("//div[@class='row roundTripHead' and not(contains(@style,'display: none'))]//button"));

The above xpath will discard element which has style attribute with value display:none

Answer 2

You can find both of them into an array and find which one you want by using array indexing.

buttonArray = webdriver.findElements(submit button xpath / css selector)
firstButton = buttonArray[0]
secondButton = buttonArray[1]

Answer 3

Be specific enough (but no more) to uniquely select 1 element

Generally look to css selectors first, for greatest readability.

Try using button[type='submit'] for your selector and click on it, e.g.

findElement("button[type='submit']").click

if that is not specific enough, scope it to the button or form class, examples:

button.booking[type='submit']
form button.booking[type='submit']
form.booking button[type='submit']
# Allow form to be put anywhere on the page and other forms to exist

If that is not specific enough (the page has two forms with the same name...) you can scope it to the specific occurrence, e.g. for the first occurrence use:

form.booking button.booking[type='submit'][0]`  
# However this is now tied to page layout if form order is changed

"but no more" in the title generally means don't hard-code a selector using the surrounding page layout. It may be unique but it then becomes tied the the page layout and breaks if the layout changes.

Answer 4

Please use the index to find the particular element.

driver.findElement(By.xpath("(//*[text()='Book'])[1]"));