《最新出爐》系列初窺篇-Python+Playwright 自動化測試-1-環境準備與搭建

1.簡介

有很多人私信留言宏哥問能不能介紹一下 Playwright 這款自動化神器的相關知識，現在網上的資料太少了。其實在各大部落格和公眾號也看到過其相關的介紹和講解。要不就是不全面、不繫統，要不就是系統全面但是人家是收費的。當然了宏哥接下來也可能介紹的不全面或者不繫統，能力有限望大家理解。

2.Playwright 是什麼？

微軟在 2020 年初開源的新一代自動化測試工具，它的功能類似於 Selenium、Pyppeteer 等，都可以驅動瀏覽器進行各種自動化操作。它的功能也非常強大，對市面上的主流瀏覽器都提供了支援，API 功能簡潔又強大。雖然誕生比較晚，但是現在發展得非常火熱。
Playwright 支援大部分的語言，Node.js,Python,Java,.net，並且支援谷歌，火狐瀏覽器，WebKit，對於移動端也支援，可以在 Windows、Linux、MacOs 等機器上執行。指令碼執行支援同步或者非同步的方式。
官方網站：https://playwright.dev/docs/intro
Github 原始碼：https://github.com/microsoft/playwright-python

說到 UI 自動化，可能大家和我一樣，主要是用 Selenium。畢竟 Selenium 可是 UI 自動化方面的王者。而且 Selenium 上手很快，使用者廣泛，社群活躍，遇到問題隨時可以找到一大堆相關的網頁給你提供幫助。

那既然這樣，為什麼新出的這個 Playwright 還能掀起一陣熱潮呢？

一方面這是 IT 技術領域的一個趨勢，從業人需要時刻關注業內的新技術，新方向，不斷提升自己的能力，或者給公司，團隊帶來新的 idea，這樣才能不斷在職業生涯中穩步向前。另一方面，Selenium 雖然有著各種突出的優勢，但是弊端也很明顯：

它依賴多種不同的 driver，根據瀏覽器的不斷更新，就要不斷去維護這些 driver，以及處理相應的適用性問題。比如 chromedriver 升級到適用 chrome version: 88，關於之前 Ctrl+a 的呼叫就不支援了，需要調整相應 code。

2.1 穩定性不夠好

Selenium 本身提供的方法，並不能保證 test case 穩定透過，因為 element 狀態有時候並不可用，這個時候的 actions 肯定會有問題。

雖然使用人員會封裝 Selenium 方法，加入一些等待，甚至是元素狀態輪詢判斷，但是穩定性增加的同時，執行時間也同時大幅增加。

2.2 錄製程式碼不穩定

因為 Selenium IDE 錄製的程式碼是基於 coordinate 或者 DOM 層級結構，所以極其不穩定，也就導致 IDE 基本無人問津。

Selenium 的劣勢，或許也就是 Playwright 能夠快速崛起的抓住的機會吧。我們來看看 Playwright 到底有什麼魔力，能撼動 Selenium 的王者地位？

首先，Playwright 同樣適用於多瀏覽器、多語言，這樣對於準備過渡到這個工具的使用者是非常友好的。

其次，Playwright 可以使用基於 css、xpath、text 這些常用的元素定位方式進行錄製生成程式碼，能大幅度的減少寫程式碼的時間，同時程式碼穩定性也可以保證。

再有就是 playwright 使用 api 方式操作瀏覽器核心，速度快，而且可以和瀏覽器雙向溝通，元素操作可以在元素 ready 的情況下進行，穩定性很好。

最後，支援 UI 和非 UI 方式執行，節省了 debug、 run 時間。

3.Playwright 的優勢

先和宏哥看一下官方最新介紹https://playwright.dev/python/，宏哥將其簡單翻譯一下如下：

3.1 跨瀏覽器和平臺

• 跨瀏覽器。Playwright 支援所有現代渲染引擎，包括 Chromium、WebKit 和 Firefox。
• 跨平臺。在 Windows、Linux 和 macOS 上進行本地測試或在 CI 上進行無頭或有頭測試。
• 跨語言。在 TypeScript、JavaScript、Python、.NET、Java 中使用 Playwright API 。
• 測試行動網路。適用於 Android 和 Mobile Safari 的 Google Chrome 瀏覽器的本機移動模擬。相同的渲染引擎適用於您的桌面和雲端。

3.2 穩定性

• 自動等待。Playwright 在執行動作之前等待元素可操作。它還具有一組豐富的內省事件。兩者的結合消除了人為超時的需要——這是不穩定測試的主要原因。
• Web 優先斷言。Playwright 斷言是專門為動態網路建立的。檢查會自動重試，直到滿足必要的條件。
• 追蹤。配置測試重試策略，捕獲執行跟蹤、影片、螢幕截圖以消除薄片。

3.3 執行機制

瀏覽器在不同程序中執行屬於不同來源的 Web 內容。Playwright 與現代瀏覽器架構保持一致，並在程序外執行測試。這使得 Playwright 擺脫了典型的程序內測試執行器的限制。

