python playwrigh框架入門安裝使用

Posted on by

前言

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

首先打個廣告：你每天點點點累麼？面對越來越卷的環境你彷徨麼？被要求 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框架的資料請關註WalkonNet其它相關文章！

推薦閱讀：