Home » Java » java – **How to select specified number of IMG tags from quantity input value**-Exceptionshub

java – **How to select specified number of IMG tags from quantity input value**-Exceptionshub

Posted by: admin February 25, 2020 Leave a comment

Questions:

Image example:

enter image description here

As you can see from clicking the image example link above, “EE” is the row and “8” is the item number.
I would like to select three of the following four IMG tag items located in the same row and echo the result.

<div id="surface" style="width: 4567px; height: 4137px; left: -1850px; top: -1152px; cursor: default;">


<img src="https://media.memories.png" data-items="L:106|EE:5" data-pl="1" style="position: absolute; cursor: pointer; width: 14px; height: 14px; left: 2221px; top: 1561px; display: block;">


<img src="https://media.memories.png" data-items="L:106|EE:6" data-pl="1" style="position: absolute; cursor: pointer; width: 14px; height: 14px; left: 2237px; top: 1561px; display: block;">


<img src="https://media.memories.png" data-items="L:106|EE:7" data-pl="1" style="position: absolute; cursor: pointer; width: 14px; height: 14px; left: 2253px; top: 1561px; display: block;">


<img src="https://media.memories.png" data-items="L:106|EE:8" data-pl="1" style="position: absolute; cursor: pointer; width: 14px; height: 14px; left: 2269px; top: 1561px; display: block;">


</div>

I figured out how to select one of the above img tags by specified row and item number using the following xpath, but how can select three items in the row “EE” after selecting the number 3 from a drop-down menu?

Xpath=//img[@data-items = ' L:106|EE:8'] 

Example Drop-down Menu:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>

<h2>Select Quantity</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Item Count</button>
  <div class="dropdown-content">
    <a href="#"> 1</a>
    <a href="#"> 2</a>
    <a href="#"> 3</a>
  </div>
</div>

</body>
</html>
How to&Answers:

If you want to select 3 from the drop-down you can use the below xpath.

//div[@class='dropdown-content']/a[normalize-space(.)='3']

You can click on the //button[.='Item Count'] and then use the xpath to select 3.

Alternatively, you can use js to select 3 without clicking on the button.

WebElement element = driver.findElement(By.xpath("//div[@class='dropdown-content']/a[normalize-space(.)='3']"));
JavascriptExecutor js = (JavascriptExecutor) driver;  
js.executeScript("arguments[0].click();",element);

Answer:

You can make a list of all images and then iterate only 3 images using sublist. Please have a look on below code.

WebDriverWait wait = new WebDriverWait(driver, 40);
List<WebElement> allImages = driver.findElements(By.cssSelector("div#surface > img"));
for (WebElement image : allImages.subList(1, allImages.size())) 
    wait.until(ExpectedConditions.elementToBeClickable(image));
    image.click();