如何使用异步 wdio 使用相同的选择器抓取多个元素？答案

【问题标题】：How can I grab multiple elements with the same selector using async wdio?如何使用异步 wdio 使用相同的选择器抓取多个元素？
【发布时间】：2020-05-15 15:44:36
【问题描述】：

我正在使用 async wdio 来测试我的 react 应用程序，并希望计算一些具有特定选择器的元素并检查其中的某些内容。这是我正在测试的代码的样子：

<div className='container'>
  <li className='my-element'>
    <button>Button 1</button>
  </li>
  <li className='my-element'>
    <button>Button 2</button>
  </li>
  <li className='my-element'>
    <button>Button 3</button>
  </li>
</div>

所以基本上我想做的是用my-element 类计算li 标签的数量，并检查每个标签的内容。基于docs，看来我想在.container上使用$$，所以是这样的：

it('count my-elements', async function () {
  const container = await $('.container')
  const myElements = await $$('.my-element') // gives me some weird array with an element object
  console.log(myElements)
})

这是我从console.log得到的对象：

[
  parent: Element {
    sessionId: '12bd5537ee1cee33e1f23d0e1a162a40',
    elementId: '0.345325829273438-8',
    ELEMENT: '0.345325829273438-8',
    selector: '.container',
    parent: Browser {
      sessionId: '12bd5537ee1cee33e1f23d0e1a162a40',
      capabilities: [Object],
      addCommand: [Function],
      overwriteCommand: [Function],
      addLocatorStrategy: [Function],
      config: [Object]
    },
    emit: [Function: bound ],
    isReactElement: false,
    addCommand: [Function],
    overwriteCommand: [Function]
  },
  selector: '.my-element',
  foundWith: '$$',
  props: []
]

不确定如何处理或如何实际检查我使用该选择器获得的所有元素。

因此，总而言之，对于初学者来说，我想计算使用该特定选择器选择了多少元素，也许能够更深入地了解每个元素并查看/访问它们的内容。

【问题讨论】：

标签： javascript reactjs webdriver e2e-testing webdriver-io

【解决方案1】：

$$ 返回一个元素数组。要获取您需要使用的元素的数量 Array.length

所以

myElements.length 将为您提供使用$$ 找到的元素的数量

不确定您所说的“查看/访问其内容”是什么意思。但是，如果您想获取找到的每个元素的文本，您可以执行任何适合数组的操作（例如 forEach）

【讨论】：