Hover list of elements - Selenium Java WebDriver

Question

Below is the scenario I am trying to test using Selenium WebDriver (2.53.1) and Java.

On a webpage, I have a list of stars. I want to hover over each of them, the stars get highlighted as we do a mouse hover. Then click on one of the stars. The css changes when each of the stars are hovered.

Before hover

  <div class="wh-rating-choices" style="display: none;">
        <div class="wh-rating-choices-holder">
                                <a href="#">1</a>
                                <a href="#">2</a>
                                <a href="#">3</a>
                                <a href="#">4</a>
                                <a href="#">5</a>
                            <em>Your Rating: <span></span></em>
        </div>
    </div>

After hover

   <div class="wh-rating-choices" style="display: none;">
        <div class="wh-rating-choices-holder">
                                <a href="#" class="hover">1</a>
                                <a href="#" class="hover">2</a>
                                <a href="#" class="hover">3</a>
                                <a href="#" class="hover">4</a>
                                <a href="#" class="hover">5</a>
                            <em>Your Rating: <span>Excellent</span></em>
        </div>
    </div>

So basically, on successful hover, the class 'hover' gets added in the html/css.

Code I have tried is as below.

List<WebElement> allStars = driver.findElements(By.xpath("//a[@class='hover']"));
System.out.println("<<<<<<<<<<<<------List of all stars, size------------>>>>>>>>>>"+allStars.size());
for (WebElement e : allStars) {
    Actions act = new Actions(driver);
    act.moveToElement(e).build().perform();
    Thread.sleep(5000);
}

As before hover, the class 'hover' is not added, the list of WebElements is always zero. Tried some of the options suggested on some selenium sites, but did not work. Please help, how to proceed on this one.

Answer 1

I've just tested a solution, but it is very crude. It works, however.

Note: navigating directly to the fifth star (the element with text "5") didn't work for me. It seems you need to hover such that the rating holder box opens, and then hover to the fifth star so that you get all of them as class="hover".

This is what I did:

-- navigate to the element above ("Write a review") with Actions

-- move down (positive "y") in increments of 1 pixel

-- after every increment, test if the element with class "wh-rating-choices" contains string "block"

-- if it does, move to element with text "5" contained under the element with class "wh-rating-choices-holder"

I tested it in python, but here is what should work in Java:

Actions action = new Actions(driver);
int inc = 0;
while (inc < 100) {
    WebElement top = driver.findElement(By.xpath("//*[contains(text(), 'Write a Review')]"));
    action.moveToElement(top, 0, inc).contextClick().perform();
    Thread.sleep(200);
    a = driver.findElement(By.xpath("//*[contains(@class, 'wh-rating-choices')]"));
    if (a.getAttribute("style").contains("block") {
        aa = driver.findElement(By.xpath("//*[contains(@class, 'wh-rating-choices-holder')]"));
        bb = aa.findElement(By.xpath(".//*[contains(text(), '5')]"));
        action.moveToElement(bb).perform();
        break;
    }
    inc++;
}
System.out.println(bb.getAttribute("outerHTML"));

Thread.sleep(200) could be overkill, try something lower, like 50 or 20.

PS. It is possible you will need to close the pop-up first, the one that has class="af-icon-cross"