javascript - 使用量角器获取所有元素属性

Question

根据文档，要按名称获取单个属性，您可以.getAttribute()在 a 上使用WebElement：

var myElement = element(by.id('myId'));
expect(myElement.getAttribute('myAttr')).toEqual('myValue');

但是我怎样才能得到一个元素的所有属性呢？

Protractor API中没有关于此用例/功能的信息。

Answer 1

您可以扩展javascript的Element类型并添加getAttributes()功能：

Element.prototype.getAttributes = function() {
    return (function (node) {
        var attrs = {};
        for (var i=0;i<node.length;i++) {
            attrs[node.item(i).name] = node.item(i).value;
        }
        return attrs;
    })(this.attributes);
};

演示

然后您可以使用与一个属性相同的方法测试属性的完整性：

var myElement = element(by.id('myId'));
expect(myElement.getAttributes()).toEqual({'attr1': 'value1', 'attr1': 'value1', ... });

Answer 2

用于executeScript()执行一个脚本，该脚本形成一个属性列表，从中读取它们element.attributes（里面的 js 部分取自这里）：

var elm = element(by.id('runButton')).getWebElement();
browser.executeScript(
    'var items = {}; \
     for (index = 0; index < arguments[0].attributes.length; ++index) { \
         items[arguments[0].attributes[index].name] = arguments[0].attributes[index].value \
     }; \
     return items;', elm).then(function (attrs) {
        console.log(attrs);
    });

这里attrs将包含元素属性的字典/对象，其中键作为属性名称，值作为属性值。

演示（使用angularjs.org 教程页面，获取 a 的所有属性header）：

$ node node_modules/protractor/bin/elementexplorer.js https://docs.angularjs.org/tutorial
Getting page at: https://docs.angularjs.org/tutorial
> var elm = element(by.tagName('header')).getWebElement();
> browser.executeScript('var items = {}; for (index = 0; index < arguments[0].attributes.length; ++index) { items[arguments[0].attributes[index].name] = arguments[0].attributes[index].value }; return items;', elm).then(function (attrs) {
...     console.log(attrs);
... });
{ class: 'header header-fixed', 'scroll-y-offset-element': '' }

^{不是很漂亮和紧凑，但对我有用。很高兴看到更好的选择。}

---

更新（对上述方法的改进）：

如果我定义一个常规函数并将其传入，它也会起作用：

function getAllAttributes (arguments) {
    var items = {}; 
    for (index = 0; index < arguments[0].attributes.length; ++index) { 
        items[arguments[0].attributes[index].name] = arguments[0].attributes[index].value; 
    }
    return items;
}

browser.executeScript(getAllAttributes, elm).then(function (attrs) {
    console.log(attrs);
});

Answer 3

如果您需要的属性以数据为前缀，您应该能够将数据集用于元素，这将使您的执行脚本缩小一点：

browser.executeScript('return arguments[0].dataset;', elm).then(function (attrs) {
    console.log(attrs);
});

Answer 4

您必须使用browser.executeScript()函数调用而不是量角器 API，因为Element.attributes它超出了量角器 API 实现：

var elem = element(by.id('runButton'));
browser.executeScript("return arguments[0].attributes", elem.getWebElement())
    .then(function (attrs) {
        console.log(attrs.length);    // outputs numbers of attributes.
        // access collection of Attr objects
        console.log(attrs[0].isId);   // outputs `true`
        console.log(attrs[0].name);   // outputs `id`
        console.log(attrs[0].value);  // outputs `runButton`
    });

请记住，当说attributes时，它意味着一个命名的映射结构，而不是 DOM 模型上下文中的一个数组。这意味着您必须使用NamedNodeMap来访问Attr对象的集合。

它的工作方式与@alecxe 的答案相同，但没有迭代部分。