0

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

user3227620
  • 23
  • 5

2 Answers2

2

Please first try this:

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

Or

WebElement review_stars = driver.findElement(By.xpath("(//review-star[@class='rvs-svg']//*[name()='svg'])[4]"));
action.moveToElement(review_stars).build().perform();
review_stars.click();
Prophet
  • 32,350
  • 22
  • 54
  • 79
  • I couldn't see the elements there becoming yellow, but if all what you are looking for it to click the 4-th star review option this should work – Prophet Aug 12 '21 at 14:57
  • first one is working . but it is not hovering ,it just clicked on the 4th star – user3227620 Aug 12 '21 at 15:01
  • Yes, it is not hovering. Is it essential to hover there? – Prophet Aug 12 '21 at 15:02
  • OK, I changed the second approach to move with actions and then click with driver. I can't validate this since on my browser even in 100% manual mode no color changes on hovering... – Prophet Aug 12 '21 at 15:10
  • i want to hover over each stars and then finally click on 4th star but it is so fast that I am not able to perform . – user3227620 Aug 12 '21 at 15:23
  • you can make a method using the locator I used here to get all the 4-5 star elements, move to the first, then to the second etc. – Prophet Aug 12 '21 at 15:33
1

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();
    }
}
cruisepandey
  • 28,520
  • 6
  • 20
  • 38