‘Trace Viewer’ to record actions & capture screenshots in Playwright-Java

Tutorial 8​​ ​​ ‘Trace Viewer’​​ to record actions​​ &​​ capture screenshots​​ in​​ Playwright-Java​​ 

What you will Learn​​ in this​​ blog:

  • Recording a trace​​ using PW-Java

  • Opening & Viewing the trace

  • Code snippets

Recording​​ a​​ Trace​​ using​​ Playwright-Java

Launch​​ https://playwright.dev/java/docs/trace-viewer-intro​​ 

Look at the basic definition​​ of ‘Trace Viewer’

Let​​ us see how​​ to record a​​ Trace​​ by recording​​ a simple registration form using playwright inspector.

Let us write a simple script to launch the url alongwith inspector

https://www.way2automation.com/angularjs-protractor/registeration/#/login​​ 

Write the below code and execute

Inspector opens

Start recording by clicking ‘Record’

Enter username, password​​ and​​ username* fields

Click ‘Login’

Stop recording, the script gets recorded

Copy the code snippet​​ from inspector​​ 

Paste​​ it in eclipse

Comment debug line (line#44 seen above).

Close playwright inspector.

For recording the trace, copy the​​ code snippet​​ 

Paste the snippet after BrowserContext

Next,​​ for stoping the trace recording, copy

Paste it at the end​​ of script

Line#53 (see above) has the reference to ‘trace.zip file, this file will get auto-generated once the script execution gets over.​​ You will understand the purpose of this file as we go along.

The entire code looks like below

Save and execute

Opening & Viewing the trace

Refresh the project. Notice that ‘trace.zip’ gets auto-generated​​ 

Right click the zip file and copy it’s 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 and so on.

Below shows the ‘Before’ screenshot for a particular action. Notice that this screenshot does not have any data in any of the fields​​ 

Selct any action and click ‘After’. Notice below that the screenshot shows the data populated in ‘Username’ 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

Refer​​ the below official page to know more about the traces

https://playwright.dev/java/docs/trace-viewer​​ 

Code snippet

package​​ com.w2a.pwjava;

 

import​​ java.nio.file.Paths;

import​​ java.util.List;

import​​ com.microsoft.playwright.Browser;

import​​ com.microsoft.playwright.BrowserContext;

import​​ com.microsoft.playwright.BrowserType;

import​​ com.microsoft.playwright.Locator;

import​​ com.microsoft.playwright.Page;

import​​ com.microsoft.playwright.Playwright;

import​​ com.microsoft.playwright.Tracing;

import​​ static​​ com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;

 

public​​ class​​ TracingPW {

 

public​​ static​​ void​​ main(String[]​​ args) {

 Playwright​​ pw​​ = Playwright.create();

 Browser​​ browser​​ =​​ pw.chromium().launch(new​​ BrowserType.LaunchOptions().setHeadless(false));

 

 BrowserContext​​ browserContext​​ =​​ browser.newContext();

//Recording the trace

browserContext.tracing().start(new​​ Tracing.StartOptions()

  ​​​​ .setScreenshots(true)

  ​​​​ .setSnapshots(true));

 Page​​ page​​ =​​ browserContext.newPage();

page.navigate("https://www.way2automation.com/angularjs-protractor/registeration/#/login");

  ​​ ​​ ​​ ​​ ​​​​ // Click input[name="username"]

  ​​ ​​ ​​ ​​ ​​​​ page.locator("input[name=\"username\"]").click();

  ​​ ​​ ​​ ​​ ​​​​ // Fill input[name="username"]

  ​​ ​​ ​​ ​​ ​​​​ page.locator("input[name=\"username\"]").fill("angular");

  ​​ ​​ ​​ ​​ ​​​​ // Click input[name="password"]

  ​​ ​​ ​​ ​​ ​​​​ page.locator("input[name=\"password\"]").click();

  ​​ ​​ ​​ ​​ ​​​​ // Fill input[name="password"]

  ​​ ​​ ​​ ​​ ​​​​ page.locator("input[name=\"password\"]").fill("password");

  ​​ ​​ ​​ ​​ ​​​​ // Click input[name="formly_1_input_username_0"]

  ​​ ​​ ​​ ​​ ​​​​ page.locator("input[name=\"formly_1_input_username_0\"]").click();

  ​​ ​​ ​​ ​​ ​​​​ // Fill input[name="formly_1_input_username_0"]

  ​​ ​​ ​​ ​​ ​​​​ page.locator("input[name=\"formly_1_input_username_0\"]").fill("password");

  ​​ ​​ ​​ ​​ ​​​​ // Click text=Login

  ​​ ​​ ​​ ​​ ​​​​ page.locator("text=Login").click();

  ​​ ​​ ​​ ​​ ​​​​ assertThat(page).hasURL("https://www.way2automation.com/angularjs-protractor/registeration/#/");

//page.pause();

  ​​ ​​ ​​ ​​ ​​​​ 

  ​​ ​​ ​​ ​​ ​​​​ //Closing the trace

  ​​ ​​ ​​ ​​ ​​​​ browserContext.tracing().stop(new​​ Tracing.StopOptions()

  ​​​​ .setPath(Paths.get("trace.zip")));

 

 }

}

 

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