HTML 代码中元素的 XPath

Question

我正在尝试使用 selenium webdriver-java 单击嵌入在以下 HTML 代码中的“选择”按钮。为此，我正在尝试为“选择”按钮编写 XPath。

<div class="product eq-height" style="padding-bottom: 0px ! important; min-height: 329px;">
    <h3 class="h4">BYOX Samsung S6 White</h3>
    <input name="productModel" value="BYOX Samsung S6 White" type="hidden">
    <div class="subtitle">
        <span>Samsung</span>
    </div>
    <a class="select-device-button" href="javascript:void(0);">
        <div class="item">
            <img alt="" class="prod-img-lrg lazyloaded" data-src="https://vgeco-oat1.vodafone.com/images/Samsung_Galaxy_S6_White.jpg" src="https://vgeco-oat1.vodafone.com/images/Samsung_Galaxy_S6_White.jpg"> <noscript><img alt="" src="https://vgeco-oat1.vodafone.com/images/Samsung_Galaxy_S6_White.jpg"&gt;</noscript>
        </div>
    </a>

    <div class="info">
        <div class="inner">
            <ul class="cost">
                <li><b>Total cost</b></li>
                <li class="price">£ 700.00</li>
            </ul>
            <ul class="cost">
                <li><b>My cost</b></li>
                <li class="price">£ 200.00</li>                            
            </ul>
        </div>
        <div class="cta">
            <a class="btn btn-sml select-device-button" href="javascript:void(0);">Select</a>
        </div>
    </div>

    <div class="co-link-wrap txt-center"></div>
</div>

在上面的代码中获取 Select 按钮的 xpath 是什么。字段：BYOX Samsung S6 White 在每段代码中都可能不同。所以我需要一个通用代码来获取选择元素。我正在尝试根据字符串选择按钮：BYOX Samsung S6 White，并且网页上有许多不同的产品与相关的选择按钮可用。

Answer 1

有一个简单的定位器非常适合这个用例：

driver.findElement(By.linkText("Select")).click();

请注意，在这种情况下，可以使用WebElement 而不是driver，例如，假设您已经找到了一个产品并想要“选择”它：

WebElement product = driver.findElement(By.cssSelector("div.product")); 
product.findElement(By.linkText("Select")).click();

---

仅当产品名称为上述 div 类中的 BYOX Samsung S6 White 时，我才需要单击“选择”按钮。我怎样才能做到这一点 ？

当然：

WebElement product = driver.findElement(By.xpath("//div[contains(@class, 'product') and h3 = 'BYOX Samsung S6 White']"));
product.findElement(By.linkText("Select")).click();

Answer 2

有两个选择元素（一个是大图，另一个是选择链接） 你是说第二个元素吗？

Xpath：

//div[@class='cta']/a[@class]

CSS：

div.cta a.select-device-button

（在 Selenium 中类似但更高效，我认为更容易声明）

如果您在这两种情况下都想要第一个元素，只需省略 div 元素的声明。

在 Firefox 中，您可以轻松地试用定位器，这始终取决于您希望保留它们的严格程度或灵活性。

到编辑点：

您可以独立检查隐藏输入字段的值（这里似乎不需要解析）并且不依赖于本地化。或者检查标题元素或图像参考。

Answer 3

您不必使用 xpath。更简单的方法是使用其他定位器。你可以使用

• className

  WebElement button = driver.findElement(By.className("btn"));
  WebElement button = driver.findElement(By.className("btn-sml"));
  WebElement button = driver.findElement(By.className("select-device-button"));
  

• linkdText

  WebElement button = driver.findElement(By.linkText("Select"));
  

• cssSelector

  WebElement button = driver.findElement(By.cssSelector(".btn.btn-sml.select-device-button"));
  

每一个都可以给你按钮元素。