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.<\/em>\u00a0<\/em><\/p>\n

\n

\n<\/ins>\n<\/div>\n
Topics that we will cover:<\/strong><\/p>\n
\n
Recording actions using Playwright-Java<\/li>\n
Viewing the trace (recorded actions)<\/li>\n
Source code<\/li>\n<\/ul>\n
Recording actions using Playwright-Java<\/strong><\/p>\n
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.<\/p>\n
We will learn how to record a Trace by utilizing playwright inspector to capture the details of a simple form.<\/p>\n
Let us execute a simple script to launch playwright inspector. Line#20 is responsible for launching the inspector<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0The inspector launches when we execute the script\u00a0<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
Enter some text in name, email and password fields<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Stop recording by clicking \u2018Record\u2019 button.<\/p>\n
Notice below that the script gets automatically recorded inside playwright inspector<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0From the inspector, copy line numbers from 12-18\u00a0<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Comment page.pause()<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
Paste it as shown below<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0For stoping trace recording, copy the below code<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0\u2018trace.zip file (mentioned in line#40) gete auto-generated after the script execution.<\/p>\n
Below, you can find the code that has been written up until now<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Execute.\u00a0<\/p>\n
Notice below that the 3 fields are populated<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Viewing the trace (recorded actions)<\/strong><\/p>\n
Refresh playwright project to view \u2018trace.zip\u2019 file\u00a0<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Go to https:\/\/trace.playwright.dev\/<\/a>\u00a0<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Click \u2018Select file\u2019, select trace.zip file and open the same<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Notice 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.<\/p>\n
Select navgate action as shown below. Also select \u2018Before\u2019. As expected a blank screen would be shown since the navigate action is not yet complete\u00a0<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Similarly, below shows the \u2018Email\u2019 field<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0The \u2018Metadata\u2019 can also be seen<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0So this is how we can make use of trace viewer in addition to the recording feature of playwright inspector.<\/p>\n
Source code<\/strong><\/p>\n
package<\/strong> com.rsa.playwrightjava;<\/p>\n
<\/p>\n
import<\/strong> java.nio.file.Paths;<\/p>\n
import<\/strong> com.microsoft.playwright.Browser;<\/p>\n
import<\/strong> com.microsoft.playwright.BrowserContext;<\/p>\n
import<\/strong> com.microsoft.playwright.BrowserType;<\/p>\n
import<\/strong> com.microsoft.playwright.Page;<\/p>\n
import<\/strong> com.microsoft.playwright.Playwright;<\/p>\n
import<\/strong> com.microsoft.playwright.Tracing;<\/p>\n
<\/p>\n
public<\/strong>
\nclass<\/strong> Blog19_RecordTrace {<\/p>\n
<\/p>\n
public<\/strong>
\nstatic<\/strong>
\nvoid<\/strong> main(String[] args) {<\/p>\n
Playwright pw = Playwright.create<\/em>();<\/p>\n
Browser browser = pw.chromium().launch(new<\/strong> BrowserType<\/p>\n
.LaunchOptions().setHeadless(false<\/strong>));<\/p>\n
<\/p>\n
BrowserContext browserContext = browser.newContext();<\/p>\n
\/\/Recording the trace<\/p>\n
browserContext.tracing().start(new<\/strong> Tracing.StartOptions()<\/p>\n
\u00a0 .setScreenshots(true<\/strong>)<\/p>\n
\u00a0 .setSnapshots(true<\/strong>));<\/p>\n
Page page = browserContext.newPage();<\/p>\n
page.navigate(“https:\/\/rahulshettyacademy.com\/angularpractice\/”);<\/p>\n
page.locator(“form input[name=”name”]”).click();<\/p>\n
\u00a0 \u00a0 \u00a0 page.locator(“form input[name=”name”]”).fill(“Rahul Shetty Academy”);<\/p>\n
\u00a0 \u00a0 \u00a0 page.locator(“input[name=”email”]”).click();<\/p>\n
\u00a0 \u00a0 \u00a0 page.locator(“input[name=”email”]”).fill(“rahulshettyacademy.com”);<\/p>\n
\u00a0 \u00a0 \u00a0 page.getByPlaceholder(“Password”).click();<\/p>\n
\u00a0 \u00a0 \u00a0 page.getByPlaceholder(“Password”).fill(“rahulshetty”);<\/p>\n
\u00a0 \u00a0 \u00a0 page.getByText(“Name Email Password Check me”).click();<\/p>\n
\/\/page.pause();<\/p>\n
\u00a0 \u00a0 \u00a0<\/p>\n
\u00a0 \u00a0 \u00a0 \/\/For closing trace<\/p>\n
\u00a0 \u00a0 \u00a0 browserContext.tracing().stop(new<\/strong> Tracing.StopOptions()<\/p>\n
\u00a0 .setPath(Paths.get<\/em>(“trace.zip”)));<\/p>\n
<\/p>\n
}<\/p>\n
}<\/p>\n
<\/p>\n
Thanks.<\/p>\n
\u00a0<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/section>\n
<\/body><\/html><\/p>\n","protected":false},"excerpt":{"rendered":"
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.\u00a0 Topics that we will cover: Recording actions using Playwright-Java Viewing the trace (recorded actions) Source code Recording actions using […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,9],"tags":[],"class_list":["post-3334","post","type-post","status-publish","format-standard","hentry","category-java","category-playwright","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=3334"}],"version-history":[{"count":0,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3334\/revisions"}],"wp:attachment":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=3334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}