Shulou(Shulou.com)06/02 Report--

This article mainly shows you "how to achieve Playwright element screenshot and save to allure", the content is easy to understand, clear, hope to help you solve your doubts, the following let Xiaobian lead you to study and learn "how to achieve Playwright element screenshot and save to allure" this article.

Introduction

In UI automated testing, we often need to take screenshots, especially in the CI environment, where the test is usually performed using the headless mode of the browser, so it is important to take page screenshots of the key steps. Usually, automation frameworks provide page screenshots, but basically they only provide screenshots of the page as a whole or take separate screenshots of the page elements. It is impossible to mark the elements I want in the overall screenshot of the page (such as red box), and this kind of screenshot needs to be often used in some scenarios of expected results, such as manual judgment of the results. Or mark incorrect elements when the result judgment is incorrect to help with error troubleshooting. Therefore, the screenshot method of markup elements is encapsulated separately in the project.

Analysis of problems

Get a screenshot: this is simple and can be obtained directly through the page.screenshot method

Get the element location: get the boundary information of the element through ElementHandle.bounding_box

Mark the element in the screenshot: tag the element through PIL (python3 uses the pillow library) and the obtained element location

Show in the report: allure is selected as the test report framework here, and the final results can be saved to the allure report.

It should be noted that PIL.Image objects generated from screenshots and saved to allure after editing need to be transferred through io.BytesIO.

Quick screenshot:

The screenshot method can take screenshots with the following parameters:

Timeout: timeout in milliseconds, 0 is disabled timeout

Path: sets the path of the screenshot

Type: picture type, default jpg

Quality: pixels, not applicable to jpg

Omit_background: hides the default white background and allows you to take screenshots with transparency. Does not apply to jpeg images.

Full_page: if true, get a screenshot of the full scrollable page instead of the currently visible viewport. The default is `false'.

Clip: specifies the object clip= {'x clip: 10,'y clip: 10, 'width': 10,' height': 10} of the result image

Code example (take Playwright as an example) from io import BytesIOimport allurefrom PIL import Image, ImageDrawfrom playwright.sync_api import sync_playwrightdef highlight_screenshot (page, element, tips=' highlight screenshot'): # Scroll page moves the element to the field of view element.scroll_into_view_if_needed () # to get the location information of the element box = element.bounding_box () x, y, width, height = box ['x'], box ['y'] Box ['width'], box [' height'] # get page screenshots And read as PIL.Image object png = page.screenshot (type='png') img = Image.open (BytesIO (png)) # use the location information of the element to mark the element draw = ImageDraw.Draw (img) draw.rectangle ((x, y, x + width, y + height), outline='red') in the page screenshot Width=3) # Save the marked screenshot to the allure report 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: # Open Baidu to search browser = pw.chromium.launch () page = browser.new_page () page.goto ('https://www.baidu.com') # jump to Baidu page page.fill (' # kw') 'playwright selector') # enter content page.click ('# su') # Click the search button # wait for the search results to load page.wait_for_load_state ('networkidle') # determine that the current page displays 10 search results results = page.query_selector_all (' h4') assert len (results) = = 10 # take screenshots of the search results of the current page respectively for I Result in enumerate (results): highlight_screenshot (page, result, f 'search results {I}')

Above, take Baidu search as an example, take screenshots of all the search results separately, and the final report results are as follows:

The above is all the contents of the article "how to implement the screenshot of Playwright elements and save them to allure". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.