Day 2：定位策略入门
适用人群：已经跑通第一个用例，想学会如何精准找到页面元素
预计耗时：8 分钟
目标：掌握 3 种定位方式 + 多元素处理
为什么要学定位
自动化测试的核心就是让工具找到页面上的元素，然后操作它。
如果定位方式不对，会出现两种报错：
- 找不到元素— 超时
- 找到多个— strict mode violation
今天就来解决这两个问题。
认识 3 种定位方法
| 定位方法 | 适用场景 |
|---|---|
| getByText | 通过按钮、链接的可见文字定位 |
| getByLabel | 通过 label 文字定位表单控件 |
| getBylocator | 通过 CSS / XPath 选择器定位 |
当页面有多个匹配元素时，用动作方法处理：
| 动作方法 | 作用 |
|---|---|
| getByFirstlocator | 取第一个匹配元素 |
| getByLastlocator | 取最后一个匹配元素 |
| getBylocatorNth / getByTextNth | 取第 N 个匹配元素（索引从 0 开始） |
用到的页面
今天用到 3 个页面：
- headingsTest.htm— 多个标题元素，演示 first/last/nth
- label.htm— 表单标签，演示 getByLabel
- tableTest.htm— 表格数据，演示 getByText 获取单元格内容
headingsTest 页面 — 7 个标题元素，多个重名标签
label 页面 — 表单控件与 label 绑定
tableTest 页面 — 员工表格，单元格有重复值
上传 day02_step.xlsx
文件包含 3 个用例：
| 用例名 | 目标页面 | 练习重点 |
|---|---|---|
| headingTest | headingsTest.htm | getByFirstlocator 处理多标签重名 |
| labelTest | label.htm | getByLabel + getBylocatorNth 绕过重复标签 |
| tableTest | tableTest.htm | getByTextNth + getByFirstlocator 处理多匹配单元格 |
headingTest 用例详解
页面包含 7 个标题元素：
h1: Heading A h2: Heading A h3: Heading A h1: Heading B h2: Heading C h3: Heading D h3: Heading D多个元素有相同标签名，直接getBylocator h3会报 strict mode（匹配到 3 个），所以改用getByFirstlocator：
| 步骤 | 定位方式 | 定位值 | 动作 | 说明 |
|---|---|---|---|---|
| 1 | navigateTo | 打开 headingsTest.htm | ||
| 2 | getByFirstlocator | h1 | click | 取第 1 个 h1（Heading A） |
| 3 | getByText | Heading C | click | 文字唯一（h2），不会报错 |
| 4 | getByFirstlocator | h3 | click | 取第 1 个 h3（Heading A） |
first 原理：
page.locator("h3") → 匹配 3 个元素（Heading A, Heading D, Heading D） page.locator("h3").first() → 只取第 1 个 → 精确 1 个元素 ✓这就是处理多元素页面的标准做法。
labelTest 用例详解
页面 label.htm 包含表单控件，通过 label 文字关联到输入框：
| 步骤 | 定位方式 | 定位值 | 动作 | 动作值 |
|---|---|---|---|---|
| 1 | navigateTo | label.htm | ||
| 2 | getBylocatorNth | input[type=“textbox”]||0 | input | hello |
| 3 | getByLabel | input | test@test.com | |
| 4 | assert | Label||Label | 验证页面文字 |
⚠️踩坑记录：页面上有两个输入框都关联了"Username"标签，getByLabel Username会报 strict mode。改用getBylocatorNth通过 CSS 定位第 1 个文本框即可绕过。Email 只有一个匹配，getByLabel正常使用。
tableTest 用例详解
页面 tableTest.htm 包含员工表格：
| 步骤 | 定位方式 | 定位值 | 动作 | 说明 |
|---|---|---|---|---|
| 1 | navigateTo | tableTest.htm | ||
| 2 | getByTextNth | 0-0||0 | getText | 获取第 1 个"0-0"单元格文字 |
| 3 | assert | 0-0||0-0 | 验证内容 | |
| 4 | getByFirstlocator | #CellWithId | click | 点击 id 为 CellWithId 的第 1 个元素 |
⚠️踩坑记录：表格中有 3 个单元格都显示"0-0"，getByText 0-0报 strict mode。改用getByTextNth 0-0||0取第 1 个。同理，多个单元格都有id=CellWithId，用getByFirstlocator #CellWithId取第 1 个。
执行与报告
点击执行，3 个用例依次运行。每个用例都会打开对应的页面并执行操作。
执行完成后查看 HTML 报告，通过为绿色，失败为黄色。
执行结果：3 个用例 13 个步骤全部通过（绿色）
动手练习
- 把 getByFirstlocator(“h3”) 改成 getBylocator(“h3”)，看会不会报错
- 在 labelTest 中把 getByLabel(“Email”) 改成 getByLabel(“Username”)，观察报错
- 在 tableTest 中用 getByText(“Steven”) 定位员工名，看能否找到唯一元素
下一篇预告：Day 3 — 定位策略进阶，我们将深入讲解 CSS 选择器和 XPath。