How do I use a combination of attributes to select a button in Selenium?

Question

I'm trying to get selenium to select a simple button that says next. I've tried XPath, CSS, and linktext and it still will not select it for me saying it cannot locate the element. Here is the code.

Edit: The button is inside an i-frame.

<button class="btn-next" href="#" data-next="true">Next</button>

Not sure why it cannot locate the element, this is the xpath that came out from it but still It cannot locate it.

findElement(By.Xpath(".//*[@id='step1']/button"))

It seems I was missing some of the HTML. Here is the entire part.

div class="form-container">
<form data-capture="true" data-ajax="false" method="post">
<div id="view1" class="view active_view" data-view-order="10"     style="display: none;">
<div id="step1">
<ul class="btns">
<div class="clear"/>
<h1>I'm a</h1>
<h2>
<button class="btn-next" href="#" data-next="true">Next</button>

Answer 1

The HTML you show has no ID (it's not the href that has a # btw, that's different).

so

findElement(By.Xpath(".//*[@id='step1']/button"))` 

will not work based on what you posted.

You could use:

Css is always my first go to for readability:
findElement(By.Css(".btn-next[data-next='true']"))

or by Class:
findElement(By.Class("btn-next"))

or by XPath
findElement(By.XPath("//*[@data-next]"))

or your issue may be that multiple exist and you need multiple qualifiers:

by Xpath example:
findElement(By.XPath("//*[@data-next][@class='btn-next']"))

etc.

Based on your new update with the HTML you could use:

By.Css("form div#step1 button.btn-next")

if it exists twice you might need:

By.Css("form div#step1 ul.buttons button.btn-next")

or

By.Css("form div#step1 ul.buttons button.btn-next:first-of-type")

You might need to put the first-of-type on the form, the div, the ul, etc.

as you can see the pattern with css is to have the elements and any qualifiers in a short compact format. it depends on the rest of the page and if it has the stuff repeated

Answer 2

Try this xpath -

"//button[@class='btn-next'][.='Next']"

Is the button visible when the selector is fired? If not first verify with ExpectedConditions if it is visible or clickable.

Answer 3

I actually found out why the above was not working.

The issue is that it was inside aniframe.

<iframe id="index_reg_iframe" src="/main.php? a=user.register_iframe_fp&amp;no_header=1&amp;btn_bg_next=447DC3&amp;btn_ bg_next_hover=396ba8&amp;id=noadvert&amp;prg=1&amp;tour=1&amp;pg=1" marginwidth="0" marginheight="0" hspace="0" vspace="0" scrolling="no" allowtransparency="true" height="450" frameborder="0" width="410"></iframe>

The following command worked for me.

driver.switchTo().frame("index_reg_iframe").findElement(By.xpath(".//*[@id='step1']/button")).click();

Thank you guys for brainstorming with me.

Answer 4

Is there a reason why you do not choose findElement(By.Class("btn-next")) Without being able to see the whole DOM it is hard to say why exactly your Path does not work.