In this blog we are going to see the 'Trace Viewer' feature in Playwright-Java. Using this tool users we can capture before/after screenshots. We will also see the usage of playwright inspector to effectively record actions. 

Topics that we will cover:

• Recording actions using Playwright-Java
• Viewing the trace (recorded actions)
• Source code

Recording actions using Playwright-Java

Trace Viewer is a graphical user interface (GUI) tool that allows user to analyze recorded Playwright traces of their tests. Using this tool, we can navigate through each action of our test, both backward and forward, and gain a visual understanding of the events that occurred during each action.

We will learn how to record a Trace by utilizing playwright inspector to capture the details of a simple form.

Let us execute a simple script to launch playwright inspector. Line#20 is responsible for launching the inspector

 The inspector launches when we execute the script 

Enter some text in name, email and password fields

 Stop recording by clicking ‘Record’ button.

Notice below that the script gets automatically recorded inside playwright inspector

 From the inspector, copy line numbers from 12-18 

 Comment page.pause()

Paste it as shown below

 For stoping trace recording, copy the below code

 ‘trace.zip file (mentioned in line#40) gete auto-generated after the script execution.

Below, you can find the code that has been written up until now

 Execute. 

Notice below that the 3 fields are populated

 Viewing the trace (recorded actions)

Refresh playwright project to view ‘trace.zip’ file 

 Go to https://trace.playwright.dev/ 

 Click ‘Select file’, select trace.zip file and open the same

 Notice above. Movie-like traces can be observed at various moments. On the left side, we can also observe the 'Actions' section along with Before/After screenshots.

Select navgate action as shown below. Also select ‘Before’. As expected a blank screen would be shown since the navigate action is not yet complete 

 Similarly, below shows the ‘Email’ field

 The ‘Metadata’ can also be seen

 So this is how we can make use of trace viewer in addition to the recording feature of playwright inspector.

Source code

package com.rsa.playwrightjava;

import java.nio.file.Paths;

import com.microsoft.playwright.Browser;

import com.microsoft.playwright.BrowserContext;

import com.microsoft.playwright.BrowserType;

import com.microsoft.playwright.Page;

import com.microsoft.playwright.Playwright;

import com.microsoft.playwright.Tracing;

public class Blog19_RecordTrace {

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://rahulshettyacademy.com/angularpractice/");

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

      page.locator("form input[name=\"name\"]").fill("Rahul Shetty Academy");

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

      page.locator("input[name=\"email\"]").fill("rahulshettyacademy.com");

      page.getByPlaceholder("Password").click();

      page.getByPlaceholder("Password").fill("rahulshetty");

      page.getByText("Name Email Password Check me").click();

//page.pause();

      //For closing trace

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

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

}

}

Thanks.