• 多重一切。測試跨越多個選項卡、多個來源和多個使用者的場景。為不同的使用者建立具有不同上下文的場景，並在您的伺服器上執行它們，所有這些都在一次測試中完成。
• 可信事件。懸停元素，與動態控制元件互動，產生可信事件。Playwright 使用與真實使用者無法區分的真實瀏覽器輸入管道。
• 測試框架，穿透 Shadow DOM。Playwright 選擇器穿透影子 DOM 並允許無縫地輸入幀。

3.4 完全隔離 - 快速執行

• 瀏覽器上下文。Playwright 為每個測試建立一個瀏覽器上下文。瀏覽器上下文相當於一個全新的瀏覽器配置檔案。這提供了零開銷的完全測試隔離。建立一個新的瀏覽器上下文只需要幾毫秒。
• 登入一次。儲存上下文的身份驗證狀態並在所有測試中重用它。這繞過了每個測試中的重複登入操作，但提供了獨立測試的完全隔離。

3.5 強大的工具

• 程式碼生成器。透過記錄您的操作來生成測試。將它們儲存為任何語言。
• 除錯。檢查頁面、生成選擇器、逐步執行測試、檢視點選點、探索執行日誌。
• 跟蹤檢視器。捕獲所有資訊以調查測試失敗。Playwright 跟蹤包含測試執行截圖、實時 DOM 快照、動作資源管理器、測試源等等。

4.環境準備

4.1 作業系統

1.宏哥的環境是 Windows 10 版本 64 位系統（32 位的同學自己想辦法哦，當然了現在 32 位的一般很少見），如下圖所示：

4.2Python 版本

Python 版本：python:3.7，如下圖所示：

5.環境搭建

Playwright 是專門為滿足端到端測試的需要而建立的。Playwright 支援所有現代渲染引擎，包括 Chromium、WebKit（Safari 的瀏覽器引擎）和 Firefox。
在 Windows、Linux 和 macOS 上進行本地測試或在 CI 上進行測試，無頭或者有頭的本地移動模擬測試。

5.1Python 版本

python 版本要求 python3.7+ 版本。（最好用 3.7，我試了下 3.8 有相容問題）

5.2 安裝 Playwright

1.和安裝其他依賴庫一樣，直接使用命令安裝即可。可能要稍等一會....pip 安裝時會自動下載瀏覽器驅動。

pip install playwright

2.出現如下圖所示介面表示安裝成功。

5.3 安裝所需的瀏覽器

1.安裝所需的瀏覽器 chromium,firefox 和 webkit，安裝時會自動下載瀏覽器（僅需這一步即可安裝所需的瀏覽器，並且不需要安裝驅動包了（解決了 selenium 啟動瀏覽器，總是要找對應瀏覽器版本的驅動包，有時候瀏覽器自動更新升級了，還得再次下載對應驅動的的這一頭疼的事）。

playwright install  # 安裝支援的瀏覽器：cr, chromium, ff, firefox, wk 和 webkit

2.安裝指定的 chromium 瀏覽器使用如下命令即可。

playwright install chromium # 安裝指定的chromium瀏覽器

3.安裝時會自動下載瀏覽器依賴，windows 系統在%USERPROFILE%\AppData\Local\ms-playwright 路徑下（可以透過 Docs 命令視窗檢視這個安裝路徑）。

4.如果安裝報錯，提示缺少 Visual C++， 解決辦法：安裝 Microsoft Visual C++ Redistributable 2019：https://aka.ms/vs/16/release/VC_redist.x64.exe 直接點選就可以下載了，下載後直接安裝即可。

到此，Python+Playwright 的環境就搭建完成了。下邊看一下如何使用。

6.牛刀小試

在 Python 指令碼中使用 Playwright，並啟動和關閉 3 種瀏覽器（chromium,firefox 和 webkit）。

6.1chromium

啟動 chromium 瀏覽器並開啟百度頁面，獲取頁面的 title，在搜尋框輸入啟動的瀏覽器名字，最後截圖，關閉瀏覽器。

1.參考程式碼

# coding=utf-8🔥

# 1.先設定編碼，utf-8可支援中英文，如上，一般放在第一行

# 2.註釋：包括記錄建立時間，建立人，專案名稱。
'''
Created on 2023-05-17
@author: 北京-宏哥   QQ交流群：705269076公眾號：北京宏哥
Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-1-環境準備與搭建
'''

# 3.匯入模組

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)          # 啟動 chromium 瀏覽器
    page = browser.new_page()              # 開啟一個標籤頁
    page.goto("https://www.baidu.com")     # 開啟百度地址
    print(page.title())                    # 列印當前頁面title
    page.click("input[name=\"wd\"]")       # 點選輸入框
    page.fill("input[name=\"wd\"]", "chromium")  # 在輸入框輸入瀏覽器名字
    page.screenshot(path=f'example-{p.chromium.name}.png')
    browser.close()                        # 關閉瀏覽器物件

2.執行程式碼

6.2firefox

啟動 firefox 瀏覽器並開啟百度頁面，獲取頁面的 title，截圖。

1.參考程式碼

# coding=utf-8🔥

# 1.先設定編碼，utf-8可支援中英文，如上，一般放在第一行

