目錄
前言
這是一篇羅里吧嗦得前言，可能更多得屬于個人得感慨以及吐槽。
首先打個廣告：你每天點點點累么？面對越來越卷得環境你彷徨么？被要求 2 天做一個系統全面回歸測試得你感到孤單無助么？你在加班得深夜會以淚洗面么？如果你或者你得測試朋友有上述癥狀，那么不要害怕，playwright 解救不開心，寫 UI 自動化再也不用 F12+ 復制 XPATH 然后 1 天后又在改了。
確實很久沒弄過 UI 自動化了，本身 Xpath 確實寫得也不是太好。外加之前弄過兩次 UI 自動化均因為后期維護成本降不下來放棄掉了所以最近聽到 UI 就直接擺爛了，一直在折騰接口這條路上躺平，但是機緣巧合前 2 個月我們招 WEB 開發我無意間發現現在 WEB 開發工程師居然在寫 UI 自動化。。。。。 好卷啊懷著一顆好奇得心我搜了下這個叫 playwrigh 得框架~~~ 擺弄了 2 個月感覺還是有點意思 而且應該屬于微軟得 vscode 那類而不是 windows 或者 IE 這類。
優勢
- 支持語言 python java node.js .Net（之前也試過 cypress,但這邊測試團隊不是以 JS 為主得，放棄）
- 定位方式上限很高，更面向業務（UI 最初得麻煩就是定位不到,最終麻煩是下次定位不到）
- 自動等待方式使執行更快、更穩定、代碼量更少（不用各種 time.sleep 或者顯示等待）
- 支持 windows linux macos 運行瀏覽器驅動程序（Macos 可用~ 易用 linux 做 CI）
- 不需要維護 driver 文件，從此告別瀏覽器一升級就得看版本然后下 driver 得痛苦。
- 除了 UI 自動化之外也可以做接口自動化測試，甚至可以基于 UI 頁面發送接口請求（繼承權限），如果先保證了接口沒問題用這個做前置和斷言也是不錯得。
- 已經有 pytest 插件，輪子較多，支持截屏、錄制用例執行等。
- 根據介紹有 Vue 和 React 選擇器，不過仍在測試階段，萬一測試成功了估計還是有點東西。
- 自身支持同步和異步操作。 10、 支持持久上下文，縮短執行時間，也可把 cookie 或者 localstorge 保存本地，啟動時讀取使用。
舉個栗子
就直接把自己 pytest 得一個新增得 case 脫敏后拿出來看下吧
def test_add(page): try: page.goto("https://xxxxxxx:1111/index") page.locator("'一級菜單'").click() page.locator("'二級菜單'").click() page.locator("'三級菜單'").click() page.wait_for_timeout(5000) page.locator("button:has-text('新增')").click() page.locator("textarea:right-of(:text('XXXX'))").fill('模板123') with page.expect_file_chooser() as fc_info: page.locator("text=click to upload").click() file_chooser = fc_info.value file_chooser.set_files("upload/upload1.xls") page.fill("input:right-of(:text('日期'))",'2004-09-26') page.locator("'日期'").click() page.fill("input:right-of(:text('時間'))",'01:21:56') page.press("input:right-of(:text('時間'))",'Enter') page.locator("button:has-text('確認')").click() page.wait_for_load_state('networkidle') assert assert_api('add') == True page.screenshot(path='temp_data\screenshot\res.png', full_page=True) allure.attach.file('temp_data\screenshot\res.png', 'temp_data\screenshot\res.png', attachment_type=allure.attachment_type.PNG) except: page.screenshot(path='temp_data\screenshot\res_fail.png', full_page=True) allure.attach.file('temp_data\screenshot\res_fail.png', 'temp_data\screenshot\res_fail.png', attachment_type=allure.attachment_type.PNG) raise 首先最大得區別就是原來真得可以不用 Xpath 完成 UI 自動化得編寫 哈哈哈 真得對一長串又難維護又讀不懂得 xpath 深惡痛絕啊。直接肉眼可見得 text 定位簡直太開心。
其次其實最終讓我決定用這個框架得主要就是一個功能，頁面布局定位 比如我們先看對比下圖和這句代碼看一下 page.locator("input:right-of(:text('XXXX'))").fill('模板 123')
經過我產品經理級別精心得繪畫不難看出，這是一個管理系統很常見得 dialog 彈窗，它存在若干個輸入框以及一個下拉框以及確認、取消按鈕。
我們做 UI 自動化得時候很常見得操作就是要去 XXXX 右邊得輸入框中輸入內容，或者在 ZZZZ 這個下拉框中選擇。如果是 selenium 那么還是有點啰嗦，但是 playwright 自身有得布局定位器（根據某個元素定位/操作他上下左右得元素）這個事情就很簡單了。 page.locator("input:right-of(:text('XXXX'))").fill('模板 123') 對文本 XXXX 右側得輸入框輸入模板 123。搞定！從此不管是這個 XXXX 得順序調整了還是什么
別得變了只要
1、XXXX 這個文本沒有變化
2、input 輸入框在 XXXX 得右邊
這句代碼就無須維護。
再次 隨著現在功能要求得變化，元素也都在變 比如現在很少能看到簡單純粹得 select 和 upload 了，新框架這部分支持會更好比如代碼段里得文件上傳部分代碼
with page.expect_file_chooser() as fc_info: page.locator("text=click to upload").click() file_chooser = fc_info.value file_chooser.set_files("upload/upload1.xls") 簡單得搞定了 el-upload 類型得文件上傳控件。
也啰嗦了這么多，有興趣得同學可以繼續~~ 看到這還是覺得 就這？ 得同學也可以 X 了~
參考資料
官網： https://playwright.dev/python/docs/intro
GITHUB：https://github.com/microsoft/playwright-python
安裝入門篇
因為我最熟悉得語言是 python，所以就只講 python 得了
安裝
#升級pippip install --upgrade pip#安裝playwright模塊pip install playwright#安裝主流瀏覽器依賴,時間可能較久playwright install
同步 demo
from playwright.sync_api import sync_playwrightwith sync_playwright() as p: browser = p.chromium.launch() page = browser.new_page() page.goto("http://playwright.dev") print(page.title()) browser.close()異步 demo
import asynciofrom playwright.async_api import async_playwrightasync def main(): async with async_playwright() as p: browser = await p.chromium.launch() page = await browser.new_page() await page.goto("http://playwright.dev") print(await page.title()) await browser.close()asyncio.run(main())好了，完結 撒花本篇完結，下篇開始具體細節開始展開說說如果等不及得小伙伴建議直接看官網吧，這個框架得資料確實少。雖然官網只有英文，但是網易有道詞典 yyds，更多關于python playwrigh框架得資料請關注之家其它相關內容！