背景

将 playwright 连接到已经打开的浏览器和页面，直接调试核心代码，提高调试效率
调试时省掉整个测试流程里，登录，输入密码的阶段
可以小改动快速调试，调试时间小于 1s
同时也适用于有框架包装的实际项目

环境

windows
python
playwright

原理

主要涉及以下几个关键部分：

1. 已运行的 Chrome 实例：这是一个已经在系统中启动并正在运行的 Chrome 浏览器进程。
2. Chrome DevTools Protocol (CDP)：这是一组用于与 Chrome 浏览器进行通信和控制的协议和接口。它允许外部程序发送命令和接收浏览器的状态和事件信息。
3. Playwright 框架：Playwright 提供了与 CDP 进行交互的功能和接口。 当使用 playwright connect_over_cdp 时，Playwright 会通过 CDP 与指定的正在运行的 Chrome 实例建立连接。它会使用 CDP 发送各种指令，例如获取页面元素、执行操作（如点击、输入）、获取页面状态等。 同时，Chrome 实例会响应这些指令，并通过 CDP 将相关的结果和事件信息返回给 Playwright。Playwright 接收到这些信息后，可以进行处理和进一步的操作，从而实现对已运行 Chrome 浏览器的控制和测试。 # 步骤 ## 以 debug 模式打开 chrome 浏览器

cd C:\Program Files\Google\Chrome\Application && chrome.exe --remote-debugging-port=9222 --user-data-dir="C:\playwright\user_data"

--remote-debugging-port 指定浏览器调试端口号
这里可以随机指定一个端口号，不要指定为已经被占用的端口号
--user-data-dir 用户配置文件目录
这里需要单独指定一个文件夹目录（不存在会新建），如果不显式指定该参数，运行会污染浏览器默认的配置文件
如下：

验证 debug 模式是否打开成功：http://localhost:9222/json/version

代码连接

class Debug():
    def __init__(self):
        # Start a new session with Playwright using the sync_playwright function.
        with sync_playwright() as playwright:
            # Connect to an existing instance of Chrome using the connect_over_cdp method.
            browser = playwright.chromium.connect_over_cdp("http://localhost:9222")

            # Retrieve the first context of the browser.
            default_context = browser.contexts[0]

            # Retrieve the first page in the context.
            page = default_context.pages[0]

            # Print the title of the page.
            print(f'You are now at: {page.title()}')
            print(f'You are now at: {page.url}')
            self.myUIClass= YourUIClass(page)

            ########### here to debug your code ###########
            self.myUIClass.goto_home()


if __name__ == "__main__":
    Debug()

Reference

https://playwright.dev/python/docs/api/class-browsertype#browser-type-connect-over-cdp
https://stackoverflow.com/questions/71362982/is-there-a-way-to-connect-to-my-existing-browser-session-using-playwright
https://blog.csdn.net/lilongsy/article/details/130560129