使用量角器测试链接颜色

Using protractor to test link colours

本文关键字：链接 颜色 测试 量角器      更新时间：2023-09-26

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

我想模拟鼠标悬停在链接上，链接从白色变为蓝色，然后我想测试悬停时的颜色为蓝色。

我当前用于测试的代码。

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

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

其思想是使用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);
相关文章：