WebdriverIO Element对象详解：Web自动化测试的核心操作单元-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00992/article/details/148418532

WebdriverIO Element对象详解：Web自动化测试的核心操作单元

webdriverio Next-gen browser and mobile automation test framework for Node.js 项目地址: https://gitcode.com/gh_mirrors/we/webdriverio

什么是Element对象

在WebdriverIO测试框架中，Element对象是自动化测试的核心操作单元，它代表远程用户代理（如浏览器或移动设备）上的一个页面元素。这个对象可以理解为：

在浏览器环境中对应DOM节点
在移动测试中对应原生应用元素
是WebdriverIO与页面元素交互的主要接口

Element对象通常通过查询命令获取，如$()、custom$()、react$()等方法都会返回Element对象实例。

Element对象的核心属性

每个Element对象都包含以下重要属性，这些属性为元素操作提供了基础信息：

sessionId - 字符串类型，表示远程服务器分配的会话ID
elementId - 字符串类型，WebDriver协议中使用的元素引用标识符
selector - 字符串类型，用于查询该元素的选择器
parent - 对象类型，表示元素的父级上下文：
- 当从浏览器对象查询时，指向浏览器对象
- 当从元素作用域查询时，指向父元素对象
options - 对象类型，包含创建浏览器对象时的配置选项

Element对象的方法体系

Element对象提供了丰富的方法集合，主要包括：

1. 协议方法

根据会话类型自动提供对应的协议命令：

浏览器自动化会话：提供WebDriver协议方法
移动端测试会话：提供Appium协议方法

2. 核心扩展方法

除了协议方法外，Element对象还提供两个重要的扩展方法：

addCommand - 添加自定义命令
- 参数：命令名称(String)、功能函数(Function)
- 用途：创建可复用的自定义操作逻辑
overwriteCommand - 覆盖原生命令
- 参数：命令名称(String)、替换函数(Function)
- 注意：需谨慎使用，可能影响框架原有行为

Element链式操作：优雅的元素查询方式

WebdriverIO提供了一套独特的链式查询语法，极大简化了嵌套元素的查询操作：

基础链式查询

// 传统方式
const header = await $('#header')
const headline = await header.$('#headline')

// 链式写法
const text = await $('#header').$('#headline').getText()

集合元素操作

对于元素集合，链式操作同样适用：

// 获取第二个header中的第三个headline的文本
const text = await $$('#header')[1].$$('#headline')[2].getText()

集合批量操作

链式语法支持直接在元素集合上调用数组方法：

// 获取所有div元素的位置信息
const locations = await $$('div').map(el => el.getLocation())

重要提示：所有异步迭代器都会返回Promise，即使回调函数没有返回Promise：

const divs = await $$('div')
// 错误：返回Promise数组
console.log(divs.map(div => div.selector)) 

// 正确：等待解析后返回字符串数组
console.log(await divs.map(div => div.selector))

自定义命令：扩展Element功能

通过addCommand方法，我们可以为Element对象添加自定义命令，实现特定业务逻辑的封装：

// 添加自定义highlight命令
browser.addCommand('highlight', async function() {
    await this.execute((el) => {
        el.style.backgroundColor = 'yellow'
    })
    return this
})

// 使用自定义命令
await $('#myElement').highlight()

自定义命令的优势在于：