javascript -> webdriver.io 中的 getAttribute

Question

    var checkBoxes = await $$('.checkbox.moduleName') 
    console.log('length', $$('.checkbox.moduleName').length)
    checkBoxes.forEach((elem)=>{
        console.log(elem)
        console.log(elem.getAttribute('value'))
    })

这是我的代码。我有一些带有 class'.checkbox.moduleName' 的复选框。当我打印长度时，它被打印为 10。但是 getAttribute 函数不起作用。

 TypeError: elem.getAttribute is not a function
at checkBoxes.forEach

如何获取复选框的属性 'value'？

我也试过了

       var valueAttrs =
        checkBoxes
            .map(function(e){
                console.log('e', e)
                return e.getAttribute('value');
            });

    valueAttrs.forEach(v=>{console.log('value: ' + v);});

同样的错误

这是我的 html 行

  <input type="checkbox" class="checkbox moduleName" id="module110" name="module[]" value="110">

Answer 1

你 elem 将拥有一个 ELEMENT 对象，因此你必须通过基于 协议 API 命令的命令获取属性在 ELEMENT 值 (id) 上，在我们的例子中是 elementIdAttribute.

所以试试这个：

var checkBoxes = await $$('.checkbox.moduleName');
console.log('length', $$('.checkbox.moduleName').length);

checkBoxes.forEach((elem) => {
    console.log(elem);
    console.log(browser.getIdAttribute(elem.value.ELEMENT, 'value'));
});

示例（使用了带有登录表单的页面）：

> let tt = $$('form input');
> tt

[ { ELEMENT: '0.41525845584401533-2', 'element-6066-11e4-a52e-4f735466cecf': '0.41525845584401533-2', selector: 'form input', value: { ELEMENT: '0.41525845584401533-2' }, index: 0 }, { ELEMENT: '0.41525845584401533-3', 'element-6066-11e4-a52e-4f735466cecf': '0.41525845584401533-3', selector: 'form input', value: { ELEMENT: '0.41525845584401533-3' }, index: 1 }, { ELEMENT: '0.41525845584401533-4', 'element-6066-11e4-a52e-4f735466cecf': '0.41525845584401533-4', selector: 'form input', value: { ELEMENT: '0.41525845584401533-4' }, index: 2 }, { ELEMENT: '0.41525845584401533-5', 'element-6066-11e4-a52e-4f735466cecf': '0.41525845584401533-5', selector: 'form input', value: { ELEMENT: '0.41525845584401533-5' }, index: 3 } ]

> tt.forEach((elem) => { console.log(browser.elementIdAttribute(elem.value.ELEMENT, 'class')); })

{ sessionId: '1eb7b6df6484f97a9571bb93d6a95d1d', value: '_2hvTZpexuQ zyHYP', _status: 0 } { sessionId: '1eb7b6df6484f97a9571bb93d6a95d1d', value: '_2hvTZ pexuQ zyHYP', _status: 0 } { sessionId: '1eb7b6df6484f97a9571bb93d6a95d1d', value: '_2hvTZ pexuQ zyHYP', _status: 0 } { sessionId: '1eb7b6df6484f97a9571bb93d6a95d1d', value: '_2hvTZ pexuQ zyHYP', _status: 0 }

您可以通过 value 属性:

进一步使用属性值

tt.forEach((elem) => { 
  let ret = browser.elementIdAttribute(elem.value.ELEMENT, 'class'); 
  console.log(`> Elem has these classes: ${ret.value}`); 
});

Elem has these classes: _2hvTZ pexuQ zyHYP Elem has these classes: _2hvTZ pexuQ zyHYP Elem has these classes: _2hvTZ pexuQ zyHYP Elem has these classes: _2hvTZ pexuQ zyHYP

javascript -> webdriver.io 中的 getAttribute

javascript -> getAttribute in webdriver.io

javascript

webdriver-io