测试CSS':悬停'伪类

Testing CSS ':hover' pseudo-class

本文关键字：伪类 悬停 CSS 测试      更新时间：2023-09-26

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

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

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

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

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