（三）Playwright 元素定位（一）开发者工具的使用

（三）Playwright 元素定位（一）开发者工具的使用

编写自动化脚本的第一步是找到页面上要操作的元素。和 Selenium 一样，我们需要借助浏览器自带的开发者工具来获取元素信息。不过 Playwright 还提供了几个独有的调试利器，让定位过程更加高效。

 

一、Chrome / Edge 开发者工具（F12）

这是最基础也最通用的方式，无论用什么自动化框架都要掌握。

1. 打开目标网页（这里以百度为例）

2. 按 F12 键（或右键 → "检查"）打开开发者工具

3. 点击左上角的 箭头图标（或按 Ctrl+Shift+C）进入"选择元素"模式

   

4. 将鼠标移动到页面上的目标元素（比如百度的搜索框），点击后右侧 HTML 面板会自动跳转到对应的 DOM 节点

   

5. 在 Elements 面板中可以查看该元素的：

   • HTML 标签：如 <input id="kw" name="wd" class="s_ipt">
   • 属性值：id、name、class、type 等
   • CSS 选择器：右键元素 → Copy → Copy selector
   • XPath：右键元素 → Copy → Copy XPath
   

 

二、Playwright Inspector —— 交互式定位神器 ⭐

Playwright 自带了一个强大的可视化调试工具叫 Playwright Inspector（也叫 Codegen），它不仅能帮你定位元素，还能实时生成代码！

启动方式：

在终端中运行：

playwright codegen https://www.baidu.com

这会自动打开一个浏览器窗口和 Inspector 面板：

Codegen 的强大之处：

1. 点击即生成代码：在浏览器里每做一个操作（点击、输入、导航），右边面板立刻生成对应的 Playwright 代码

2. 多种 Locator 可选：选中某个元素后，Codegen 会列出所有可用的定位方式（role、text、label、placeholder...），你可以选择最稳定的一个

   

3. 语言切换：顶部可以切换生成 Python / Java / JavaScript / TypeScript .NET 代码

4. 录制导出：操作完毕后一键复制完整代码到剪贴板，粘贴到 IDE 即可运行

实际工作流建议：先用 codegen 录制一遍流程拿到骨架代码，然后回到 IDE 里优化 locator（换成更语义化的定位方式）、加上断言和异常处理。

 

三、Trace Viewer —— 失败后的"录像回放"

当测试失败时，Playwright 可以生成一份完整的执行追踪文件，包含每一帧的截图、DOM 快照、网络请求等信息。

开启追踪的方式（在脚本中）：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    context = browser.new_context()

    # 开始追踪
    context.tracing.start(screenshots=True, snapshots=True, sources=True)

    page = context.new_page()
    page.goto("https://www.baidu.com")
    page.locator("#kw").fill("Playwright 教程")
    page.locator("#su").click()

    # 停止追踪并保存
    context.tracing.stop(path="trace.zip")

    browser.close()

查看追踪文件：

playwright show-trace trace.zip

Trace Viewer 打开后可以看到：

• 左侧：时间轴上的每个操作动作
• 中间：每一步的页面截图（可逐帧播放）
• 右侧：当时的 DOM 快照和控制台日志

这个能力对于排查"为什么这个元素找不到"这类问题极其有用——你可以精确看到失败那一刻页面的真实状态。

 

四、三种工具的适用场景总结

工具	何时使用	特点
F12 开发者工具	查看页面结构、获取元素属性	通用、所有框架都能用
Playwright Codegen	快速录制生成脚本原型	Playwright 独有，所见即所得
Trace Viewer	测试失败后排查根因	Playwright 独有，逐帧回放