python playwrigh框架入門安裝使用

2022-07-23 18:01:19

前言

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

首先打個廣告：你每天點點點累麼？面對越來越卷的環境你彷徨麼？被要求 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 的了

安裝

#升級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())

好了，完結撒花本篇完結，下篇開始具體細節開始展開說說如果等不及的小夥伴建議直接看官網咖，這個框架的資料確實少。雖然官網只有英文，但是網易有道詞典 yyds，更多關於python playwrigh框架的資料請關注it145.com其它相關文章！

python playwrigh框架入門安裝使用

目錄

前言

優勢

舉個栗子

安裝入門篇

安裝

熱門文章