WebdriverIO中使用JavaScript遍历元素的方法求助

嘿，作为刚从Java转JavaScript的新手，完全理解你想找到对应Java增强for循环的用法～你已经通过browser.elements拿到了元素列表，下面给你介绍几种常用的遍历方式，完美对应你Java代码里的操作：

首先要提一句：browser.elements返回的一般是元素数组（或类数组对象），不同自动化库的返回格式可能略有差异（比如有些会把元素存在.value属性里），你可以先通过console.log(elements)打印看看结构，确认元素集合的位置。

1. 传统for循环（类似Java的普通for循环） #

如果你需要用到索引值，这种方式最稳妥：

const elements = browser.elements("//div[@id='container']");
// 打印元素数量，根据库的结构调整是否加.value
console.log(`number of elements: ${elements.value.length}`);

for (let i = 0; i < elements.value.length; i++) {
  const ele = elements.value[i];
  // 对应你Java里的操作
  console.log(ele.getText());
  console.log(ele.getAttribute('id'));
  console.log(ele.getTagName());
}

2. forEach方法（最接近Java的增强for循环） #

数组内置的forEach方法语法简洁，不需要手动管理索引，和Java增强for的使用逻辑最像：

const elements = browser.elements("//div[@id='container']");
console.log(`number of elements: ${elements.value.length}`);

// 注意：很多JS自动化库的元素操作是异步的，需要加async/await
elements.value.forEach(async (ele) => {
  console.log(await ele.getText());
  console.log(await ele.getAttribute('id'));
  console.log(await ele.getTagName());
});

小贴士：如果你的自动化库是同步模式（比如旧版WebdriverIO），可以去掉async和await，直接调用方法即可。

3. for...of循环（ES6+简洁语法） #

ES6引入的for...of可以直接遍历可迭代对象，写法更直观清爽：

const elements = browser.elements("//div[@id='container']");
console.log(`number of elements: ${elements.value.length}`);

for (const ele of elements.value) {
  console.log(await ele.getText());
  console.log(await ele.getAttribute('id'));
  console.log(await ele.getTagName());
}

内容的提问来源于stack exchange，提问作者Mike