将鼠标悬停在每颗星上，然后最后点击第 4 颗星

Question

在一个网页上，我有一个评价星星的反馈，当我将鼠标悬停在星星上时，它们变成黄色。我有 5/6 个相似的 div，相同 Class 和 configuration.If 我吸尘器并点击第 4 颗星，它们都变成了黄色。我想做的是瞄准第 4 颗星，然后单击它来设置评级。我尝试使用动作链和 xpath，但它不起作用。以下是星星的 html：

<div class="rating-box-wrapper" style="height: 35px;">
<svg viewBox="0 0 34 32" preserveAspectRatio="none" zing-touch="" class="rvs-star-svg" width="38" height="35.72" style="touch-action: manipulation; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><!----><!----><!----><g><path d="M6.37 32l3.972-12.215-10.417-7.569h12.89l3.972-12.215 3.972 12.215h12.89l-10.417 7.569 3.972 12.215-10.417-7.569zM16.787 22.557l7.569 5.471-2.848-8.843 7.569-5.471h-9.368l-2.848-8.843-2.848 8.843h-9.368l7.569 5.471-2.848 8.843z" fill="#4ae0e1"></path></g><!----><!----></svg>
<svg viewBox="0 0 34 32" preserveAspectRatio="none" zing-touch="" class="rvs-star-svg" width="38" height="35.72" style="touch-action: manipulation; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><!----><!----><!----><g><path d="M6.37 32l3.972-12.215-10.417-7.569h12.89l3.972-12.215 3.972 12.215h12.89l-10.417 7.569 3.972 12.215-10.417-7.569zM16.787 22.557l7.569 5.471-2.848-8.843 7.569-5.471h-9.368l-2.848-8.843-2.848 8.843h-9.368l7.569 5.471-2.848 8.843z" fill="#4ae0e1"></path></g><!----><!----></svg>
<svg viewBox="0 0 34 32" preserveAspectRatio="none" zing-touch="" class="rvs-star-svg" width="38" height="35.72" style="touch-action: manipulation; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><!----><!----><!----><g><path d="M6.37 32l3.972-12.215-10.417-7.569h12.89l3.972-12.215 3.972 12.215h12.89l-10.417 7.569 3.972 12.215-10.417-7.569zM16.787 22.557l7.569 5.471-2.848-8.843 7.569-5.471h-9.368l-2.848-8.843-2.848 8.843h-9.368l7.569 5.471-2.848 8.843z" fill="#4ae0e1"></path></g><!----><!----></svg>
<svg viewBox="0 0 34 32" preserveAspectRatio="none" zing-touch="" class="rvs-star-svg" width="38" height="35.72" style="touch-action: manipulation; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><!----><!----><!----><g><path d="M6.37 32l3.972-12.215-10.417-7.569h12.89l3.972-12.215 3.972 12.215h12.89l-10.417 7.569 3.972 12.215-10.417-7.569zM16.787 22.557l7.569 5.471-2.848-8.843 7.569-5.471h-9.368l-2.848-8.843-2.848 8.843h-9.368l7.569 5.471-2.848 8.843z" fill="#4ae0e1"></path></g><!----><!----></svg>
<svg viewBox="0 0 34 32" preserveAspectRatio="none" zing-touch="" class="rvs-star-svg" width="38" height="35.72" style="touch-action: manipulation; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><!----><!----><!----><g><path d="M6.37 32l3.972-12.215-10.417-7.569h12.89l3.972-12.215 3.972 12.215h12.89l-10.417 7.569 3.972 12.215-10.417-7.569zM16.787 22.557l7.569 5.471-2.848-8.843 7.569-5.471h-9.368l-2.848-8.843-2.848 8.843h-9.368l7.569 5.471-2.848 8.843z" fill="#4ae0e1"></path></g><!----><!----></svg><!----></div>

Actions action = new Actions(driver); WebElement review_stars=driver.findElement(By.xpath("//[name()='svg' 并包含(@class,'rvs-star-svg')]/[名称()='path']")); action.mo veToElement(review_stars).click().build().perform();

Answer 1

请先试试这个：

driver.findElement(By.xpath("(//review-star[@class='rvs-svg']//*[name()='svg'])[4]")).click();

或者

WebElement review_stars = driver.findElement(By.xpath("(//review-star[@class='rvs-svg']//*[name()='svg'])[4]"));
action.moveToElement(review_stars).build().perform();
review_stars.click();

Answer 2

将鼠标悬停在每颗星上，最后点击第 4 颗星，您可以使用以下代码。

示例代码：

Actions action = new Actions(driver);
List<WebElement> all_stars = driver.findElements(By.xpath("//div[@class='rating-box-wrapper']//*[local-name()='svg']"));
for (int i = 0; i<5; i++) {
    Thread.sleep(2000);
    action.moveToElement(all_stars.get(i)).build().perform();
    if(i == 3) {
        action.moveToElement(all_stars.get(i)).click().build().perform();
    }
}

将鼠标悬停在每颗星上，然后最后点击第 4 颗星

hover over each stars and then finally click on 4th star

java

selenium

automation

r-stars