如何遍历 JSON 元素列表并使用 webdriverio 访问它们的属性？答案

【问题标题】：How to iterate through a list of JSON elements and access their attributes using webdriverio?如何遍历 JSON 元素列表并使用 webdriverio 访问它们的属性？
【发布时间】：2023-03-14 05:48:01
【问题描述】：

[使用 Chimp.js – 同步风格的 webdriverio API]

如何正确地遍历我的元素数组？或者，更具体地说，我如何访问元素本身的属性？我对.elements() function found in the API 以及如何从那里提取元素本身感到困惑。

var myItem;
var elemArray = browser.elements('.castMemberPicture').value;
console.log(elemArray);

for (myItem in elemArray){ 
    console.log("myItem: " + myItem);
    //  I can log the JSON obj IDs successfully, but can’t seem to access elements like clientHeight, alt, ...
};

如何访问属性？

（输出）

[ { ELEMENT: '0' },
  { ELEMENT: '1' },
  { ELEMENT: '2' },
  { ELEMENT: '3' }]
myItem: 0
myItem: 1
myItem: 2
myItem: 3

...调用 .ELEMENT 会给出未定义的调用，所以这可能是我使用 API / 语法的原因。

我看到了https://github.com/webdriverio/webdriverio/issues/273，但无论我尝试使用 .ELEMENT .value 和函数的哪种组合，我都无法访问这些属性。帮助？

注意 - 如果我尝试通过使用 console.log("myItem: " + JSON.stringify(elemArray[myItem].ELEMENT)); 打印来探索元素本身，则输出变为

[ { ELEMENT: '0' },
  { ELEMENT: '1' },
  { ELEMENT: '2' },
  { ELEMENT: '3' }]
myItem: "0"
myItem: "1"
myItem: "2"
myItem: "3"

【问题讨论】：

标签： javascript json webdriver-io chimp.js

【解决方案1】：

这是遍历它并检查 Chimp 中的元素的方法：

var myItem;
var elemArray = browser.elements('.castMemberPicture').value;
console.log(elemArray);

// the following will traverse the array and print out the elements 'alt' Attribute!
for (myItem in elemArray){ 
    console.log( browser.elementIdAttribute(myItem, 'alt').value);
};

【讨论】：

【解决方案2】：

根据“元素”的文档，您可以使用element 命令单独访问每个元素：

可以使用“response.value”检索元素数组，它是元素 ID 的集合，可以使用“.ELEMENT”方法在后续命令中访问。

所以对于你的循环：

var myItem;
var elemArray = browser.elements('.castMemberPicture').value;

for (myItem in elemArray){ 
    console.log( browser.getAttribute(myItem, 'alt'));
};

【讨论】：