Screenshot and Video in Playwright Python

Sometimes there will be situations where you must take a screenshot of the web page. This will help in debugging the test case if the test case fails. in this lesson, we will learn how to take screenshots but in the future, we will learn how to implement a hook in pytest, which will be triggered when a test case is passed or failed

Screenshot

When we take a normal screenshot, it will capture only the viewport, that is whatever you see on the screen. You can capture the screenshot using page.screenshot() function

from playwright.sync_api import sync_playwright

playwright = sync_playwright().start()
browser = playwright.chromium.launch(headless=False)
page = browser.new_page()
page.goto("https://google.com")

page.screenshot(path="./screencapture.png")

Full Page screenshot:

You can also take full-page screenshot using page.screenshot() and supplying full_page=True as one of the parameters along with the path of the screenshot.

page.goto("https://playwright.dev/python/")

page.screenshot(path="./full_screencapture.png", full_page=True)

Element Screenshot:

You can capture screenshots of the element, You need to use the screenshot() function from the element rather than page. page.locator('somelocator').screenshot(path='ele.png')

page.goto("https://google.com")

page.locator("[name='q']").screenshot(path="./searchbar.png")
# captures screenshot of search bar

Video recording

Recording the video of the execution helps in debugging faster compared with screenshots because screenshots will provide only the current state of the webpage. But the video will provide you with the past state of the web page that resulted in the current state.

To record a video the page must be open using the context and the context should be closed to save the recording.

By default, Playwright will save the video with a unique name, but you can change it using save_as() function.

from playwright.sync_api import sync_playwright

playwright = sync_playwright().start()
browser = playwright.chromium.launch(headless=False)
context = browser.new_context(record_video_dir="./videos")
page = context.new_page()
page.goto("https://google.com")
page.locator("[name='q']").fill("testercoder")

context.close()
print("Path before modifying:", page.video.path())
page.video.save_as("./videos/abc.mp4")
print("Path after modifying:", page.video.path())

Notice there is no difference between before and after saving the recorded video

Path before modifying: videos/016d3ce744029fc73cfc4b6a41a50d25.webm
Path after modifying: videos/016d3ce744029fc73cfc4b6a41a50d25.webm

page.video.delete() function tries to delete the old path only, not the one you saved, if you want to delete the one you save then delete it using the os methods from Python.