懸停元素列表-Selenium Java WebDriver

Question

以下是我嘗試使用Selenium WebDriver（2.53.1）和Java進行測試的方案。

在網頁上，我有一個星星列表。 我想將鼠標懸停在它們上面，當我們進行鼠標懸停時，星星會突出顯示。 然后單擊星星之一。 當每個星星都懸停時，css會發生變化。

懸停前

  <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>

懸停后

   <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>

因此，基本上，在成功懸停時，會在html / css中添加“懸停”類。

我嘗試過的代碼如下。

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

與懸停之前一樣，未添加類“懸停”，WebElement的列表始終為零。 嘗試了一些硒站點上建議的某些選項，但是沒有用。 請幫助，如何進行這一步驟。

Answer 1

我剛剛測試了一個解決方案，但是它很粗糙。 但是，它可以工作。

注意：直接導航至第五顆星（文字為“ 5”的元素）對我不起作用。 似乎您需要將鼠標懸停以打開“評級持有人”框，然后將鼠標懸停在第五顆星上，以便將它們全部都作為class =“ hover”。

這是我所做的：

-使用操作導航到上方的元素（“撰寫評論”）

-以1像素為增量向下移動（正“ y”）

-每次增加之后，測試“ wh-rating-choices”類的元素是否包含字符串“ block”

-如果是的話，請移至元素為“ wh-rating-choices-holder”的元素下包含文本為“ 5”的元素

我在python中進行了測試，但這是在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)可能會過大，請嘗試較低的值，例如50或20。

PS。 您可能需要先關閉彈出窗口，該彈出窗口具有class="af-icon-cross"

Answer 2

看來您很親密。 您需要使class="hover"的<a>元素的WebDriverWait成為可單擊的，並且可以使用以下解決方案：

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

代碼的問題在於，您甚至在懸停之前正在尋找已經具有'hover'類的A標簽。 如您所述，只有在發生懸停之后才添加“懸停”類。 因此，您需要更改您的初始定位器以不包括“ hover”類。

除非需要XPath（通過包含的文本或DOM遍歷查找元素），否則我更喜歡在XPath上使用CSS選擇器。 您可以進行谷歌搜索以獲取更多信息。 這是經過測試的代碼。

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