由微軟扶持，Selenium的勁敵。
Playwright 常用指令
1
| page.wait_for_selector('input[type="file"]', state='visible')
|
1
| page.wait_for_load_state(state='networkidle')
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| # 檢查元素是否可見
assert page.is_visible('selector')
# 驗證文本內容
assert page.text_content('h1') == '預期標題'
# 定位文件輸入元素
file_input = page.locator('[id=""]')
# 設置要上傳的文件
file_input.set_input_files(r'PATH')
time.sleep(3)
try:
assert file_input.count() > 0
print("文件上傳成功")
except:
print("文件上傳失敗")
|
1
| page.route('**/*', lambda route: route.fulfill(status=200, body='mocked data'))
|
1
| page.screenshot(path="before_click.png")
|
1
| playwright codegen --target python -o script.py -b chromium https://example.com
|
1
| nput_locator.type("testInput", delay=100)
|
1
2
3
4
5
6
| # 定位文件輸入元素
file_input = page.locator('input[type="file"]')
# 設置要上傳的文件
file_input.set_input_files('/path/to/file.txt')
# 設置多個文件上傳
file_input.set_input_files(['/path/to/file1.txt', '/path/to/file2.txt'])
|
Playwright捕捉Growl
Primefaces的Growl就像Android的Toast，只出現一陣子就消失，為了捕捉到他，必須用點技巧
概念
- 提示訊息很快消失，DOM中程式也是如此，可以開著F12並錄影回放捕捉Class name
- 用wait_for(state=’attached’…等訊息跳出來
實作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| # 回放中顯示Growl的class name是ui-growl-item，捕捉並擷取訊息
error_message_locator = page.locator("div.ui-growl-item").filter(has_text="訊息")
# 使用 locator.wait_for 等待提示信息被附加到 DOM 中（最大等待時間為5秒）
error_message_locator.wait_for(state='attached', timeout=5000)
try:
# 斷言提示信息是否附加到了 DOM 中且可見
expect(error_message_locator).to_be_visible()
print("斷言成功")
except:
print("斷言失敗")
# 停在當前頁面
page.pause()
|
XPath
畫面中元素的地址，可以依以下步驟取得
- 開發者工具
- 面板左上選元素
- 複製完整地址
Python 程式碼入口比較
1
2
3
4
5
| * if __name__ == "__main__"
* 通用，用於一般的Python程式入口設置，能夠幫助程式碼模組化，使之更容易測試和重用。
* with sync_playwright() as playwright
* 特定於 Playwright 庫，用於瀏覽器自動化腳本的資源管理和壽命週期控制。
|
Docker 上使用 Playwright
1
2
3
4
5
6
7
| * 使用mcr.microsoft.com/playwright:v1.52.0-noble Image
docker pull mcr.microsoft.com/playwright:v1.52.0-noble
* 映射輸出端口( 若有加 --rm在exit時會刪除容器，--user pwuser會以user身分都入)
docker run -p 3000:3000 --init -it --workdir /home/pwuser mcr.microsoft.com/playwright:v1.52.0-noble /bin/sh -c "npm set strict-ssl false && npx -y playwright@1.52.0 run-server --port 3000 --host 0.0.0.0 "
運行後顯示 Listening on ws://0.0.0.0:3000/
|
1
2
3
4
5
6
7
8
9
10
11
| > Windows 設定環境變數
$env:PW_TEST_CONNECT_WS_ENDPOINT = "ws://127.0.0.1:3000/"
> Linux 設定環境變數
PW_TEST_CONNECT_WS_ENDPOINT=ws://127.0.0.1:3000/
> 關鍵段落
browser = playwright.chromium.connect(ws_endpoint="ws://127.0.0.1:3000/")
> 若非WebSocket，在遠端設定背景執行
browser = playwright.chromium.launch(headless=True)
|
設定了 環境變數與關鍵段落後，瀏覽器的所有操作都會透過 WebSocket 傳送到 Docker 容器中執行，本機只負責執行 Python 腳本的邏輯。
```
JavaScript腳本: npx playwright test
Python腳本
# browser = playwright.chromium.launch(headless=False)
browser = playwright.chromium.connect(ws_endpoint=”ws://127.0.0.1:3000/“)
與本地相同:指令 python automate_form.py
``
Playwright執行環境比較
Windows 中的 Playwright
- 性能較佳( 沒有Docker的虛擬化層)
- GUI測試較方便
- 技術門檻較低
- 適合需要執行時看到結果情境
Gitlab CI的 Playwright
- 適合自動化測試
- 適合團隊協作
- 環境一致性高( 依賴管理/ 跨平台/ 隔離)
- 適合自動化測試，透過斷言並在Gitlab Artifacts看到測試結果
使用WebSocket優勢
- 手動執行
- 程式碼並將截圖保留在本地
- 適合本地開發，又想用遠端Docker執行情境
最方便執行方式還是在本地， Docker Playwright Server優勢在自動化測試，雖存在WebSocket用法但需要一定技術門檻