CODEWITHSUNDEEP
javaxpathselenium-webdriver
Maskii
Maskii

Reputation: 13

XPath of an element in HTML code

I am trying to click on 'Select' button embedded in following HTML code using selenium webdriver-java. For this I am trying to write XPath for the 'select' button.

<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>

what would be the xpath to fetch the Select button in above code. the field: BYOX Samsung S6 White can be different in every piece of code. so i need a generic code to fetch the select element. I am trying to select the button based on the string: BYOX Samsung S6 White and there are a number of different product available on the webpage with associated Select button.

Upvotes: 1

Views: 279

Answers (3)

Guy
Guy

Reputation: 50949

You don't have to use xpath. Simpler way will be using other locators. You can use

  • 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"));

Each one of those can give you the button element.

Upvotes: 1

Marc Sputnik
Marc Sputnik

Reputation: 106

There are two select elements (one is the big image the other the Select-link) Do you mean the second element?

Xpath:

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

Css:

div.cta a.select-device-button

(similar but more efficient in Selenium and in my opinion easier to declare)

If you wanted the first element in both cases just leave out the declaration for the div element.

In Firefox you can easily try out locators and it is always a bit depending how strict or flexible you want to keep them.

To the edited point:

You might check independently for the value of the hidden input field (it seems here is no parsing necessary) and is not dependent on the localisation. Alternatively check the header element or the image reference.

Upvotes: 1

alecxe
alecxe

Reputation: 474181

There is a simple locator that fits this use case perfectly:

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

Note that instead of driver in this case, there can be a WebElement used, for example, imagine you've already found a product and want to "select" it: 

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

I need to click the 'Select' button only if the product name is BYOX Samsung S6 White in above div class. how can i do this ?

Sure:

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

Upvotes: 1

Related Questions