Reputation: 13
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"></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
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
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
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