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 小时前
【ES避坑指南】明明存的是 "CodingAddress",为什么 term 查询死活查不到?彻底搞懂 text 和 keyword
后端
程序员爱钓鱼3 小时前
Go 操作 Windows COM 自动化实战:深入解析 go-ole
后端·go·排序算法
回家路上绕了弯4 小时前
深入解析Agent Subagent架构:原理、协同逻辑与实战落地指南
分布式·后端
子玖4 小时前
实现微信扫码注册登录-基于参数二维码
后端·微信·go
IT_陈寒4 小时前
JavaScript代码效率提升50%?这5个优化技巧你必须知道!
前端·人工智能·后端
IT_陈寒4 小时前
Java开发必知的5个性能优化黑科技,提升50%效率不是梦!
前端·人工智能·后端
东风t西瓜4 小时前
飞书项目与多维表格双向同步
后端
初次攀爬者4 小时前
Kafka的Rebalance基础介绍
后端·kafka
ServBay4 小时前
垃圾堆里编码?真的不要怪 PHP 不行
后端·php
IronixPay5 小时前
Telegram Bot 接入 USDT 支付完整教程
后端