前言

這是一篇羅里吧嗦的前言，可能更多的屬于個人的感慨以及吐槽。

首先打個廣告：你每天點(diǎn)點(diǎn)點(diǎn)累么？面對越來越卷的環(huán)境你彷徨么？被要求 2 天做一個系統(tǒng)全面回歸測試的你感到孤單無助么？你在加班的深夜會以淚洗面么？如果你或者你的測試朋友有上述癥狀，那么不要害怕，playwright 解救不開心，寫 UI 自動化再也不用 F12+ 復(fù)制 XPATH 然后 1 天后又在改了。

確實(shí)很久沒弄過 UI 自動化了，本身 Xpath 確實(shí)寫的也不是太好。外加之前弄過兩次 UI 自動化均因?yàn)楹笃诰S護(hù)成本降不下來放棄掉了所以最近聽到 UI 就直接擺爛了，一直在折騰接口這條路上躺平，但是機(jī)緣巧合前 2 個月我們招 WEB 開發(fā)我無意間發(fā)現(xiàn)現(xiàn)在 WEB 開發(fā)工程師居然在寫 UI 自動化。。。。。 好卷啊懷著一顆好奇的心我搜了下這個叫 playwrigh 的框架~~~ 擺弄了 2 個月感覺還是有點(diǎn)意思 而且應(yīng)該屬于微軟的 vscode 那類而不是 windows 或者 IE 這類。

優(yōu)勢

• 支持語言 python java node.js .Net（之前也試過 cypress,但這邊測試團(tuán)隊(duì)不是以 JS 為主的，放棄）
• 定位方式上限很高，更面向業(yè)務(wù)（UI 最初的麻煩就是定位不到,最終麻煩是下次定位不到）
• 自動等待方式使腳本執(zhí)行更快、更穩(wěn)定、代碼量更少（不用各種 time.sleep 或者顯示等待）
• 支持 windows linux macos 運(yùn)行瀏覽器驅(qū)動程序（Macos 可用~ 易用 linux 做 CI）
• 不需要維護(hù) driver 文件，從此告別瀏覽器一升級就得看版本然后下 driver 的痛苦。
• 除了 UI 自動化之外也可以做接口自動化測試，甚至可以基于 UI 頁面發(fā)送接口請求（繼承權(quán)限），如果先保證了接口沒問題用這個做前置和斷言也是不錯的。
• 已經(jīng)有 pytest 插件，輪子較多，支持截屏、錄制用例執(zhí)行等。
• 根據(jù)介紹有 Vue 和 React 選擇器，不過仍在測試階段，萬一測試成功了估計(jì)還是有點(diǎn)東西。
• 自身支持同步和異步操作。 10、 支持持久上下文，縮短執(zhí)行時間，也可把 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('確認(rèn)')").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 

首先最大的區(qū)別就是原來真的可以不用 Xpath 完成 UI 自動化的編寫 哈哈哈 真的對一長串又難維護(hù)又讀不懂的 xpath 深惡痛絕啊。直接肉眼可見的 text 定位簡直太開心。

其次其實(shí)最終讓我決定用這個框架的主要就是一個功能，頁面布局定位 比如我們先看對比下圖和這句代碼看一下 page.locator("input:right-of(:text('XXXX'))").fill('模板 123')

經(jīng)過我產(chǎn)品經(jīng)理級別精心的繪畫不難看出，這是一個管理系統(tǒng)很常見的 dialog 彈窗，它存在若干個輸入框以及一個下拉框以及確認(rèn)、取消按鈕。

我們做 UI 自動化的時候很常見的操作就是要去 XXXX 右邊的輸入框中輸入內(nèi)容，或者在 ZZZZ 這個下拉框中選擇。如果是 selenium 那么還是有點(diǎn)啰嗦，但是 playwright 自身有的布局定位器（根據(jù)某個元素定位/操作他上下左右的元素）這個事情就很簡單了。 page.locator("input:right-of(:text('XXXX'))").fill('模板 123') 對文本 XXXX 右側(cè)的輸入框輸入模板 123。搞定！從此不管是這個 XXXX 的順序調(diào)整了還是什么

別的變了只要

1、XXXX 這個文本沒有變化

2、input 輸入框在 XXXX 的右邊

這句代碼就無須維護(hù)。

再次 隨著現(xiàn)在功能要求的變化，元素也都在變 比如現(xiàn)在很少能看到簡單純粹的 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 類型的文件上傳控件。

也啰嗦了這么多，有興趣的同學(xué)可以繼續(xù)~~ 看到這還是覺得 就這？ 的同學(xué)也可以 X 了~

參考資料

官網(wǎng)： https://playwright.dev/python/docs/intro

GITHUB：https://github.com/microsoft/playwright-python

安裝入門篇

因?yàn)槲易钍煜さ恼Z言是 python，所以就只講 python 的了

安裝

#升級pip
pip install --upgrade pip
#安裝playwright模塊
pip install playwright
#安裝主流瀏覽器依賴,時間可能較久
playwright install

同步 demo

from playwright.sync_api import sync_playwright
with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("http://playwright.dev")
    print(page.title())
    browser.close()

異步 demo

import asyncio
from playwright.async_api import async_playwright
async 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())

好了，完結(jié) 撒花本篇完結(jié)，下篇開始具體細(xì)節(jié)開始展開說說如果等不及的小伙伴建議直接看官網(wǎng)吧，這個框架的資料確實(shí)少。雖然官網(wǎng)只有英文，但是網(wǎng)易有道詞典 yyds，更多關(guān)于python playwrigh框架的資料請關(guān)注腳本之家其它相關(guān)文章！