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);

使用量角器测试链接颜色

1 个答案: