My Ecommerce webpage has some products. To add a specific product to cart, I am first fetching the list of products, then iterating this list, and then fetching the product-name text, so that I find my exact product to add to cart.
Here is the HTML:
<body>
<app-root _nghost-xdk-c10="" ng-version="12.2.17"><router-outlet _ngcontent-xdk-c10=""></router-outlet><app-dashboard _nghost-xdk-c34="" class="ng-star-inserted"><app-sidebar _ngcontent-xdk-c34="" _nghost-xdk-c33=""><nav _ngcontent-xdk-c33=""><label _ngcontent-xdk-c33="" routerlink="/dashboard" class="logo" tabindex="0"><div _ngcontent-xdk-c33="" class="logo-holder logo-7"><a _ngcontent-xdk-c33="" href=""><i _ngcontent-xdk-c33="" class="fas fa-book-open"></i><div _ngcontent-xdk-c33="" class="left mt-1"><h3 _ngcontent-xdk-c33="">Automation</h3><p _ngcontent-xdk-c33="" style="margin-top: -28px;">Automation Practice</p></div></a></div></label><input _ngcontent-xdk-c33="" type="checkbox" id="check"><label _ngcontent-xdk-c33="" for="check" class="hamberger-btn"><i _ngcontent-xdk-c33="" class="fas fa-bars"></i></label><ul _ngcontent-xdk-c33=""><li _ngcontent-xdk-c33=""><button _ngcontent-xdk-c33="" routerlink="/dashboard/" class="btn btn-custom" style="margin-top: -10px; margin-right: -40px;" tabindex="0"><i _ngcontent-xdk-c33="" class="fa fa-home"></i> HOME </button></li> <li _ngcontent-xdk-c33=""><!----></li><li _ngcontent-xdk-c33=""><button _ngcontent-xdk-c33="" routerlink="/dashboard/myorders" class="btn btn-custom" style="margin-top: -10px;" tabindex="0"><i _ngcontent-xdk-c33="" class="fa fa-handshake-o"></i> ORDERS</button></li><li _ngcontent-xdk-c33=""><button _ngcontent-xdk-c33="" routerlink="/dashboard/cart" class="btn btn-custom" style="margin-top: -10px;" tabindex="0"><i _ngcontent-xdk-c33="" class="fa fa-shopping-cart"></i> Cart <label _ngcontent-xdk-c33="" style="background-color: #96161f; border-radius: 2px; color: white; padding-left: 7px; padding-right: 7px;">1</label></button></li><li _ngcontent-xdk-c33=""><button _ngcontent-xdk-c33="" class="btn btn-custom" style="margin-top: -10px;"><i _ngcontent-xdk-c33="" aria-hidden="true" class="fa fa-sign-out"></i> Sign Out </button></li></ul></nav></app-sidebar><div _ngcontent-xdk-c34="" class="filter"><button _ngcontent-xdk-c34="" type="button" data-toggle="collapse" data-target="#mobile-filter" aria-expanded="true" aria-controls="mobile-filter" class="btn btn-default">Filters<span _ngcontent-xdk-c34="" class="fa fa-filter pl-1"></span></button></div><div _ngcontent-xdk-c34="" id="mobile-filter"><p _ngcontent-xdk-c34="" class="pl-sm-0 pl-2"> Home | <b _ngcontent-xdk-c34="">Search</b></p><div _ngcontent-xdk-c34="" class="border-bottom pb-2 ml-2 p-4"><h4 _ngcontent-xdk-c34="" id="burgundy">Filters</h4></div><form _ngcontent-xdk-c34="" novalidate="" class="ng-untouched ng-pristine ng-valid"><div _ngcontent-xdk-c34="" class="py-2 border-bottom ml-3 p-4"><input _ngcontent-xdk-c34="" type="text" formcontrolname="productName" name="search" placeholder="search" class="form-control ng-untouched ng-pristine ng-valid"></div><div _ngcontent-xdk-c34="" class="py-2 border-bottom ml-3 p-4"><h6 _ngcontent-xdk-c34="" class="font-weight-bold mb-1">Price Range</h6><div _ngcontent-xdk-c34="" class="row"><div _ngcontent-xdk-c34="" class="col-md-6 mb-1"><input _ngcontent-xdk-c34="" type="text" formcontrolname="minPrice" name="minPrice" placeholder="Min Price" class="form-control ng-untouched ng-pristine ng-valid"></div><div _ngcontent-xdk-c34="" class="col-md-6"><input _ngcontent-xdk-c34="" type="text" formcontrolname="maxPrice" name="maxPrice" placeholder="Max Price" class="form-control ng-untouched ng-pristine ng-valid"></div></div></div><div _ngcontent-xdk-c34="" class="py-2 border-bottom ml-3 p-4"><h6 _ngcontent-xdk-c34="" class="font-weight-bold">Categories</h6><div _ngcontent-xdk-c34="" id="orange"><span _ngcontent-xdk-c34="" class="fa fa-minus"></span></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="cat">fashion</label></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="cat">electronics</label></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="cat">household</label></div><!----></div><div _ngcontent-xdk-c34="" class="py-2 border-bottom ml-3 p-4"><h6 _ngcontent-xdk-c34="" class="font-weight-bold">Sub Categories</h6><div _ngcontent-xdk-c34="" id="orange"><span _ngcontent-xdk-c34="" class="fa fa-minus"></span></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="sub">t-shirts</label></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="sub">shirts</label></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="sub">shoes</label></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="sub">mobiles</label></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="sub">laptops</label></div><!----></div><div _ngcontent-xdk-c34="" class="py-2 ml-3 p-4"><h6 _ngcontent-xdk-c34="" class="font-weight-bold">Search For</h6><div _ngcontent-xdk-c34="" id="orange"><span _ngcontent-xdk-c34="" class="fa fa-minus"></span></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="ge">men</label></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="ge">women</label></div><!----></div></form></div><section _ngcontent-xdk-c34="" id="sidebar"><p _ngcontent-xdk-c34=""> Home | <b _ngcontent-xdk-c34="">Search</b></p><div _ngcontent-xdk-c34="" class="border-bottom pb-2 ml-2"><h4 _ngcontent-xdk-c34="" id="burgundy">Filters</h4></div><form _ngcontent-xdk-c34="" novalidate="" class="ng-untouched ng-pristine ng-valid"><div _ngcontent-xdk-c34="" class="py-2 border-bottom ml-3"><input _ngcontent-xdk-c34="" type="text" formcontrolname="productName" name="search" placeholder="search" class="form-control ng-untouched ng-pristine ng-valid"></div><div _ngcontent-xdk-c34="" class="py-2 border-bottom ml-3"><h6 _ngcontent-xdk-c34="" class="font-weight-bold">Price Range</h6><div _ngcontent-xdk-c34="" class="row"><div _ngcontent-xdk-c34="" class="col-md-6"><input _ngcontent-xdk-c34="" type="text" formcontrolname="minPrice" name="minPrice" placeholder="Min Price" class="form-control ng-untouched ng-pristine ng-valid"></div><div _ngcontent-xdk-c34="" class="col-md-6"><input _ngcontent-xdk-c34="" type="text" formcontrolname="maxPrice" name="maxPrice" placeholder="Max Price" class="form-control ng-untouched ng-pristine ng-valid"></div></div></div><div _ngcontent-xdk-c34="" class="py-2 border-bottom ml-3"><h6 _ngcontent-xdk-c34="" class="font-weight-bold">Categories</h6><div _ngcontent-xdk-c34="" id="orange"><span _ngcontent-xdk-c34="" class="fa fa-minus"></span></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="cat">fashion</label></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="cat">electronics</label></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="cat">household</label></div><!----></div><div _ngcontent-xdk-c34="" class="py-2 border-bottom ml-3"><h6 _ngcontent-xdk-c34="" class="font-weight-bold">Sub Categories</h6><div _ngcontent-xdk-c34="" id="orange"><span _ngcontent-xdk-c34="" class="fa fa-minus"></span></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="sub">t-shirts</label></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="sub">shirts</label></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="sub">shoes</label></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="sub">mobiles</label></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="sub">laptops</label></div><!----></div><div _ngcontent-xdk-c34="" class="py-2 ml-3"><h6 _ngcontent-xdk-c34="" class="font-weight-bold">Search For</h6><div _ngcontent-xdk-c34="" id="orange"><span _ngcontent-xdk-c34="" class="fa fa-minus"></span></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="ge">men</label></div><div _ngcontent-xdk-c34="" class="form-group ng-star-inserted"><input _ngcontent-xdk-c34="" type="checkbox"><label _ngcontent-xdk-c34="" for="ge">women</label></div><!----></div></form></section><section _ngcontent-xdk-c34="" id="products" style="margin-top: 0vh !important;"><div _ngcontent-xdk-c34="" class="container"><div _ngcontent-xdk-c34="" class="d-flex flex-row mb-2"><div _ngcontent-xdk-c34="" id="res" class="text-muted m-2">Showing 3 results | </div><label _ngcontent-xdk-c34="" class="m-2 blink_me"> User can only see maximum 9 products on a page</label></div><div _ngcontent-xdk-c34="" class="row"><div _ngcontent-xdk-c34="" class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-3 ng-star-inserted"><div _ngcontent-xdk-c34="" class="card"><img _ngcontent-xdk-c34="" class="card-img-top" src="https://rahulshettyacademy.com/api/ecom/uploads/productImage_1650649434146.jpeg"><div _ngcontent-xdk-c34="" class="card-body"><h5 _ngcontent-xdk-c34="" style="text-transform: uppercase;"><b _ngcontent-xdk-c34="">ZARA COAT 3</b></h5><div _ngcontent-xdk-c34="" class="d-flex flex-row my-2"><div _ngcontent-xdk-c34="" class="text-muted" style="font-weight: 300;">$ 31500</div></div><button _ngcontent-xdk-c34="" class="btn w-40 rounded" tabindex="0"><i _ngcontent-xdk-c34="" aria-hidden="true" class="fa fa-eye"></i> View</button><button _ngcontent-xdk-c34="" class="btn w-10 rounded" style="float: right;"><i _ngcontent-xdk-c34="" class="fa fa-shopping-cart"></i> Add To Cart</button></div></div></div><div _ngcontent-xdk-c34="" class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-3 ng-star-inserted"><div _ngcontent-xdk-c34="" class="card"><img _ngcontent-xdk-c34="" class="card-img-top" src="https://rahulshettyacademy.com/api/ecom/uploads/productImage_1650649488046.jpg"><div _ngcontent-xdk-c34="" class="card-body"><h5 _ngcontent-xdk-c34="" style="text-transform: uppercase;"><b _ngcontent-xdk-c34="">ADIDAS ORIGINAL</b></h5><div _ngcontent-xdk-c34="" class="d-flex flex-row my-2"><div _ngcontent-xdk-c34="" class="text-muted" style="font-weight: 300;">$ 31500</div></div><button _ngcontent-xdk-c34="" class="btn w-40 rounded" tabindex="0"><i _ngcontent-xdk-c34="" aria-hidden="true" class="fa fa-eye"></i> View</button><button _ngcontent-xdk-c34="" class="btn w-10 rounded" style="float: right;"><i _ngcontent-xdk-c34="" class="fa fa-shopping-cart"></i> Add To Cart</button></div></div></div><div _ngcontent-xdk-c34="" class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-3 ng-star-inserted"><div _ngcontent-xdk-c34="" class="card"><img _ngcontent-xdk-c34="" class="card-img-top" src="https://rahulshettyacademy.com/api/ecom/uploads/productImage_1650649561326.jpg"><div _ngcontent-xdk-c34="" class="card-body"><h5 _ngcontent-xdk-c34="" style="text-transform: uppercase;"><b _ngcontent-xdk-c34="">IPHONE 13 PRO</b></h5><div _ngcontent-xdk-c34="" class="d-flex flex-row my-2"><div _ngcontent-xdk-c34="" class="text-muted" style="font-weight: 300;">$ 231500</div></div><button _ngcontent-xdk-c34="" class="btn w-40 rounded" tabindex="0"><i _ngcontent-xdk-c34="" aria-hidden="true" class="fa fa-eye"></i> View</button><button _ngcontent-xdk-c34="" class="btn w-10 rounded" style="float: right;"><i _ngcontent-xdk-c34="" class="fa fa-shopping-cart"></i> Add To Cart</button></div></div></div><!----></div></div><div _ngcontent-xdk-c34="" class="row ng-star-inserted"><div _ngcontent-xdk-c34="" class="col-md-4 offset-md-8"><pagination-controls _ngcontent-xdk-c34="" class="float-right"><pagination-template><ul class="ngx-pagination ng-star-inserted" aria-label="Pagination"><li class="pagination-previous disabled ng-star-inserted"><!----><span class="ng-star-inserted"> Previous <span class="show-for-sr">page</span></span><!----></li><!----><li class="small-screen"> 1 / 1 </li><li class="current ng-star-inserted"><!----><span class="show-for-sr ng-star-inserted">You're on page </span><span class="ng-star-inserted">1</span><!----><!----></li><!----><li class="pagination-next disabled ng-star-inserted"><!----><span class="ng-star-inserted"> Next <span class="show-for-sr">page</span></span><!----></li><!----></ul><!----></pagination-template></pagination-controls></div></div><!----></section><div _ngcontent-xdk-c34="" class="footer">Design and Developed By - Kunal Sharma</div><ngx-spinner _ngcontent-xdk-c34="" _nghost-xdk-c31="" class="ng-tns-c31-3 ng-star-inserted"><!----></ngx-spinner></app-dashboard><!----></app-root>
<script src="runtime.18227f32df67125a1dfe.js" defer=""></script><script src="polyfills.bd0c6ffd915d0ed70d31.js" defer=""></script><script src="scripts.06e211d0492d0f893f5e.js" defer=""></script><script src="main.9c44d72685822eee0a0f.js" defer=""></script>
<div class="overlay-container" aria-live="polite"><div id="toast-container" class="toast-bottom-right toast-container"></div></div></body>
And here is my code:
//To fetch the list of products
public List<WebElement> getProductList(){
return driver.findElements(By.xpath("//div[contains(@class,'mb-3')]"));
}
//To get specific product
public WebElement getProduct(String productName){
WebElement product = null;
Iterator <WebElement> it = getProductList().iterator();
while(it.hasNext()){
product = it.next();
String productNameText = product.findElement(By.xpath("//b")).getText();
if(productNameText.equals(productName)){
System.out.println("product names matched");
break;
}
}
System.out.println("retruning product name");
return product;
}
Now the issue is that my String 'productNameText', is always receiving empty ("") value. This works if I directly use the xpath= "(//div[contains(@class,'mb-3')]//b)[2]" and use getText() with it. Please help.
I think your //b XPath should begin with a ., i.e. .//b, because // at the start of an XPath means that the search begins at the root of the document, whereas it seems to me you want to search within the context node of your "product" div element; i.e. the node identified by the product variable in the Java code. In XPath, the "context node" is referred to with the expression .
The XPath 1.0 spec says:
//is short for/descendant-or-self::node()/
It's a convenient way to search through all the descendant nodes of a given node. But unless you specify a context, it will be searching through the entire document.