javaseleniumautomationr-stars

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

On a webpage I have a rating stars feedback ,When I hover on the stars they became yellow .I have 5/6 similar divs, same Class and configuration.If I hoover and click on the 4th stars, they all became yellow .What I would like to do is target the fourth star and click it to set a rating. I tried with action chains & xpath but its not working. below is the html for stars:

<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' and contains(@class,'rvs-star-svg')]/[name()='path']")); action.mo veToElement(review_stars).click().build().perform();

Solution

  • hover over each stars and then finally click on 4th star, you can use the below code.

    Sample code :

    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();
    }
}