**How to select specified number of IMG tags from quantity input value**
Question
Image example:
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>
2 answers
solution1
0 2020-02-17 17:25:55
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);
solution2
0 2020-02-18 07:37:16
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();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.