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!
