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. 通过后再集成到完整用例,基本一次写对
相关推荐
aiopencode1 小时前
软件苹果商城上架的流程与团队协作模式 一个项目从开发到发布的完整经历
后端
鹿里噜哩1 小时前
Spring Authorization Server 打造认证中心(一)项目搭建/集成
java·后端·spring
汤姆yu2 小时前
基于springboot的智慧家园物业管理系统
java·spring boot·后端
百***69442 小时前
如何使用Spring Boot框架整合Redis:超详细案例教程
spring boot·redis·后端
q***31142 小时前
【Springboot3+vue3】从零到一搭建Springboot3+vue3前后端分离项目之后端环境搭建
android·前端·后端
e***0962 小时前
【Spring】配置文件的使用
java·后端·spring
a***13142 小时前
【spring专题】编译spring5.3源码
java·后端·spring
n***63272 小时前
【spring】Spring事件监听器ApplicationListener的使用与源码分析
java·后端·spring
seven97_top2 小时前
SpringCloud 常见面试题(一)
后端·spring·spring cloud