Question

我在测试CSS的行为时遇到了麻烦：悬停伪类。我尝试了以下方法，并将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;
}

Answer 1

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

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

测试CSS＆＃39;：hover＆＃39;伪类

1 个答案: