javascript - 使用 Protractor 测试链接颜色

标签 javascript html css testing protractor

<分区>

如何使用 Protractor 测试悬停时链接的颜色?

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

我目前用来测试的代码。

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()并获取 colortext-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);

关于javascript - 使用 Protractor 测试链接颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29252326/

相关文章:

jquery - 我无法订购控件

javascript - 在创建的 div 中的文本旁边放置一个按钮

javascript - 带有更多按钮的 jquery 移动页面

html - 显示 : inline removes blocks

javascript - 将 slider 的 24 小时时间格式转换为 12 小时

javascript - Bootstrap Flash 警报 CSS 在移动屏幕上无法正常工作

html - JQuery,更改 <select> 选项?

jquery - 在没有滚动条的固定div内创建可滚动div

javascript - OneSignal 与 Angular 2

javascript - ng-bind-html 将数据呈现为 HTML 但忽略子元素