如何检查鼠标悬停操作会更改selenium中的UI颜色

Question

当我将鼠标悬停在它上面时，我想验证星星是否亮起。（附上屏幕截图以便更好地理解）。如何验证它是否亮起？

元素的HTML结构如下：

<span class="wh-rating rating_4_5" style="display: inline-block;">
Rating:
<span data-s13732055i-ir="this" itemprop="ratingValue">4.5</span>
</span>
<div class="wh-rating-choices" style="display: none;">
<div class="wh-rating-choices-holder">
 <a class="hover" href="#">1</a>
 <a class="hover" href="#">2</a>
 <a class="hover" href="#">3</a>
 <a class="hover" href="#">4</a>
 <a class="hover" href="#">5</a>
 </div>
 </div>

Answer 1

这个问题在这里得到解答，在像你这样的类似项目中查看它可以用纯css完成：Change star rating on hover

Answer 2

我基于下面给出的示例DOM来回答这个问题

<ul class="rw-ui-stars">
<li class="rw-ui-star-0 rw-ui-star-selected"></li>
<li class="rw-ui-star-1 rw-ui-star-selected"></li>
<li class="rw-ui-star-2 rw-ui-star-selected"></li>
<li class="rw-ui-star-3 rw-ui-star-selected"></li>
<li class="rw-ui-star-4"></li></ul>

鼠标移动星星时，类属性更改为（此处我有hoveredon 5stars）

<ul class="rw-ui-stars">
<li class="rw-ui-star-0 rw-ui-star-over"></li>
<li class="rw-ui-star-1 rw-ui-star-over"></li>
<li class="rw-ui-star-2 rw-ui-star-over"></li>
<li class="rw-ui-star-3 rw-ui-star-over"></li>
<li class="rw-ui-star-4 rw-ui-star-over"></li></ul>

您可以清楚地注意到，鼠标悬停时类属性值正在发生变化。

您可以编写以下代码来实现此自动化

public bool isStarsSelectedOnMouseOver(int n){
    Actions action = new Actions(driver);
    action.moveToElement(driver.findElement(by.xpath("//li[@class='rw-ui-star-"+(n-1)+"'"))).build().perform();

    List<WebElement> stars = driver.findElements(by.xpath("//ul[@class='rw-ui-stars'"));

    for(int i = 1; i <= n; i++){
        if(!stars.get(i).getAttribute("class").contains("rw-ui-star-over"))
            return false;
    }
    return true;
}

此代码再次用于说明，可根据您的需要进行修改