悬停元素列表-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"

Answer 2

Seems you were close. You need to induce WebDriverWait for the <a> elements with class="hover" to be clickable and you can use the following solution:

WebElement rating_holder = driver.findElement(By.xpath("//div[@class='wh-rating-choices']"));
((JavascriptExecutor)driver).executeScript("arguments[0].removeAttribute('style')", rating_holder)
List<WebElement> allStars = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.xpath("//div[@class='wh-rating-choices']/div[@class='wh-rating-choices-holder']//a")));
System.out.println("<<<<<<<<<<<<------List of all stars, size------------>>>>>>>>>>"+allStars.size());
for (WebElement e : allStars) {
    if(e.getAttribute("innerHTML").contains("5"))
    {
        new Actions(driver).moveToElement(e).build().perform();
        new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[@class='wh-rating-choices-holder']//a[@class='hover']"))).click();
    }
}

Answer 3

The issue with your code is that you are looking for A tags that already have the 'hover' class before you even hover. As you stated, the 'hover' class doesn't get added until after the hover occurs. So you would need to change your initial locator to not include the 'hover' class.

I prefer to use CSS selectors over XPath unless XPath is required (finding element by contained text or DOM traversal). You can do some googling for more info. Here's is tested code.

// find all A tags inside the containing DIV
List<WebElement> stars = driver.findElements(By.cssSelector("div.wh-rating-choices-holder > a"));

// loop through each element and hover
Actions action = new Actions(driver);
for (WebElement e : stars)
{
    action.moveToElement(e).perform();
}

// after all the hovering is done, fetch the same elements but expect that they will now contain the 'hover' class
stars = driver.findElements(By.cssSelector("div.wh-rating-choices-holder > a.hover"));

// Assert (TestNG) that there are 5 stars that were hovered
Assert.assertEquals(stars.size(), 5, "Verify 5 elements were hovered");

// click the 5th star
stars.get(4).click();