‘Trace Viewer’ setup in Playwright-Python

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!

Share On

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on tumblr
Share on email

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Lifetime Membership Club

LIFETIME MEMBERSHIP BIG SALE - ALL LIVE COURES JUST - 7000 RS/ 99 USD
Attend All Live courses in just 7000 rs / $99 - offer ends 1st Nov 2024