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

Get all element attributes using protractor

提问by alecxe

According to the documentation, to get a single attribute by name you can use .getAttribute()on a WebElement:

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

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

But how can I get all of the attributes that an element has?

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

There is no information about this use case/functionality in the Protractor API.

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

采纳答案by neo

You can expand javascript's Elementtype and add getAttributes()function:

您可以扩展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);
};

demo

演示

then you can test integrity of attributes using the same method you use for one attribute:

那么您可以使用与用于一个属性的相同方法来测试属性的完整性：

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

回答by alecxe

Use executeScript()to execute a script that forms a list of attributes reading them from element.attributes(js part inside is taken from here):

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

Here attrswould contain a dictionary/object of element attributes with keys as attribute names and values as attribute values.

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

Demo (using angularjs.org tutorial page, getting all attributes for a header):

演示（使用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': '' }

^{Not really beautiful and compact, but works for me. Would be happy to see better alternatives.}

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

---

---

UPDATE (an improvement to the approach above):

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

It would also work if I would define a regular function and pass it in:

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

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

回答by Mathew Berg

If your attributes that you need are prefixed with data you should be able to use the dataset for the element which will shrink your execute script by a bit:

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

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

回答by shawmzhu

You have to use browser.executeScript()function call instead of protractor API since Element.attributesis out of protractor API implementation:

browser.executeScript()由于Element.attributes超出了量角器 API 实现，您必须使用函数调用而不是量角器 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`
    });

Remember that when saying attributes, it means a named map structure instead an array in the context of DOM model. Which means you have to use the NamedNodeMapto access collection of Attrobjects.

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

It works as the same way as that in @alecxe's answer without the iteration part.

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