由微軟扶持，Selenium的勁敵。

Playwright 常用指令

用Edge

1	browser = playwright.chromium.launch(channel="msedge",headless=False)

允許下載

1	context = browser.new_context(accept_downloads=True)

等待元素可見

1	page.wait_for_selector('input[type="file"]', state='visible')

等頁面加載

1	page.wait_for_load_state(state='networkidle')

斷言

# 檢查元素是否可見
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)

上傳檔案

# 定位文件輸入元素
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’…等訊息跳出來

實作

# 回放中顯示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()

Playwright定位方式

依頁面上文字

page.goto(“網址”)
page.get_by_role(“button”, name=”文字”).click()

依CSS

page.locator(“#companyArea span”).click()
time.sleep(1)

使用XPath選擇檔案

畫面中元素的地址，可以依以下步驟取得

開發者工具
面板左上選元素
複製完整地址

1
2
3

with page.expect_file_chooser() as fc_info:
    page.locator(r"xpath=/html/body/div[2]/div/div/div[4]/form/div[22]/div/div/div/div/div[1]/button").click()
file_chooser = fc_info.value

使用 JavaScript 填寫輸入框

1
2
3

page.evaluate('''(value) => {
document.querySelector("#j_idt90").value = value;
}''', element)

Python 程式碼入口比較

* if __name__ == "__main__"
	* 通用，用於一般的Python程式入口設置，能夠幫助程式碼模組化，使之更容易測試和重用。

* with sync_playwright() as playwright
	* 特定於 Playwright 庫，用於瀏覽器自動化腳本的資源管理和壽命週期控制。

Docker 上使用 Playwright

Docker Server建置

* 使用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/

本地Websocket設定

> 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用法但需要一定技術門檻

如果你覺得這篇文章很棒，請你不吝點讚 (ﾟ∀ﾟ)