playwright 除錯: connect to exisisting broswer

ltt發表於2025-01-11
除錯ROS

背景

將 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

相關文章