使用量角器测试链接颜色 [关闭]

Question

如何使用量角器测试悬停时链接的颜色？

我想模拟鼠标悬停在链接上，该链接从白色变为蓝色，然后我希望测试期望颜色 = 蓝色，悬停。

我目前用来测试的代码。

it('should redirect to the home page', function(){      
    element(by.css('ul.first_menu > li > a'));
    expect('ul.first_menu. > li > a'.getCssValue("color")).toEqual("rgba(11, 51, 60, 1)");

    browser.actions().mouseMove('ul.first_menu. > li > a').perform();

    browser.wait(waitForCssValue('ul.first_menu. > li > a', "color", "rgba(42, 100, 150, 1)"), 1000);
    browser.wait(waitForCssValue('ul.first_menu. > li > a', "text-decoration", "underline"), 1000);

    waitForCssValue = function (elementFinder, cssProperty, cssValue) {
            return function () {
                return elementFinder.getCssValue(cssProperty).then(function(actualValue) {
                return actualValue === cssValue;
                });
            };
    };
});

Answer 1

我已经完全按照你的要求做了。

这个想法是使用getCssValue() 并获得color 和text-decoration 属性。然后，将链接悬停在 mouseMove() 上并等待 CSS 值更改：

var elm = element(by.css('ul.first_menu > li > a'));
function waitForCssValue (elementFinder, cssProperty, cssValue) {
    return function () {
        return elementFinder.getCssValue(cssProperty).then(function(actualValue) {
            return actualValue === cssValue;
        });
    };
};

expect(elm.getCssValue("color")).toEqual("rgba(11, 51, 60, 1)");
expect(elm.getCssValue("text-decoration")).toEqual("none");

browser.actions().mouseMove(elm).perform();

browser.wait(waitForCssValue(elm, "color", "rgba(42, 100, 150, 1)"), 1000);
browser.wait(waitForCssValue(elm, "text-decoration", "underline"), 1000);