跳到主要内容

选择器

WebdriverIO MCP 服务器支持多种选择器策略,用于定位网页和移动应用程序中的元素。

信息

有关包括所有 WebdriverIO 选择器策略在内的综合选择器文档,请参阅主要的选择器指南。本页面主要关注 MCP 服务器常用的选择器。

Web 选择器

对于浏览器自动化,MCP 服务器支持所有标准的 WebdriverIO 选择器。最常用的包括:

选择器示例描述
CSS#login-button, .submit-btn标准 CSS 选择器
XPath//button[@id='submit']XPath 表达式
文本button=Submit, a*=ClickWebdriverIO 文本选择器
ARIAaria/Submit Button无障碍名称选择器
测试 ID[data-testid="submit"]推荐用于测试

有关详细示例和最佳实践,请参阅选择器文档。


移动端选择器

移动端选择器通过 Appium 在 iOS 和 Android 平台上工作。

无障碍 ID(推荐)

无障碍 ID 是最可靠的跨平台选择器。它们在 iOS 和 Android 上都能工作,并在应用更新中保持稳定。

# 语法
~accessibilityId

# 示例
~loginButton
~submitForm
~usernameField
最佳实践

尽可能首选无障碍 ID。它们提供:

  • 跨平台兼容性(iOS + Android)
  • 在 UI 变化中保持稳定
  • 更好的测试可维护性
  • 改善应用的无障碍性

Android 选择器

UiAutomator

UiAutomator 选择器对 Android 来说强大且快速。

# 通过文本
android=new UiSelector().text("Login")

# 通过部分文本
android=new UiSelector().textContains("Log")

# 通过资源 ID
android=new UiSelector().resourceId("com.example:id/login_button")

# 通过类名
android=new UiSelector().className("android.widget.Button")

# 通过描述(无障碍)
android=new UiSelector().description("Login button")

# 组合条件
android=new UiSelector().className("android.widget.Button").text("Login")

# 可滚动容器
android=new UiScrollable(new UiSelector().scrollable(true)).scrollIntoView(new UiSelector().text("Item"))

资源 ID

资源 ID 在 Android 上提供稳定的元素标识。

# 完整资源 ID
id=com.example.app:id/login_button

# 部分 ID(推断应用包)
id=login_button

XPath (Android)

XPath 在 Android 上有效,但比 UiAutomator 慢。

# 通过类和文本
//android.widget.Button[@text='Login']

# 通过资源 ID
//android.widget.EditText[@resource-id='com.example:id/username']

# 通过内容描述
//android.widget.ImageButton[@content-desc='Menu']

# 层次结构
//android.widget.LinearLayout/android.widget.Button[1]

iOS 选择器

谓词字符串

iOS 谓词字符串对 iOS 自动化来说快速而强大。

# 通过标签
-ios predicate string:label == "Login"

# 通过部分标签
-ios predicate string:label CONTAINS "Log"

# 通过名称
-ios predicate string:name == "loginButton"

# 通过类型
-ios predicate string:type == "XCUIElementTypeButton"

# 通过值
-ios predicate string:value == "ON"

# 组合条件
-ios predicate string:type == "XCUIElementTypeButton" AND label == "Login"

# 可见性
-ios predicate string:label == "Login" AND visible == 1

# 不区分大小写
-ios predicate string:label ==[c] "login"

谓词运算符:

运算符描述
==等于
!=不等于
CONTAINS包含子字符串
BEGINSWITH以...开始
ENDSWITH以...结束
LIKE通配符匹配
MATCHES正则表达式匹配
AND逻辑与
OR逻辑或

类链

iOS 类链提供层次结构元素定位,性能良好。

# 直接子元素
-ios class chain:**/XCUIElementTypeButton[`label == "Login"`]

# 任何后代
-ios class chain:**/XCUIElementTypeButton

# 通过索引
-ios class chain:**/XCUIElementTypeCell[3]

# 与谓词组合
-ios class chain:**/XCUIElementTypeButton[`name == "submit" AND visible == 1`]

# 层次结构
-ios class chain:**/XCUIElementTypeTable/XCUIElementTypeCell[`label == "Settings"`]

# 最后一个元素
-ios class chain:**/XCUIElementTypeButton[-1]

XPath (iOS)

XPath 在 iOS 上有效,但比谓词字符串慢。

# 通过类型和标签
//XCUIElementTypeButton[@label='Login']

# 通过名称
//XCUIElementTypeTextField[@name='username']

# 通过值
//XCUIElementTypeSwitch[@value='1']

