1.简介
在运行代码的时候，如果代码有问题，我就需要debug模式进行调试。但是有时候我们在做自动化测试的时候，代码没有问题，但是web页面要操作的元素根本没有反应。此时，我们就需要在控制台上查看是元素不存在，还是发生什么其他的改动了。最让人棘手的是：有时候明明页面能找到元素，代码运行却找不到，很是郁闷！playwright 的page.pause()断点功能出现，让打开playwright inspector可以愉快的在页面上调试了，我们甚至可以直接使用playwright.$(selector) 直接支持playwright选择器的方法。
2.page.pause()
我们在代码中加入page.pause()，Playwright进入调试模式。细心的小伙伴或者童鞋们，相比在之前的文章中，就会发现宏哥有时候会在代码中加入page.pause()。
2.1参考代码
# coding=utf-8🔥
# 1.先设置编码，utf-8可支持中英文，如上，一般放在第一行
# 2.注释：包括记录创建时间，创建人，项目名称。
'''
Created on 2024-12-04
@author: 北京-宏哥
@公众号：北京宏哥（微信搜索：北京宏哥，关注宏哥，提前解锁更多测试干货！）
Project: 《最新出炉》系列小成篇-Python+Playwright自动化测试-68 - 控制台（Console）调试和监听
'''
# 3.导入模块
from playwright.sync_api import Playwright, sync_playwright, expect
def run(playwright: Playwright) -> None:
browser = playwright.chromium.launch(headless=False)
context = browser.new_context()
page = context.new_page()
page.goto("https://www.baidu.com")
page.wait_for_timeout(2000)
page.pause()
context.close()
browser.close()
with sync_playwright() as playwright:
run(playwright)
2.2运行代码
运行含有page.pause()的代码后，会弹出Playwright Inspector工具，如下图所示：
3.playwright inspector 使用
在Playwright Inspector工具上点开启录制按钮，在页面上点点点，就可以生成对应的元素和操作。宏哥就按上边的代码访问完百度首页，然后开启录制按钮在输入框输入“北京-宏哥”，最后点击“百度一下”按钮。在Playwright Inspector工具处生成你点点点的代码。如下图所示：
3.1Pick locator
在Playwright Inspector工具下点击 Pick locator 后在浏览器上选择需要定位的元素，即可生成对应的 locator代码，如下图所示：
4.Console定位调试
1.我们可以通过键盘上的F12打开的浏览器上console页面，输入playwright.$(selector) 用代码进行调试定位。
2.selector 语法可以支持 playwright 的selector 定位的语法。
其它相关操作
- playwright.$(selector) 使用实际的Playwright查询引擎查询Playwright选择器
- playwright.$$(selector) 类似于
playwright.$,但是返回全部的匹配元素 - playwright.inspect(selector) 在元素面板中显示元素（如果相应浏览器的DevTools支持）。
- playwright.locator(selector) 使用实际的Playwright查询引擎查询Playwright元素
- playwright.selector(element) 为给定元素生成选择器。
3.敲黑板！如果想用这种方式定位调试，首先要进入playwright的调试模式（具体方法可以查看官方文档：playwright.nodejs.cn/docs/debug#…），才可以用浏览器的控制台定位调试，否则控制台就会报错，如下图所示：
4.宏哥这里进入调试模式，是通过在代码中加入page.pause()，来实现的。
5.事件监听console内容
playwright可以通过page.on() 监听console 内容.。
5.1console 事件
1.当我们在浏览器访问百度页面，然后通过键盘的f12 打开开发者工具或者浏览器右上角打开开发者工具，切换到控制台，会看到console 输出的内容，如下图所示：
5.2page.on()
playwright可以通过page.on() 监听console ，获取到console的内容。
5.2.1代码设计
5.2.2参考代码
# coding=utf-8🔥
# 1.先设置编码，utf-8可支持中英文，如上，一般放在第一行
# 2.注释：包括记录创建时间，创建人，项目名称。
'''
Created on 2024-12-04
@author: 北京-宏哥
@公众号：北京宏哥（微信搜索：北京宏哥，关注宏哥，提前解锁更多测试干货！）
Project: 《最新出炉》系列小成篇-Python+Playwright自动化测试-68 - 控制台（Console）调试和监听
'''
# 3.导入模块
from playwright.sync_api import Playwright, sync_playwright, expect
def console_msg(msg):
""" 抓取 console 日志"""
values = []
for arg in msg.args:
print(msg)
values.append(f'{arg.json_value()}')
# 写入log 文件
with open('console.log', 'a', encoding='utf-8') as fp:
fp.write(' '.join(values) + '\n')
with sync_playwright() as p:
browser = p.chromium.launch(headless=False, slow_mo=100)
context = browser.new_context() # 创建上下文，浏览器实例
page = context.new_page() # 打开标签页
page.on("console", console_msg)
page.goto("https://www.baidu.com/")
page.wait_for_load_state("networkidle")
print("browser will be close")
page.close()
context.close()
browser.close()
5.2.3运行代码
1.运行代码，右键Run'Test'，就可以看到控制台输出，如下图所示：
2.运行代码后电脑端的浏览器的动作。如下图所示：
6.小结
今天主要讲解了一下，playwright的调试模式及相关工具的使用，比较简单。你学废了吧。好了，时间不早了，今天就分享和讲解到这里。
