playwright的调试模式，方便调试selector, locator语法及查找效果

下面是一套“边写边测”的通用套路，确保 page.locator() / wait_for_selector() 在提交代码前就能一次跑通，不用每次都重跑完整流程。

1. 官方“秒测”工具：Playwright Inspector

命令行里加 --paused 即可打开自带调试器：

1# Python 例子
2PWDEBUG=1 pytest my_test.py
3# 或直接
4playwright codegen https://your-site.com
5

• 左侧 “Pick” 图标点一下，再点页面元素 → 自动生成最稳的 locator 代码。
• 右侧 “Explore” 面板会实时显示：
  – 匹配到几个节点
  – 实际文本/属性值
  – 高亮渲染
  → 把生成的代码复制进脚本即可，零手写。

1. 在代码里快速“断言+高亮”

1loc = page.locator('span.text-20px.font-bold')
2
3# 1) 断言存在且唯一
4expect(loc).to_have_count(1)   # 多于 1 个会立即失败
5
6# 2) 临时高亮 2 秒，肉眼确认
7loc.evaluate('el => el.style.border = "3px solid red"')
8page.wait_for_timeout(2000)
9

跑单条用例时一眼就能看到是不是你想找的元素。

1. 交互式 REPL —— 边敲边回车

官方提供 sync_playwright 的交互模式：

1from playwright.sync_api import sync_playwright
2p = sync_playwright().start()
3browser = p.chromium.launch(headless=False)
4page = browser.new_page()
5page.goto('https://your-site')
6# 现在可以随便敲
7loc = page.locator('button.el-button--primary')
8loc.count()        # 立即返回匹配数量
9loc.text_content() # 立即返回文本
10loc.highlight()    # 页面直接闪绿框
11

调试完把确认好的 locator 复制到正式脚本即可。

1. 脚本内“打印调试法”（最轻量）

1loc = page.locator('span:has-text("崔新")')
2print('匹配数:', loc.count())      # → 1 才继续
3print('文本:', loc.text_content()) # → 崔新
4

1. 常见踩坑 checklist

• 元素在 iframe → 先 page.frame_locator('#xxx').locator(...)
• 等待时机不对 → 外加 loc.wait_for() 或 expect(loc).to_be_visible()
• 动态 class 顺序变化 → 用 [class*="text-20px"] 而非完整串
• 文本前后有空格 → text=/\s*崔新\s*/（Playwright 正则语法）

一句话流程

1. PWDEBUG=1 pytest → Inspector 自动生成 locator
2. 脚本里 expect(loc).to_have_count(1) + loc.highlight() 确认
3. 通过后再集成到完整用例，基本一次写对。

《playwright的调试模式，方便调试selector, locator语法及查找效果》 是转载文章，点击查看原文。