如何實(shí)現(xiàn)Playwright元素截圖并保存至allure

這篇文章主要為大家展示了“如何實(shí)現(xiàn)Playwright元素截圖并保存至allure”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何實(shí)現(xiàn)Playwright元素截圖并保存至allure”這篇文章吧。

引言

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

問題分析

• 獲取屏幕截圖：這個(gè)很簡單，直接通過 page.screenshot 方法就可以獲得

• 獲取元素位置：通過 ElementHandle.bounding_box 獲得元素的邊界信息

• 在截圖中標(biāo)記出元素：通過PIL（python3使用pillow庫）和獲取到的元素位置將元素標(biāo)記出來

• 在報(bào)告中展示：這里選用的是allure作為測試報(bào)告框架，將最終結(jié)果保存至allure報(bào)告即可

需要注意的是，由截圖生成 PIL.Image 對象，和編輯之后保存至allure，都需要通過 io.BytesIO 進(jìn)行中轉(zhuǎn)

快速截圖：

screenshot方法可以進(jìn)行截圖，參數(shù)如下:

timeout:以毫秒為單位的超時(shí)時(shí)間，0為禁用超時(shí)

path:設(shè)置截圖的路徑

type：圖片類型，默認(rèn)jpg

quality：像素，不適用于jpg

omit_background: 隱藏默認(rèn)白色背景，并允許捕獲具有透明度的屏幕截圖。不適用于“jpeg”圖像。

full_page：如果為true，則獲取完整可滾動頁面的屏幕截圖，而不是當(dāng)前可見的視口。默認(rèn)為`假`。

clip：指定結(jié)果圖像剪裁的對象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))

    # 利用元素的位置信息在頁面截圖中標(biāo)記出元素
    draw = ImageDraw.Draw(img)
    draw.rectangle((x, y, x + width, y + height), outline='red', width=3)

    # 將標(biāo)記后的截圖保存至allure報(bào)告中
    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:
        # 打開百度進(jìn)行搜索
        browser = pw.chromium.launch()
        page = browser.new_page()
        page.goto('https://www.baidu.com')  # 跳轉(zhuǎn)至百度頁面
        page.fill('#kw', 'playwright 選擇器')  # 搜索框中輸入內(nèi)容
        page.click('#su')  # 點(diǎn)擊搜索按鈕

        # 等待搜索結(jié)果加載
        page.wait_for_load_state('networkidle')

        # 判斷當(dāng)前頁面顯示10條搜索結(jié)果
        results = page.query_selector_all('h4')
        assert len(results) == 10

        # 將當(dāng)前頁面的搜索結(jié)果分別進(jìn)行截圖
        for i, result in enumerate(results):
            highlight_screenshot(page, result, f'搜索結(jié)果{i}')

上面以百度搜索為例，將所有搜索結(jié)果分別進(jìn)行截圖，最終報(bào)告效果如下：

以上是“如何實(shí)現(xiàn)Playwright元素截圖并保存至allure”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！