css - 如何为按钮编写 CSS 定位器

Question

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

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

我想为“编辑”按钮编写一个 CSS 定位器。它在 [data-credit-card-index="1"] 部分下...那里会有更多的信用卡...所以我必须使用 [data-credit-card-index="1"] 加编辑来定位我的定位器。

有人可以帮忙吗？非常感谢!!

Answer 1

更新

对于 Selenium :

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

或使用 XPath:

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

原始答案(jQuery)

首先:

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

第二个:

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

但是如果允许的话，最好使用一个额外的类:

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

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

和:

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