第Playwright元素截圖并保存至allure的實現示例目錄引言問題分析快速截圖：代碼示例（以Playwright為例）

引言

在UI自動化測試中，我們經常需要獲取屏幕截圖，尤其是在CI環(huán)境中，一般是使用瀏覽器的無頭模式執(zhí)行測試，此時對關鍵步驟進行頁面截圖就很重要了。通常自動化框架都提供了頁面截圖功能，但是基本都是只提供了頁面整體的截圖或者對頁面元素單獨截圖，無法做到在頁面整體截圖中將我想要的元素標記出來（比如紅框標出），而這種截圖在某些預期結果的場景下需要經常用到，比如人工輔助結果判斷，或者在結果判斷不正確時標記出不正確的元素以幫助錯誤排查。因此，在項目中單獨封裝了標記元素的截圖方法。

問題分析

獲取屏幕截圖：這個很簡單，直接通過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為例）

fromioimportBytesIO

importallure

fromPILimportImage,ImageDraw

fromplaywright.sync_apiimportsync_playwright

defhighlight_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報告中

withBytesIO()asoutput:

img.save(output,format='png')

allure.attach(output.getvalue(),tips,allure.attachment_type.PNG)

deftest_screenshot():

withsync_playwright()aspw:

#打開百度進行搜索

browser=pw.chromium.launch()

page=browser.new_page()

page.goto('')#跳轉至百度頁面

page.fill('#kw','playwright選擇器')#搜索框中輸入內容

page.click('#su')#點擊搜索按鈕

#等待搜索結果加載

page.wait_for_load_state('networkidle')

#判斷當前頁面顯示10條搜索結果

results=page.query_selector_all('h3')

assertlen(results)==10

#將當前頁面的搜索結果分別進行截圖

fori,resulti