{"id":3334,"date":"2025-01-16T05:22:54","date_gmt":"2025-01-16T05:22:54","guid":{"rendered":"https:\/\/rahulshettyacademy.com\/blog\/?p=3334"},"modified":"2025-01-17T10:42:22","modified_gmt":"2025-01-17T10:42:22","slug":"trace-viewer-tool-and-recording-using-inspector-in-playwright-java","status":"publish","type":"post","link":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/2025\/01\/16\/trace-viewer-tool-and-recording-using-inspector-in-playwright-java\/","title":{"rendered":"\u2018Trace Viewer\u2019 tool and \u2018Recording\u2019 using Inspector in Playwright-Java"},"content":{"rendered":"<p><em>In this blog we are going to see the &#8216;Trace Viewer&#8217; 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><em>&nbsp;<\/em><\/p>\n<p><strong>Topics that we will cover:<\/strong><\/p>\n<ul>\n<li>Recording actions using Playwright-Java<\/li>\n<li>Viewing the trace (recorded actions)<\/li>\n<li>Source code<\/li>\n<\/ul>\n<p><strong>Recording actions using Playwright-Java<\/strong><\/p>\n<p>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<p>We will learn how to record a Trace by utilizing playwright inspector to capture the details of a simple form.<\/p>\n<p>Let us execute a simple script to launch playwright inspector. Line#20 is responsible for launching the inspector<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3337\" width=\"558\" data-init-width=\"1168\" height=\"309\" data-init-height=\"646\" title=\"Screenshot 2025-01-16 at 10.54.02\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.54.02\u202fAM.png\" data-width=\"558\" data-height=\"309\" style=\"aspect-ratio: auto 1168 \/ 646;\"><\/span><\/p>\n<p>&nbsp;The inspector launches when we execute the script&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3338\" width=\"518\" data-init-width=\"1168\" height=\"467\" data-init-height=\"1054\" title=\"Screenshot 2025-01-16 at 10.54.45\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.54.45\u202fAM.png\" data-width=\"518\" data-height=\"467\" style=\"aspect-ratio: auto 1168 \/ 1054;\"><\/span><\/p>\n<p>Enter some text in name, email and password fields<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3339\" width=\"508\" data-init-width=\"1168\" height=\"265\" data-init-height=\"610\" title=\"Screenshot 2025-01-16 at 10.55.30\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.55.30\u202fAM.png\" data-width=\"508\" data-height=\"265\" style=\"aspect-ratio: auto 1168 \/ 610;\"><\/span><\/p>\n<p>&nbsp;Stop recording by clicking \u2018Record\u2019 button.<\/p>\n<p>Notice below that the script gets automatically recorded inside playwright inspector<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3340\" width=\"533\" data-init-width=\"1168\" height=\"311\" data-init-height=\"682\" title=\"Screenshot 2025-01-16 at 10.56.02\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.56.02\u202fAM.png\" data-width=\"533\" data-height=\"311\" style=\"aspect-ratio: auto 1168 \/ 682;\"><\/span><\/p>\n<p>&nbsp;From the inspector, copy line numbers from 12-18&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3341\" width=\"541\" data-init-width=\"1168\" height=\"414\" data-init-height=\"894\" title=\"Screenshot 2025-01-16 at 10.56.38\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.56.38\u202fAM.png\" data-width=\"541\" data-height=\"414\" style=\"aspect-ratio: auto 1168 \/ 894;\"><\/span><\/p>\n<p>&nbsp;Comment page.pause()<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3342\" width=\"535\" data-init-width=\"1168\" height=\"304\" data-init-height=\"664\" title=\"Screenshot 2025-01-16 at 10.57.59\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.57.59\u202fAM.png\" data-width=\"535\" data-height=\"304\" style=\"aspect-ratio: auto 1168 \/ 664;\"><\/span><\/p>\n<p>Paste it as shown below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3343\" width=\"593\" data-init-width=\"1168\" height=\"265\" data-init-height=\"522\" title=\"Screenshot 2025-01-16 at 11.00.09\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-11.00.09\u202fAM.png\" data-width=\"593\" data-height=\"265\" style=\"aspect-ratio: auto 1168 \/ 522;\"><\/span><\/p>\n<p>&nbsp;For stoping trace recording, copy the below code<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3344\" width=\"589\" data-init-width=\"1168\" height=\"272\" data-init-height=\"540\" title=\"Screenshot 2025-01-16 at 11.02.09\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-11.02.09\u202fAM.png\" data-width=\"589\" data-height=\"272\" style=\"aspect-ratio: auto 1168 \/ 540;\"><\/span><\/p>\n<p>&nbsp;\u2018trace.zip file (mentioned in line#40) gete auto-generated after the script execution.<\/p>\n<p>Below, you can find the code that has been written up until now<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3345\" width=\"591\" data-init-width=\"1168\" height=\"446\" data-init-height=\"882\" title=\"Screenshot 2025-01-16 at 11.03.51\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-11.03.51\u202fAM.png\" data-width=\"591\" data-height=\"446\" style=\"aspect-ratio: auto 1168 \/ 882;\"><\/span><\/p>\n<p>&nbsp;Execute.&nbsp;<\/p>\n<p>Notice below that the 3 fields are populated<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3346\" width=\"504\" data-init-width=\"648\" height=\"593\" data-init-height=\"762\" title=\"Screenshot 2025-01-16 at 11.05.45\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-11.05.45\u202fAM.png\" data-width=\"504\" data-height=\"593\" style=\"aspect-ratio: auto 648 \/ 762;\"><\/span><\/p>\n<p>&nbsp;<strong>Viewing the trace (recorded actions)<\/strong><\/p>\n<p>Refresh playwright project to view \u2018trace.zip\u2019 file&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3347\" width=\"578\" data-init-width=\"1160\" height=\"613\" data-init-height=\"1230\" title=\"Screenshot 2025-01-16 at 11.07.02\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-11.07.02\u202fAM.png\" data-width=\"578\" data-height=\"613\" style=\"aspect-ratio: auto 1160 \/ 1230;\"><\/span><\/p>\n<p>&nbsp;Go to <a href=\"https:\/\/trace.playwright.dev\/\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">https:\/\/trace.playwright.dev\/<\/a>&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3348\" width=\"526\" data-init-width=\"1160\" height=\"172\" data-init-height=\"380\" title=\"Screenshot 2025-01-16 at 11.09.13\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-11.09.13\u202fAM.png\" data-width=\"526\" data-height=\"172\" style=\"aspect-ratio: auto 1160 \/ 380;\"><\/span><\/p>\n<p>&nbsp;Click \u2018Select file\u2019, select trace.zip file and open the same<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3349\" width=\"545\" data-init-width=\"1160\" height=\"290\" data-init-height=\"618\" title=\"Screenshot 2025-01-16 at 11.10.07\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-11.10.07\u202fAM.png\" data-width=\"545\" data-height=\"290\" style=\"aspect-ratio: auto 1160 \/ 618;\"><\/span><\/p>\n<p>&nbsp;Notice above. Movie-like traces can be observed at various moments. On the left side, we can also observe the &#8216;Actions&#8217; section along with Before\/After screenshots.<\/p>\n<p>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&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3350\" width=\"476\" data-init-width=\"1160\" height=\"698\" data-init-height=\"1700\" title=\"Screenshot 2025-01-16 at 11.10.44\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-11.10.44\u202fAM.png\" data-width=\"476\" data-height=\"698\" style=\"aspect-ratio: auto 1160 \/ 1700;\"><\/span><\/p>\n<p>&nbsp;Similarly, below shows the \u2018Email\u2019 field<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3351\" width=\"526\" data-init-width=\"1160\" height=\"617\" data-init-height=\"1360\" title=\"Screenshot 2025-01-16 at 11.11.29\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-11.11.29\u202fAM.png\" data-width=\"526\" data-height=\"617\" style=\"aspect-ratio: auto 1160 \/ 1360;\"><\/span><\/p>\n<p>&nbsp;The \u2018Metadata\u2019 can also be seen<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3352\" width=\"507\" data-init-width=\"1160\" height=\"303\" data-init-height=\"694\" title=\"Screenshot 2025-01-16 at 11.12.03\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-11.12.03\u202fAM.png\" data-width=\"507\" data-height=\"303\" style=\"aspect-ratio: auto 1160 \/ 694;\"><\/span><\/p>\n<p>&nbsp;So this is how we can make use of trace viewer in addition to the recording feature of playwright inspector.<\/p>\n<p><strong>Source code<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<\/p>\n<\/p>\n<p><strong>import<\/strong> java.nio.file.Paths;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Browser;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.BrowserContext;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.BrowserType;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Page;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Playwright;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Tracing;<\/p>\n<\/p>\n<p><strong>public<\/strong><strong>class<\/strong> Blog19_RecordTrace {<\/p>\n<\/p>\n<p><strong>public<\/strong><strong>static<\/strong><strong>void<\/strong> main(String[] args) {<\/p>\n<p>Playwright pw = Playwright.<em>create<\/em>();<\/p>\n<p>Browser browser = pw.chromium().launch(<strong>new<\/strong> BrowserType<\/p>\n<p>.LaunchOptions().setHeadless(<strong>false<\/strong>));<\/p>\n<\/p>\n<p>BrowserContext browserContext = browser.newContext();<\/p>\n<p>\/\/Recording the trace<\/p>\n<p>browserContext.tracing().start(<strong>new<\/strong> Tracing.StartOptions()<\/p>\n<p>&nbsp; .setScreenshots(<strong>true<\/strong>)<\/p>\n<p>&nbsp; .setSnapshots(<strong>true<\/strong>));<\/p>\n<p>Page page = browserContext.newPage();<\/p>\n<p>page.navigate(&#8220;https:\/\/rahulshettyacademy.com\/angularpractice\/&#8221;);<\/p>\n<p>page.locator(&#8220;form input[name=&#8221;name&#8221;]&#8221;).click();<\/p>\n<p>&nbsp; &nbsp; &nbsp; page.locator(&#8220;form input[name=&#8221;name&#8221;]&#8221;).fill(&#8220;Rahul Shetty Academy&#8221;);<\/p>\n<p>&nbsp; &nbsp; &nbsp; page.locator(&#8220;input[name=&#8221;email&#8221;]&#8221;).click();<\/p>\n<p>&nbsp; &nbsp; &nbsp; page.locator(&#8220;input[name=&#8221;email&#8221;]&#8221;).fill(&#8220;rahulshettyacademy.com&#8221;);<\/p>\n<p>&nbsp; &nbsp; &nbsp; page.getByPlaceholder(&#8220;Password&#8221;).click();<\/p>\n<p>&nbsp; &nbsp; &nbsp; page.getByPlaceholder(&#8220;Password&#8221;).fill(&#8220;rahulshetty&#8221;);<\/p>\n<p>&nbsp; &nbsp; &nbsp; page.getByText(&#8220;Name Email Password Check me&#8221;).click();<\/p>\n<p>\/\/page.pause();<\/p>\n<p>&nbsp; &nbsp; &nbsp;<\/p>\n<p>&nbsp; &nbsp; &nbsp; \/\/For closing trace<\/p>\n<p>&nbsp; &nbsp; &nbsp; browserContext.tracing().stop(<strong>new<\/strong> Tracing.StopOptions()<\/p>\n<p>&nbsp; .setPath(Paths.<em>get<\/em>(&#8220;trace.zip&#8221;)));<\/p>\n<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<\/p>\n<p>Thanks.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog we are going to see the &#8216;Trace Viewer&#8217; 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.&nbsp; Topics that we will cover: Recording actions using Playwright-Java Viewing the trace (recorded actions) Source code Recording actions using [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":750,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41],"tags":[],"class_list":["post-3334","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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":6,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3334\/revisions"}],"predecessor-version":[{"id":3723,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3334\/revisions\/3723"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/750"}],"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}]}}