Playwright元素截圖並保存至allure的實現示例
引言
在UI自動化測試中,我們經常需要獲取屏幕截圖,尤其是在CI環境中,一般是使用瀏覽器的無頭模式執行測試,此時對關鍵步驟進行頁面截圖就很重要瞭。通常自動化框架都提供瞭頁面截圖功能,但是基本都是隻提供瞭頁面整體的截圖或者對頁面元素單獨截圖,無法做到在頁面整體截圖中將我想要的元素標記出來(比如紅框標出),而這種截圖在某些預期結果的場景下需要經常用到,比如人工輔助結果判斷,或者在結果判斷不正確時標記出不正確的元素以幫助錯誤排查。因此,在項目中單獨封裝瞭標記元素的截圖方法。
問題分析
- 獲取屏幕截圖:這個很簡單,直接通過
page.screenshot
方法就可以獲得 - 獲取元素位置:通過
ElementHandle.bounding_box
獲得元素的邊界信息 - 在截圖中標記出元素:通過PIL(python3使用pillow庫)和獲取到的元素位置將元素標記出來
- 在報告中展示:這裡選用的是allure作為測試報告框架,將最終結果保存至allure報告即可
需要註意的是,由截圖生成 PIL.Image
對象,和編輯之後保存至allure,都需要通過 io.BytesIO
進行中轉
快速截圖:
screenshot方法可以進行截圖,參數如下:
timeout:以毫秒為單位的超時時間,0為禁用超時
path:設置截圖的路徑
type:圖片類型,默認jpg
quality:像素,不適用於jpg
omit_background: 隱藏默認白色背景,並允許捕獲具有透明度的屏幕截圖。不適用於“jpeg”圖像。
full_page:如果為true,則獲取完整可滾動頁面的屏幕截圖,而不是當前可見的視口。默認為`假`。
clip:指定結果圖像剪裁的對象clip={‘x’: 10 , ‘y’: 10, ‘width’: 10, ‘height’: 10}
代碼示例(以Playwright為例)
from io import BytesIO import allure from PIL import Image, ImageDraw from playwright.sync_api import sync_playwright def highlight_screenshot(page, element, tips='高亮截圖'): # 滾動頁面將元素移動到視野中 element.scroll_into_view_if_needed() # 獲取元素的位置信息 box = element.bounding_box() x, y, width, height = box['x'], box['y'], box['width'], box['height'] # 獲取頁面截圖,並讀取為PIL.Image對象 png = page.screenshot(type='png') img = Image.open(BytesIO(png)) # 利用元素的位置信息在頁面截圖中標記出元素 draw = ImageDraw.Draw(img) draw.rectangle((x, y, x + width, y + height), outline='red', width=3) # 將標記後的截圖保存至allure報告中 with BytesIO() as output: img.save(output, format='png') allure.attach(output.getvalue(), tips, allure.attachment_type.PNG) def test_screenshot(): with sync_playwright() as pw: # 打開百度進行搜索 browser = pw.chromium.launch() page = browser.new_page() page.goto('https://www.baidu.com') # 跳轉至百度頁面 page.fill('#kw', 'playwright 選擇器') # 搜索框中輸入內容 page.click('#su') # 點擊搜索按鈕 # 等待搜索結果加載 page.wait_for_load_state('networkidle') # 判斷當前頁面顯示10條搜索結果 results = page.query_selector_all('h3') assert len(results) == 10 # 將當前頁面的搜索結果分別進行截圖 for i, result in enumerate(results): highlight_screenshot(page, result, f'搜索結果{i}')
上面以百度搜索為例,將所有搜索結果分別進行截圖,最終報告效果如下:
到此這篇關於Playwright元素截圖並保存至allure的實現示例的文章就介紹到這瞭,更多相關Playwright元素截圖內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- python+playwright微軟自動化工具的使用
- python palywright庫基本使用
- 微軟開源最強Python自動化神器Playwright(不用寫一行代碼)
- 詳解Python初學者神器Playwright如何使用
- Playwright快速上手指南(入門教程)