0
<div class="test" data-credit-card-index="1">

    <button class="test1 test">Delete</button>
    <button class="test1 test">Edit</button>

I want to write a CSS locator for the Edit button.. it's under the [data-credit-card-index="1"] section... there will be a few more credit-card there.. so I have to use the [data-credit-card-index="1"] plus Edit to locate my locator.

Anyone can help here? Many thanks!!

user3614821
  • 25
  • 4

2 Answers2

2

Update

For Selenium:

By.cssSelector('.test[data-credit-card-index="1"] button.test:eq(1)')

Or with XPath:

By.xpath('div[@data-credit-card-index="1"]/button[contains(text(),"Edit")]')

Original answer (jQuery)

First:

$('.test[data-credit-card-index="1"] button:contains("Edit")');

Second:

$('.test[data-credit-card-index="1"] button.test:eq(1)');

But this is better to use an additional class instead, if you are allowed:

<div class="test" data-credit-card-index="1">

    <button class="test1 test delete-button">Delete</button>
    <button class="test1 test edit-button">Edit</button>

and:

$('.test[data-credit-card-index="1"] .edit-button');
Dávid Horváth
  • 4,050
  • 1
  • 20
  • 34
  • Not going to downvote this because you did give an answer to is correct given the context (Selenium) but your first answer isn't (`contains` is not part of CSS selector standard.) – Arran Oct 24 '14 at 21:18
  • Sorry, I have missed the context because of cforcloud's jQuery based answer. – Dávid Horváth Oct 27 '14 at 11:56
-1

For jquery, you could use :contains, like

$("button:contains('Edit')")
// or
$('[data-credit-card-index="1"]').find("button:contains('Edit')")
cforcloud
  • 589
  • 2
  • 8
  • I'm writing selenium automation, ('[data-credit-card-index="1"]').find("button:contains('Edit')") looks like not work for me – user3614821 Oct 24 '14 at 18:10
  • Looks like selenium has problems with :contains http://stackoverflow.com/questions/14595149/alternative-of-contains-in-cssselector-selenium-webdriver. Try :eq(1) as suggested above. But actually it should work by the **[selenium docs](https://saucelabs.com/resources/selenium/css-selectors)** – cforcloud Oct 24 '14 at 18:21
  • `contains` is not going to work with Selenium since `contains` is not part of the CSS selector standard. It's just that jQuery (rather, it's backing selector engine, Sizzle) implements their own version of it. So this answer is correct for a jQuery selector (which *isn't* a CSS selector) but is incorrect in the context of Selenium. – Arran Oct 24 '14 at 21:19