如何使用 javascript 和量角器访问 "hidden" 样式属性

Question

我有一个带有搜索功能的网页。如果使用特殊字符等数据搜索无效，则会显示一条警告消息。

当页面加载时 CSS 加载如下：

<div class="searchError" id="isearchError" style="display: none;">

当您输入无效文本并按搜索时，上述更改为 display: block; opacity: …; 并且还会显示带有错误消息的 <div class="marker"></div>。

我尝试了以下 var styleValue = element(by.id('ideliveryareaerror')).getCssValue('style'); 但我得到了元素的树结构。

我的代码示例：

        var styleValue = element(by.id('isearchError')).getCssValue('style');
        browser.actions().sendKeys(protractor.Key.ENTER).perform();
        browser.sleep(1000);
        console.log(styleValue);
        browser.sleep(1000);

我想做的是：

获取样式属性值（应该是none）
按输入无效数据
获取样式属性值（应该是块）
获取错误消息文本

我的代码图片：

Answer 1

您正在使用 getCssValue('style')，但您想要 getCssValue('display')。 getCssValue 获取 CSS 值，而不是 HTML 属性。（我不使用量角器，但方法名称和你要的东西让我大吃一惊。:-)）

所以像这样：

var searchError = element(by.id('isearchError'));
expect(searchError.getCssValue('display')).toBe('none');
browser.actions().sendKeys(protractor.Key.ENTER).perform();
browser.sleep(1000);
expect(searchError.getCssValue('display')).toBe(''); // Or possibly 'block' or one of the others
console.log(styleValue);
browser.sleep(1000);

Answer 2

你试过量角器给你的isDisplayed方法吗？
如果您希望元素显示 displayed/not，您可以这样：

expect(element(by.id('ideliveryareaerror')).isDisplayed()).toBe(true);  // (or false)

此外，您正在获取元素的树结构，因为 getCssValue 是一个需要解决的承诺，这就是为什么它可能不适用于普通的 console.log
在这种情况下，您需要这样做：

var styleValue = element(by.id('isearchError')).getCssValue('style')
    .then( function(style) {
        console.log(style);
    });

如何使用 javascript 和量角器访问 "hidden" 样式属性

How to access the "hidden" style attrabute using javascript and protractor

html

javascript

css

automation

protractor