Tutorial 2 – ‘Trace Viewer’ to record actions & capture screenshots in Playwright-Python
What you will Learn in this blog:
Recording a trace using PW-Python
Opening & Viewing the trace
Code snippets
Recording a Trace using Playwright-Python
Go to playwright official page
https://playwright.dev/python/docs/trace-viewer-intro
Look at the basic definition of ‘Trace Viewer’
Let us see how to record a Trace.
We will use the same script that we had created in our previous blog, see below
For recording the trace, copy the code snippet:
# Start tracing before creating / navigating a page.
context.tracing.start(screenshots=True, snapshots=True, sources=True)
Paste the snippet after browser context
Next, for stoping the trace recording, copy
# Stop tracing and export it into a zip archive.
context.tracing.stop(path = "trace.zip")
Paste it before closing the context
Save the file.
Line#17 (see above) has the reference to ‘trace.zip file, this file will get auto-generated once the script execution gets over. We will understand the purpose of this file as we go along.
The entire code looks like below
Save and execute the command in terminal
Opening & Viewing the trace
Notice that ‘trace.zip’ gets auto-generated
Right click the zip file and open it in explorer
Copy the filepath
Launch https://trace.playwright.dev/
Click ‘Select file’
Select trace.zip file and open.
Notice below that, we can see movie like traces at different points of time
We can also see the ‘Actions’ on the left hand side, Before/After screenshots
Below shows the ‘Before’ screenshot for a particular action. Notice that this screenshot does not have any data in the email field
For the same action, click ‘After’. Notice below that the screenshot shows the data populated in ‘Email’ field
Similarly, select any strip from the recording, to see the corresponding before/after snapshots.
We can also see the ‘Network’ calls for a particular action
We can also see ‘Metadata’ information
Code snippet
from playwright.sync_api import Playwright, sync_playwright, expect
def run(playwright: Playwright) -> None:
browser = playwright.chromium.launch(headless=False,slow_mo=2000)
context = browser.new_context()
# Start tracing before creating / navigating a page.
context.tracing.start(screenshots=True, snapshots=True, sources=True)
page = context.new_page()
page.goto("https://sso.teachable.com/secure/673/identity/login")
page.get_by_label("Email").click()
page.get_by_label("Email").fill("hello@dummyemail")
# Stop tracing and export it into a zip archive.
context.tracing.stop(path="trace.zip")
# ---------------------
context.close()
browser.close()
with sync_playwright() as playwright:
run(playwright)
Thank you for reading!