xpath or css needed for following html snippet

Following html code produces a pop up to add a product. Trying to find xpath o开发者_如何学Pythonr css that will work in selenium that allows to click on button "add" to add new product.

I attempted using this xpath //div[18]/div[2]/div/button which works only for one session. When you close browser and reopen , above xpath doesn't work. So, how we can write such a xpath which doesn't have to pass div[number] in this case div[18].

<div style="height: auto; min-height: 104px; width: auto;" class="dialog ui-dialog-content ui-widget-content">
<fieldset><legend>search</legend>
<div id="nameorids">
<input type="radio">name
<input type="radio">id
</fieldset>
<div style="clear: both; padding-top: 5px; float: right;"><button class="add">add</button></div></div>

First of all, this HTML isn't valid: the nameorids div isn't closed before the fieldset is closed. Typo?

If you can affect the HTML, try adding an id or class attribute to the outer div so you can target them with a css selector. E.g. if you can make the HTML look like

<div id="foo" ...

Then you can use the selector #foo button.add.

There are many different possible XPaths for the same node. In this case, is that the only button with the class "add"? In that case:

//button[contains(concat(' ', @class, ' '), ' add ')]

Will get just that button. Having just a snippet of the HTML isn't very useful.

If you have access to the page, and can run the Chrome browser, try out my extension here. Restart Chrome after installing, then right-click on the button and choose PsychoXPath -> Element (Short). This will try to find a unique path to this element, and copy it to your clipboard as well as the console.

The css would be button.add

selenium.click("css=button.add");