Question

I am trying to use a CSS selector to click on a link in Selenium but it fails to recognize it.

The link called “Cancel” appears in two places in the page.

The xpath for the first Cancel link is:
//html/body/div[@id='c_account']/div[@id='a_returns']/div[@id='container']/div[@id='main']/div[@id='main_col']/div/div[@id='create-return']/div[1]/div/a[2]/span

The xpath for the second link is:
/html/body/div[@id='c_account']/div[@id='a_returns']/div[@id='container']/div[@id='main']/div[@id='main_col']/div/div[@id='create-return']/div[4]/div/a[2]/span

When I inspect both links in Firebug I get the same CSS path.
html body.p div#c_account.c_wrapper div#a_returns.a_wrapper div#container div#main div#main_col div.main_content div#create-return div.return-process-actions div.return-process-action-buttons a.return-process-cancel

And when I use Selenium to click on the second link it clicks the first because the css path is the same for both.

Is there a way to distinguish between the two links through css path?

Answer 1

Use the x:nth-child(n)

Look up this site: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ … what you need is #22

Also, you really might not need such a long css selector, you can just use

a.return-process-cancel:nth-child(1)  
a.return-process-cancel:nth-child(2)