前言

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

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

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

優(yōu)勢(shì)

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

舉個(gè)栗子

就直接把自己 pytest 的一個(gè)新增的 case 脫敏后拿出來(lái)看下吧

def test_add(page): 
    try: 
        page.goto("https://xxxxxxx:1111/index") 
        page.locator("'一級(jí)菜單'").click() 
        page.locator("'二級(jí)菜單'").click() 
        page.locator("'三級(jí)菜單'").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('時(shí)間'))",'01:21:56') 
        page.press("input:right-of(:text('時(shí)間'))",'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ū)別就是原來(lái)真的可以不用 Xpath 完成 UI 自動(dòng)化的編寫(xiě) 哈哈哈 真的對(duì)一長(zhǎng)串又難維護(hù)又讀不懂的 xpath 深?lèi)和唇^啊。直接肉眼可見(jiàn)的 text 定位簡(jiǎn)直太開(kāi)心。

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

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

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

別的變了只要

1、XXXX 這個(gè)文本沒(méi)有變化

2、input 輸入框在 XXXX 的右邊

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

再次 隨著現(xiàn)在功能要求的變化，元素也都在變 比如現(xiàn)在很少能看到簡(jiǎn)單純粹的 select 和 upload 了，新框架這部分支持會(huì)更好比如代碼段里的文件上傳部分代碼

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") 

簡(jiǎn)單的搞定了 el-upload 類(lèi)型的文件上傳控件。

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

參考資料

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

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

安裝入門(mén)篇

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

安裝

#升級(jí)pip
pip install --upgrade pip
#安裝playwright模塊
pip install playwright
#安裝主流瀏覽器依賴(lài),時(shí)間可能較久
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é)，下篇開(kāi)始具體細(xì)節(jié)開(kāi)始展開(kāi)說(shuō)說(shuō)如果等不及的小伙伴建議直接看官網(wǎng)吧，這個(gè)框架的資料確實(shí)少。雖然官網(wǎng)只有英文，但是網(wǎng)易有道詞典 yyds，更多關(guān)于python playwrigh框架的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論