# 层次结构
//XCUIElementTypeTable/XCUIElementTypeCell[1]

跨平台选择器策略

当编写需要在 iOS 和 Android 上都能工作的测试时,请按此优先顺序使用:

1. 无障碍 ID(最佳)

# 在两个平台上都有效
~loginButton

2. 平台特定与条件逻辑

当无障碍 ID 不可用时,使用平台特定的选择器:

Android:

android=new UiSelector().text("Login")

iOS:

-ios predicate string:label == "Login"

3. XPath(最后选择)

XPath 在两个平台上都有效,但元素类型不同:

Android:

//android.widget.Button[@text='Login']

iOS:

//XCUIElementTypeButton[@label='Login']

元素类型参考

Android 元素类型

类型描述
android.widget.Button按钮
android.widget.EditText文本输入
android.widget.TextView文本标签
android.widget.ImageView图像
android.widget.ImageButton图像按钮
android.widget.CheckBox复选框
android.widget.RadioButton单选按钮
android.widget.Switch开关
android.widget.Spinner下拉菜单
android.widget.ListView列表视图
android.widget.RecyclerView回收视图
android.widget.ScrollView滚动容器

iOS 元素类型

类型描述
XCUIElementTypeButton按钮
XCUIElementTypeTextField文本输入
XCUIElementTypeSecureTextField密码输入
XCUIElementTypeStaticText文本标签
XCUIElementTypeImage图像
XCUIElementTypeSwitch开关
XCUIElementTypeSlider滑块
XCUIElementTypePicker选择器
XCUIElementTypeTable表格视图
XCUIElementTypeCell表格单元格
XCUIElementTypeCollectionView集合视图
XCUIElementTypeScrollView滚动视图

最佳实践

应该

  • 使用无障碍 ID 获取稳定的跨平台选择器
  • 添加 data-testid 属性 到网页元素用于测试
  • 当无障碍 ID 不可用时使用资源 ID(Android)
  • 在 iOS 上优先使用谓词字符串而非 XPath
  • 保持选择器简单且具体

不应该

  • 避免长 XPath 表达式 - 它们慢且脆弱
  • 不要依赖索引来定位动态列表
  • 避免基于文本的选择器用于本地化应用
  • 不要使用绝对 XPath(从根开始)

好与坏选择器示例

# 好 - 稳定的无障碍 ID
~loginButton

# 坏 - 带索引的脆弱 XPath
//div[3]/form/button[2]

# 好 - 具有测试 ID 的特定 CSS
[data-testid="submit-button"]

# 坏 - 可能会改变的类
.btn-primary-lg-v2

# 好 - 带资源 ID 的 UiAutomator
android=new UiSelector().resourceId("com.app:id/submit")

# 坏 - 可能会被本地化的文本
android=new UiSelector().text("Submit")

调试选择器

Web(Chrome DevTools)

  1. 打开 Chrome DevTools(F12)
  2. 使用 Elements 面板检查元素
  3. 右键点击元素 → 复制 → 复制选择器
  4. 在控制台中测试选择器:document.querySelector('your-selector')

移动端(Appium Inspector)

  1. 启动 Appium Inspector
  2. 连接到正在运行的会话
  3. 点击元素查看所有可用属性
  4. 使用"搜索元素"功能测试选择器

使用 get_visible_elements

MCP 服务器的 get_visible_elements 工具为每个元素返回多种选择器策略:

向 Claude 询问:"获取屏幕上所有可见元素"

这会返回带有预生成选择器的元素,您可以直接使用。

高级选项

要更好地控制元素发现:

# 只获取图像和视觉元素
获取元素类型为 "visual" 的可见元素

# 获取带坐标的元素用于布局调试
启用 includeBounds 获取可见元素

# 获取接下来的 20 个元素(分页)
获取限制为 20 并偏移 20 的可见元素

# 包含布局容器用于调试
启用 includeContainers 获取可见元素

该工具返回分页响应:

{
"total": 42,
"showing": 20,
"hasMore": true,
"elements": [...]
}

使用 get_accessibility(仅限浏览器)

对于浏览器自动化,get_accessibility 工具提供页面元素的语义信息:

# 获取所有命名的无障碍节点
获取无障碍树

# 只过滤按钮和链接
获取按钮和链接角色过滤的无障碍树

# 获取结果的下一页
获取限制为 50 并偏移 50 的无障碍树

get_visible_elements 没有返回预期元素时,这很有用,因为它查询浏览器的原生无障碍 API。

Welcome! How can I help?

WebdriverIO AI Copilot