# 2.註釋：包括記錄建立時間，建立人，專案名稱。
'''
Created on 2023-05-17
@author: 北京-宏哥   QQ交流群：705269076公眾號：北京宏哥
Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-1-環境準備與搭建
'''

# 3.匯入模組

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.firefox.launch(headless=False)          # 啟動 chromium 瀏覽器
    page = browser.new_page()              # 開啟一個標籤頁
    page.goto("https://www.baidu.com")     # 開啟百度地址
    print(page.title())                    # 列印當前頁面title
    page.click("input[name=\"wd\"]")       # 點選輸入框
    page.fill("input[name=\"wd\"]", "chromium")  # 在輸入框輸入瀏覽器名字
    page.screenshot(path=f'example-{p.firefox.name}.png')  #使用瀏覽器名字命名截圖
    browser.close()                        # 關閉瀏覽器物件

2.執行程式碼

6.3webkit

啟動 webkit 瀏覽器並開啟百度頁面，獲取頁面的 title，截圖。

1.參考程式碼

# coding=utf-8🔥

# 1.先設定編碼，utf-8可支援中英文，如上，一般放在第一行

# 2.註釋：包括記錄建立時間，建立人，專案名稱。
'''
Created on 2023-05-17
@author: 北京-宏哥   QQ交流群：705269076公眾號：北京宏哥
Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-1-環境準備與搭建
'''

# 3.匯入模組

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.webkit.launch(headless=False)          # 啟動 chromium 瀏覽器
    page = browser.new_page()              # 開啟一個標籤頁
    page.goto("https://www.baidu.com")     # 開啟百度地址
    print(page.title())                    # 列印當前頁面title
    page.click("input[name=\"wd\"]")       # 點選輸入框
    page.fill("input[name=\"wd\"]", "webkit")  # 在輸入框輸入瀏覽器名字
    page.screenshot(path=f'example-{p.webkit.name}.png')  #使用瀏覽器名字命名截圖
    browser.close()                        # 關閉瀏覽器物件

2.執行程式碼

7.小結

7.1 實踐過程中遇到的問題

1.安裝 playwright 時候，告警提示要升級 pip，如下圖所示：

WARNING: You are using pip version 21.3.1; however, version 23.1.2 is available.
You should consider upgrading via the 'd:\software\python\python37\python.exe -m pip install --upgrade pip' command.

解決辦法：使用如下命令進行安全升級：

python -m pip install --upgrade pip

2.更新失敗，報錯沒有許可權，如下圖所示：

ERROR: Could not install packages due to an OSError: [WinError 5] 拒絕訪問。: 'd:\software\python\python37\scripts\pip.exe'
Consider using the --user option or check the permissions.

解決辦法：更新失敗是因為沒有許可權，因此給上使用者許可權，就是加上--user 即可。

pip install --upgrade --user pip

3.安裝 playwright 時候，告警錯誤，本著沒啥影響的態度，但看著又十分不爽，我決定解決它！

WARNING: Ignoring invalid distribution -ip (d:\software\python\python37\lib\site-packages)

解決方法：

找到警告資訊中報錯的目錄，
然後刪掉~開頭的資料夾，
那種事之前安裝外掛失敗/中途退出，導致外掛安裝出現異常導致的，雖說警告資訊不影響，但是有強迫症 哈哈 。把資料夾刪掉就好了

7.2 瀏覽器

前面提到過，Playwright 支援所有主流瀏覽器，下面介紹 4 種瀏覽器的啟動方法：

# chrome
browser = p.chromium.launch(channel="chrome", headless=False)
# Microsoft Edge
browser = p.chromium.launch(channel="msedge", headless=False)
# firefox
browser = p.firefox.launch(headless=False)
# webkit
browser = p.webkit.launch(headless=False)

7.3 習慣問題

如果你不習慣 with 語句，也可以用 start() 和 stop() 的方式，但是宏哥建議還是要習慣，因為開發是一個團隊，不是一個人。當然了也分情況不能一概而論：

用 with 是香，但是，當我們用 playwright 做爬蟲時，尤其是在某個頁面長期執行，例如，向下滑動採集評論等操作。這些操作會在同一介面中載入非常多的 js 檔案，如果你有事件監聽，那資源佔用會更大。最後，with 管理器會直接崩潰，顯示 js 記憶體溢位，難受的一匹，所以推薦第二種使用方法。

# coding=utf-8🔥

# 1.先設定編碼，utf-8可支援中英文，如上，一般放在第一行

# 2.註釋：包括記錄建立時間，建立人，專案名稱。
'''
Created on 2023-05-18
@author: 北京-宏哥   QQ交流群：705269076
公眾號：北京宏哥
Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-1-環境準備與搭建
'''

# 3.匯入模組
from playwright.sync_api import sync_playwright

playwright = sync_playwright().start()
browser = playwright.chromium.launch(headless=False)
page = browser.new_page()
page.goto("https://www.baidu.com/")
browser.close()
playwright.stop()

好了，今天時間也不早了，宏哥就講解和分享到這裡，感謝您耐心的閱讀，希望對您有所幫助。