使用量角器测试 link 种颜色

Question

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

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

我目前用来测试的代码。

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() and get color and text-decoration properties. Then, hover the link with 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);

使用量角器测试 link 种颜色

Using protractor to test link colours

html

javascript

css

testing

protractor