javascript - 如何使用 javascript 和 Protractor 访问 "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);

我想做的是:

• 获取样式属性值(应该是无)
• 输入无效数据按回车键
• 获取样式属性值(应该是 block )
• 获取错误消息文本

我的代码图片:

Answer 1

您正在使用 getCssValue('style')，但您需要 getCssValue('display')。 getCssValue获取 CSS 值，而不是 HTML 属性。 (我不使用 Protractor ，但方法名称和您的要求让我大吃一惊。:-))

所以像这样:

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