注：本文件所有操作均基於macOS系統。
1 專案背景
當前IT專案的測試工作主要採用介面自動化及手工操作兩種方式，其中手工測試方式耗時長、易出錯，而且介面驗證還依賴人工進行操作。基於此，我們考慮引入相應的UI自動化測試工具進行輔助測試。透過將穩定的專案功能實現UI自動化，可以提高測試迴歸驗證的效率和準確性。
藉此次工具調研的契機，我們將工具用於場地系統，以評估工具對專案帶來的測試價值和效率提升情況。
2 UI自動化工具對比
當前比較流行的UI自動化工具有Playwright和Selenium，它們都擁有豐富的功能和API，適用於測試Web應用程式。我們可以根據不同的需求和場景，選擇合適的自動化測試工具。以下是這兩個工具的對比情況：
基於上述的對比項，不難看出：
Playwright相對容易學習，對使用人員的技術要求較低。
Playwright的錄製生成指令碼功能可以顯著提高UI自動化實現的效率。
Playwright提供的功能更加全面，執行效率更高。
Playwright擁有更突出的效能優勢。
因此，在本次專案實踐中，我們選用的是更加簡單容易的Playwright。
3 Playwright+ Pytest實戰
注：本專案實踐基於場地系統進行。
3.1 前置準備
python 3.7+
python三方庫Playwright（pip install playwright）
playwright瀏覽器驅動安裝（python -m playwright install）
注：下載資源緩慢請更換pip源為國內源
3.2 專案架構
codegen_data：錄製的指令碼存放。
common：公用方法存放。
data：測試資料存放。
log：指令碼執行產生的日誌存放。
test_case：測試用例指令碼存放。
test_report：測試報告存放。
config.py：命令/路徑等配置資訊檔案。
conftest.py：setup執行的操作存放。
myRunner.py：執行main。
3.3 錄製指令碼
① PC端實操
命令列工具執行命令：
python -m playwright codegen -o 'test_login.py' --target python -b chromium https://cas-test.bgyfw.com/idp/authcenter/ActionAuthChain?entityId=BIZTEST
讓我們一起解讀一下命令的意圖：
使用當前計算機的Chromium開啟指定URL，生成的指令碼語言為python，儲存名稱為test_login.py。
以上為命令執行後進入的介面，可以發現：
當滑鼠滑過元素的時候，會自動提示元素的xpath。
啟動的是無痕瀏覽模式，可以很容易和本地瀏覽的頁面進行區分。
同時也會開啟一個Playwright Inspector的視窗，顯示生成的程式碼，以便對頁面進行實時操作。
關閉瀏覽器時，將停止錄製並輸出指令碼檔案。從這裡可以看出，指令碼檔案正是上述命令中指定的檔名。這裡使用的是同步模式，生成原始碼如下所示：
點選檢視程式碼
from playwright.sync_api import Playwright, sync_playwright, expectdef run(playwright: Playwright) -> None:
browser = playwright.chromium.launch(headless=False)
context = browser.new_context()
page = context.new_page()
page.goto("https://cas-test.bgyfw.com/idp/authcenter/ActionAuthChain?entityId=BIZTEST")
page.goto("https://open-test.bgyfw.com/gateway.html")
page.goto("https://open-test.bgyfw.com/%E6%93%8D%E4%BD%9C%E6%88%90%E5%8A%9F")
page.goto("https://cas-test.bgyfw.com/idp/authcenter/ActionAuthChain?entityId=BIZTEST")
page.get_by_role("img").first.click()
page.close() # ---------------------
context.close()
browser.close()with sync_playwright() as playwright:
run(playwright)
到這裡我們有一個疑問：Playwright是否支援主流的瀏覽器？我們如何切換到瀏覽器？
讓我們再次檢視執行的命令，發現其中有一個引數【-b】，用於指定瀏覽器。再看看說明：
-b, --browserbrowser to use, one of cr, chromium, ff, firefox, wk, webkit (default: "chromium")
從上述說明中可以看到，引數【-b】支援Google Chrome、Microsoft Edge（cr，chromium）、 WebKit核心的Apple Safari （ wk， webkit）和 Mozilla Firefox（ff，firefox）瀏覽器。
讓我們基於每一個瀏覽器都錄製生成一份程式碼：
chrome瀏覽器
firefox瀏覽器
Safari瀏覽器
我們可以發現不同的瀏覽器在操作上是相似的，生成的程式碼有一個地方有所不同，如上圖紅框所示。換個角度來說，我們只需要基於一個瀏覽器生成程式碼後，手動修改就能實現瀏覽器相容測試和程式碼的複用，極大地提升了效率。
② 移動端網頁實操
命令列工具執行命令：
python -m playwright codegen -o 'test_login.py' --target python -b chromium --device="iPhone 12 Pro" https://cas-test.bgyfw.com/idp/authcenter/ActionAuthChain?entityId=BIZTEST
對比PC端實操執行的命令，當前命令多入參了一個引數【--device】
讓我們一起解讀一下命令的意圖：
模擬iPhone 12 Pro裝置開啟指定URL，使用Chromium驅動，生成的程式碼語言設定為python，儲存名稱為test_login.py。
以上為命令執行後進入的介面，可以發現錄製的介面與iPhone 12 Pro開啟的網頁一致。這不禁讓我們產生了一個想法：專案的手機介面相容測試是不是可以透過Playwright解決？
答案是可以的！
Playwright支援的手機/平板型號共有116種，基本覆蓋了50%左右的主流裝置，具體如下圖所示：
讓我們抽幾個手機型號錄製各生成一份程式碼：
iPhone 12 Pro
Galaxy S9+
Nexus 7
我們可以發現，不同的手機在相同的操作下，生成的程式碼只有兩行不同，如上圖紅框所示。
換個角度來說，我們只需要基於一個手機型號生成程式碼後，手動修改一下就能實現手機瀏覽器相容測試和程式碼的複用，這將大大提升效率。
3.4 conftest應用
在pytest中，除了提供現成的setup和teardown方法，還提供了conftest檔案結合fixture的方法來處理測試用例的前置條件和後置條件的操作。
conftest簡介：conftest是一個固定的py檔案，修改為其他名字不會生效。
conftest作用域：作用範圍在該目錄及其下的子目錄。
conftest作用：同目錄下的測試用例檔案執行前都會執行conftest.py檔案，相當於一個前置檔案。
conftest實際應用如下圖所示：
對比生成的兩個指令碼，發現前置的步驟均一致，我們可以把一致的部分提取出來做成setup。
同時，根據conftest檔案的作用，我們把前置操作在conftest.py用方法封裝起來，如下圖所示：
封裝完成後對指令碼進行簡化處理。簡化效果如下圖所示：
從簡化效果來看，可以發現conftest.py檔案是不需要匯入的，它在執行pytest的時候會自動查詢並使用conftest.py檔案。
3.5 斷言運用
斷言當前頁面的標題是否是指定的頁面標題
expect(page).to_have_title("碧桂園服務統一認證")
expect(page).to_have_title("增值平臺")
斷言元素是否存在當前頁面
assert page.wait_for_selector('#app > section > div.layout-container > section > div > h4')
斷言當前元素的文字是否跟預期一致
content = page.text_content('#app > section > div.layout-container > section > div > h4')
assert content == "歡迎使用社群資源管理平臺～"
斷言元素的文字是否是期望值
js_content = page.locator('#app > section > div.left-menu.wujie-left-menu > div > ul > div:nth-child(3) > li > div > span').text_content()
assert js_content == "客戶管理"
斷言點選核取方塊後，核取方塊為選中狀態
page.locator("selector").first.click()
checked = page.is_checked('selector')
assert checked
斷言點選取消選擇後，核取方塊為空狀態
page.get_by_role("button", name="取消選擇").click()
checked = page.is_checked('selector')
assert checked == False
斷言按鈕原始狀態為非啟用狀態
enabled = page.is_enabled('selector')
assert enabled == False
斷言輸入內容後，按鈕狀態變為啟用狀態
page.get_by_label("新增客戶", exact=True).get_by_placeholder("請輸入客戶稅號").click()
page.get_by_label("新增客戶", exact=True).get_by_placeholder("請輸入客戶稅號").fill("test")
enabled = page.is_enabled('selector')
assert enabled
3.6 批次執行生成測試報告
生成的測試指令碼加上斷言後，需要批次執行測試指令碼並生成測試報告。
在給出的專案架構中，可以透過配置檔案來控制需要執行的測試範圍。
首先，在專案中的common/config.py中已經定義了測試用例的路徑(case_path)為專案中的test_case資料夾。具體如下圖所示：
然後，在專案根目錄config.py檔案中定義了一個名為cases_path的變數，該變數可用於指定具體的測試範圍。我們可以選擇定義一個資料夾，以便在執行的時候執行該資料夾下的所有測試指令碼；或者指定一個py檔案以進行單獨執行。具體如下圖所示：
最後，配置好測試範圍後，可以開始執行測試。在專案根目錄myRunner.py檔案中，點選執行按鈕即可批次執行測試並生成測試報告。
3.7 失敗截圖定位問題
如果用例執行失敗了，要如何進行定位？
根據報告提供的失敗截圖功能，可以在生成的報告中看到相應的截圖和報錯資訊，幫助我們快速定位問題並進行分析。
4 專案應用取得的成果
場地系統共有數千條測試用例，使用Playwright後，大部分測試用例實現了UI自動化，整體自動化率得到大幅提升。
隨著Playwright的使用，場地專案的自動化率不斷提高，測試的迴歸效率也在不斷地提升。
注：上圖為專案自動化工程指令碼樹部分截圖
5 總結
-
Playwright是一個功能強大的自動化工具，可用於測試和瀏覽器相容。它提供了豐富的功能，可以大大提高測試和自動化的效率和可靠性。
-
Playwright的錄製生成指令碼功能解決了測試人員編寫操作步驟程式碼的問題，透過精準的定位，測試人員只需要專注於如何斷言即可。相比傳統的純程式碼，它極大地提升了效率並降低了對測試人員的程式碼能力要求。
-
Playwright還解決了UI自動化指令碼維護的難題，只需重新錄製一份指令碼、編排斷言並移除舊的指令碼即可實現維護。
-
此外，Playwright還提供了許多適用於自動化的功能，只有在實踐中才能更好地發揮其作用。