测试 CSS ':hover' 伪 class

Question

我在测试我的 CSS :hover 伪类的行为时遇到了真正的麻烦。我尝试了以下方法，并将 test.assertEquals 包装在事件侦听器中作为 casper.on('mouse.move', function(){test.assertEquals(...);}) 无济于事。我也尝试了 casper.mouse.move 和 casper.mouseEvent('mouseover', rightArrowId); 的多种组合，但也没有结果。

我测试的相关部分如下。我只是在本地主机上测试一个网页运行ning，我的所有其他测试运行都很好。

...
var rightArrowId = "#right";
casper.test.begin("On hover, navigation widgets change their opacity", function(test) {


casper.then(function() {
    casper.capture("aboutToMove.png");
    casper.mouse.move(rightArrowId);
    test.assertEquals(customAsserts.isOpaque(rightArrowId), true, "On hover, the 'right' widget becomes opaque");
});


casper.then(function() {
    casper.capture("afterMove.png");
});

casper.run(function() {
    test.done();
});
...

var customAsserts = {
    isOpaque: function(selector) {
        return casper.evaluate(function(selector) {
            return (document.querySelector(selector).style.opacity === "1");
        }, selector);
    }
};

此外，截图显示鼠标确实在移动，因为我在第二张图片中可以看到悬停效果，而在第一张图片中看不到。

在页面加载时加载的相关 CSS 是这样的：

#right {
    opacity: 0.35;
}

#right:hover {
    opacity: 1;
}

Answer 1

element.style 仅访问通过元素上的 style 属性定义的样式。你想要的是使用 getComputedStyle():

isOpaque: function(selector) {
    return casper.evaluate(function(selector) {
        return getComputedStyle(document.querySelector(selector)).opacity === "1";
    }, selector);
}

测试 CSS ':hover' 伪 class

Testing CSS ':hover' pseudo-class

javascript

css

hover

casperjs