适用人群：掌握基础定位，想应对更复杂的页面结构
预计耗时：10 分钟
目标：学会 CSS 选择器、XPath、getByRole 等进阶定位方法
今天学到的定位方法
| 定位方法 | 语法示例 | 适用场景 |
|---|---|---|
| getBylocator | #divWithBeforePseuodoEl / //div[contains(text(),‘Inner’)] | CSS 选择器或 XPath |
| getBylocatorNth | span | |
| getByTextExact | spannn | 精确文字匹配 |
| getByRoleByCheckBox | abcd | 按角色定位 checkbox |
| getByRoleByRadio | Key Up | 按角色定位 radio |
| getByPlaceholder | Enter Email | 占位符定位 |
上传并执行 day03_step.xlsx
文件包含 2 个用例。
spandiv 用例
页面：spandiv.htm，包含各种 span 和 div 结构
| 步骤 | 定位方式 | 定位值 | 说明 |
|---|---|---|---|
| CSS 定位 | getBylocator | #divWithBeforePseuodoEl | CSS ID 选择器 |
| XPath | getBylocator | //div[contains(text(),‘Inner’)] | XPath 层级定位 |
| 第 N 个 | getBylocatorNth | span | |
| 精确文本+存储 | getByTextExact → 存储变量 | spannn → actualText | 取文本并存为变量 |
| 断言验证 | assert | @actualText |
checkbox 用例
页面：label.htm + keypress.htm，包含标签化复选框、单选框和占位符输入框
| 步骤 | 定位方式 | 定位值 | 说明 |
|---|---|---|---|
| 打开表单页 | navigateTo | label.htm | 带标签和占位符的页面 |
| 勾选复选框 | getByRoleByCheckBox | abcd | 按角色定位 checkbox |
| 输入搜索框 | getByPlaceholder | Enter Email | 按 placeholder 定位 |
| 打开单选页 | navigateTo | keypress.htm | 切换页面 |
| 选中单选框 | getByRoleByRadio | Key Up | 按角色定位 radio |
getBylocator 详解
getBylocator 是最灵活的定位方式，支持 CSS 和 XPath 两种语法。
CSS 选择器示例
| 写法 | 含义 |
|---|---|
| #btnId | id 为 btnId 的元素 |
| .btnClass | class 为 btnClass |
| div > span | div 的直接子元素 span |
XPath 示例
| 写法 | 含义 |
|---|---|
| //div[@class=x] | 所有 class=x 的 div |
| //input[@name=username] | name=username 的 input |
| //button[contains(text(),Submit)] | 文字含 Submit 的按钮 |
N 后缀定位
| 方法 | 说明 |
|---|---|
| getBylocatorNth | selector |
| getByFirstlocator | 第一个元素 |
| getByLastlocator | 最后一个元素 |
动手练习
- 用 getBylocator 写一个 XPath 选中 spandiv 页面中的 inner 元素
- 用 getByRoleByCheckBox 在 label.htm 页面勾选
some bold text复选框 - 用 getByPlaceholder 定位 label.htm 页面的
Enter Password输入框
执行结果
下一篇预告：Day 4 — 元素操作基础