元素对象

元素对象是一个表示远程用户代理上元素的对象，例如，在浏览器中运行会话时为DOM节点，或对于移动设备为移动元素。可以使用许多元素查询命令之一来获取它，例如$、custom$、react$或shadow$。

属性

元素对象具有以下属性

名称	类型	详情
sessionId	字符串	从远程服务器分配的会话 ID。
elementId	字符串	关联的网页元素引用，可用于在协议级别与元素交互
selector	字符串	用于查询元素的选择器。
parent	对象	当从其中获取元素时（例如，const elem = browser.$('selector')），则为浏览器对象；如果从元素范围获取元素（例如，elem.$('selector')），则为元素对象
options	对象	根据浏览器对象的创建方式，使用 WebdriverIO 选项。请参阅更多设置类型。

方法

元素对象提供了协议部分中的所有方法，例如WebDriver协议以及元素部分中列出的命令。可用的协议命令取决于会话的类型。如果您运行自动化的浏览器会话，则 Appium 命令 将不可用，反之亦然。

此外，还提供以下命令

名称	参数	详情
addCommand	- commandName（类型：字符串） - fn（类型：函数）	允许定义自定义命令，这些命令可以从浏览器对象中调用以进行组合目的。在自定义命令指南中了解更多信息。
overwriteCommand	- commandName（类型：字符串） - fn（类型：函数）	允许使用自定义功能覆盖任何浏览器命令。谨慎使用，因为它可能会混淆框架用户。在自定义命令指南中了解更多信息。

备注

元素链

在处理元素时，WebdriverIO 提供了特殊的语法来简化查询它们并组合复杂的嵌套元素查找。由于元素对象允许您使用通用查询方法在它们的树分支中查找元素，因此用户可以如下获取嵌套元素

const header = await $('#header')
const headline = await header.$('#headline')
console.log(await headline.getText()) // outputs "I am a headline"

对于深度嵌套的结构，将任何嵌套元素分配给数组然后使用它可能会非常冗长。因此，WebdriverIO 具有链式元素查询的概念，允许像这样获取嵌套元素

console.log(await $('#header').$('#headline').getText())

在获取一组元素时，这也适用，例如：

// get the text of the 3rd headline within the 2nd header
console.log(await $$('#header')[1].$$('#headline')[2].getText())

在处理一组元素时，当尝试与它们交互时，这尤其有用，因此，而不是执行

const elems = await $$('div')
const locations = await Promise.all(
    elems.map((el) => el.getLocation())
)

您可以直接在元素链上调用数组方法，例如：

const location = await $$('div').map((el) => el.getLocation())

与

const divs = await $$('div')
const location = await divs.map((el) => el.getLocation())

WebdriverIO 使用自定义实现，在幕后支持异步迭代器，因此其 API 中的所有命令也支持这些用例。

注意：所有异步迭代器都返回一个 Promise，即使您的回调没有返回一个，例如：

const divs = await $$('div')
console.log(divs.map((div) => div.selector)) // ❌ returns "Promise<string>[]"
console.log(await divs.map((div) => div.selector)) // ✅ returns "string[]"

自定义命令

您可以在浏览器范围内设置自定义命令，以抽象出常用的工作流程。查看我们关于自定义命令的指南以了解更多信息。