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

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


  1. 官方"秒测"工具:Playwright Inspector

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

bash 复制代码
# Python 例子
PWDEBUG=1 pytest my_test.py
# 或直接
playwright codegen https://your-site.com
  • 左侧 "Pick" 图标点一下,再点页面元素 → 自动生成最稳的 locator 代码。
  • 右侧 "Explore" 面板会实时显示:
    -- 匹配到几个节点
    -- 实际文本/属性值
    -- 高亮渲染
    → 把生成的代码复制进脚本即可,零手写。

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

python 复制代码
loc = page.locator('span.text-20px.font-bold')

# 1) 断言存在且唯一
expect(loc).to_have_count(1)   # 多于 1 个会立即失败

# 2) 临时高亮 2 秒,肉眼确认
loc.evaluate('el => el.style.border = "3px solid red"')
page.wait_for_timeout(2000)

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


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

官方提供 sync_playwright 的交互模式:

python 复制代码
from playwright.sync_api import sync_playwright
p = sync_playwright().start()
browser = p.chromium.launch(headless=False)
page = browser.new_page()
page.goto('https://your-site')
# 现在可以随便敲
loc = page.locator('button.el-button--primary')
loc.count()        # 立即返回匹配数量
loc.text_content() # 立即返回文本
loc.highlight()    # 页面直接闪绿框

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


  1. 脚本内"打印调试法"(最轻量)

python 复制代码
loc = page.locator('span:has-text("崔新")')
print('匹配数:', loc.count())      # → 1 才继续
print('文本:', loc.text_content()) # → 崔新

  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. 通过后再集成到完整用例,基本一次写对。
相关推荐
子兮曰3 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰3 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
爱勇宝3 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
胡写代码3 天前
别再前后端各写一套表单校验了
java·后端
大勇前进3 天前
原生 PHP 还是 Laravel?小项目到底要不要上框架
后端
yuzhi_liu3 天前
我用 LangGraph4j 实现 Multi-Agent Supervisor
后端
alsmile3 天前
Node-RED 之外,国产规则引擎的新方案:基于标准语法,Go 先行实现
后端·开源·go
大白803 天前
PHP 内存溢出排查思路:看懂报错日志,精准定位问题
后端
二月龙3 天前
PHP 接口返回统一响应封装,让前后端对接更省心
后端
盖伦发发3 天前
软件工程SOLID 五大设计原则
后端·软件工程