《最新出爐》系列初窺篇-Python+Playwright 自動化測試-3-離線搭建 playwright 環境

北京-宏哥發表於2024-11-06
Python

1.簡介

在介紹 selenium 的時候，宏哥也介紹過等待，是因為在某些元素出現後，才可以進行操作。有時候我們自己忘記新增等待時間後，查了半天程式碼確定就是沒有問題，奇怪的就是獲取不到元素。然後搞了好久，或者經過別人的提示才恍然大悟沒有新增等待時間。而 playwright 為了避免我們犯這麼 low 的錯誤，它對元素執行操作前，會進行一系列可操作性檢查，以確保這些行動按預期執行。它會自動等待所有相關檢查透過，然後才執行請求的操作。如果所需的檢查未在給定的範圍內透過則丟擲 timeout，操作將失敗並顯示 TimeoutError。正是由於 playwright 新增了預設等待時間才會增加指令碼穩定性。

2.自動等待

什麼是 playwright 的自動等待？在官網我們可以看到這樣一段話：

Auto-wait. Playwright waits for elements to be actionable prior to performing actions. It also has a rich set of introspection events. The combination of the two eliminates the need for artificial timeouts - the primary cause of flaky tests.

翻譯過來的大概意思就是說：自動等待：playwright 對元素執行操作前，會進行一系列可操作性檢查，以確保這些行動按預期執行。它會自動等待所有相關檢查透過，然後才執行請求的操作。如果所需的檢查未在給定的範圍內透過則丟擲 timeout，操作將失敗並顯示 TimeoutError。

如元素點選操作，在操作元素之前需要預判：

以下是針對每個操作執行的可操作性檢查的完整列表：

Action Attached Visible Stable Receives Events Enabled Editable
check Yes Yes Yes Yes Yes -
click Yes Yes Yes Yes Yes -
dblclick Yes Yes Yes Yes Yes -
setChecked Yes Yes Yes Yes Yes -
tap Yes Yes Yes Yes Yes -
uncheck Yes Yes Yes Yes Yes -
hover Yes Yes Yes Yes - -
scrollIntoViewIfNeeded Yes - Yes - - -
screenshot Yes Yes Yes - - -
fill Yes Yes - - Yes Yes
selectText Yes Yes - - - -
dispatchEvent Yes - - - - -
focus Yes - - - - -
getAttribute Yes - - - - -
innerText Yes - - - - -
innerHTML Yes - - - - -
press Yes - - - - -
setInputFiles Yes - - - - -
selectOption Yes Yes - - Yes -
textContent Yes - - - - -
type Yes - - - - -

3.slow_mo

透過前邊的學習和實踐，想必大家和宏哥有同樣的感覺吧：Playwright 開啟瀏覽器執行指令碼的速度那就是一個字：快！相對於 selenium，playwright 執行速度會更快，眨眼間就完事了。因此為了便於我們檢視執行的過程，我們可以加上等待來減緩執行，但是與 selenium 不同，playwright 透過 slow_mo（單位是毫秒）減慢執行速度，它的作用範圍是全域性的，從啟動瀏覽器到操作元素每個動作都會有等待間隔，方便在出現問題的時候看到頁面操作情況。使用方法如下:

chromium.launch(headless=False, slow_mo=50)

3.1 牛刀小試

宏哥就按照上邊的方法實踐一下，看一下是否真的可以減緩執行速度。

3.1.1 參考程式碼

# coding=utf-8🔥

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

# 2.註釋：包括記錄建立時間，建立人，專案名稱。
'''
Created on 2023-05-25
@author: 北京-宏哥   QQ交流群：705269076
公眾號：北京宏哥
Project: 《《最新出爐》系列初窺篇-Python+Playwright自動化測試-4-playwright自動等待及擴充套件
'''

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

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False, slow_mo=5000)
    page = browser.new_page()
    page.goto("https://image.baidu.com/search/down?url=https://www.baidu.com")
    print(page.title())
    page.fill('#kw', "北京-宏哥")
    page.click('#su')
    browser.close()

3.1.2 執行程式碼

1.執行程式碼，右鍵 Run'test'，控制檯輸出，如下圖所示：

2.程式碼的執行過程，如下圖所示：

4.time.sleep()

與 selenium 不同，playwright 不再支援 time.sleep()，而是使用 page.wait_for_timeout() 來實現等待，當我們除錯時需要等待，即可使用該方法。Playwright 在查詢元素的時候具有自動等待功能，如果你在除錯的時候需要使用等待，你應該使用 page.wait_for_timeout(5000) 代替 time.sleep(5) 並且最好不要等待超時。

注：請使用 wait( wait_for_timeout) 方法而不是 time 模組。這是因為我們內部依賴於非同步操作，並且在使用時 time.sleep(5) 無法正確處理它們。

4.1 牛刀小試

宏哥就按照上邊的方法實踐一下。

4.1.1 參考程式碼

# coding=utf-8🔥

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

# 2.註釋：包括記錄建立時間，建立人，專案名稱。
'''
Created on 2023-05-25
@author: 北京-宏哥   QQ交流群：705269076
公眾號：北京宏哥
Project: 《《最新出爐》系列初窺篇-Python+Playwright自動化測試-4-playwright自動等待及擴充套件
'''

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

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False, slow_mo=1000)
    page = browser.new_page()
    page.goto("https://image.baidu.com/search/down?url=https://www.baidu.com")
    print(page.title())
    # 等待5秒
    page.wait_for_timeout(5000)
    page.fill('#kw', "北京-宏哥")
    page.click('#su')
    # 等待3秒
    page.wait_for_timeout(3000)
    browser.close()
4.1.2 執行程式碼

1.執行程式碼，右鍵 Run'test'，控制檯輸出，如下圖所示：

2.程式碼的執行過程，如下圖所示：

5.小結

本文主要介紹了一些 playwright 的使用與 selenium 有一些不同，我們需要注意不同點，比如 playwright 預設是無頭模式執行以及等待的改變。下一篇文章我們將介紹 playwright 定位元素的方法。

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

5.1 自行設定等待

即使 Playwright 已經做了充分準備，但是也並不完全穩定，在實際專案中依舊容易出現因頁面載入導致事件沒有生效等問題，為了避免這些問題，需要自行設定等待。

# 固定等待1秒
page.wait_for_timeout(1000)
# 等待事件
page.wait_for_event(event)
# 等待載入狀態
page.get_by_role("button").click()
page.wait_for_load_state()

相關文章