{"id":3410,"date":"2025-01-16T13:43:56","date_gmt":"2025-01-16T13:43:56","guid":{"rendered":"https:\/\/rahulshettyacademy.com\/blog\/?p=3410"},"modified":"2025-01-17T10:45:57","modified_gmt":"2025-01-17T10:45:57","slug":"take-screenshot-and-capture-video-using-playwright-java","status":"publish","type":"post","link":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/2025\/01\/16\/take-screenshot-and-capture-video-using-playwright-java\/","title":{"rendered":"Take Screenshot and capture video using Playwright Java"},"content":{"rendered":"<p><em>In this blog we are going to see how to take screenshot and capture video using Playwright Java.<\/em><em>&nbsp;<\/em><\/p>\n<p><strong>Topics that we will cover:<\/strong><\/p>\n<ul>\n<li>Take screenshot of a page&nbsp;<\/li>\n<li>Take screenshot of an element<\/li>\n<li>Capture video<\/li>\n<li>Source code (page screenshot)<\/li>\n<li>Source code (element screenshot)<\/li>\n<li>Source code (video capture)<\/li>\n<\/ul>\n<p><strong>Take screenshot of a page<\/strong><\/p>\n<p>Let us say we want to take a screenshot of a page while executing our test.&nbsp;<\/p>\n<p>The code provided below will assist us in accomplishing that goal. There is a \u201c<em>screenshot()<\/em>\u201d method that we can use and store the screenshot to a given location<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3413\" width=\"668\" data-init-width=\"1198\" height=\"249\" data-init-height=\"446\" title=\"Screenshot 2025-01-16 at 7.15.32\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-7.15.32\u202fPM.png\" data-width=\"668\" data-height=\"249\" style=\"aspect-ratio: auto 1198 \/ 446;\"><\/span><\/p>\n<p>Execute the test.&nbsp;<\/p>\n<p>Refresh the playwright project. Notice below that screenshot folder gets generated along with the png file<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3414\" width=\"497\" data-init-width=\"1198\" height=\"590\" data-init-height=\"1422\" title=\"Screenshot 2025-01-16 at 7.16.18\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-7.16.18\u202fPM.png\" data-width=\"497\" data-height=\"590\" style=\"aspect-ratio: auto 1198 \/ 1422;\"><\/span><\/p>\n<p>&nbsp;Note: The \u201c<em>ScreenshotOptions()<\/em>\u201d method is being called from te \u201cPage\u201d library<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3415\" width=\"596\" data-init-width=\"1198\" height=\"553\" data-init-height=\"1112\" title=\"Screenshot 2025-01-16 at 7.17.04\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-7.17.04\u202fPM.png\" data-width=\"596\" data-height=\"553\" style=\"aspect-ratio: auto 1198 \/ 1112;\"><\/span><\/p>\n<p>&nbsp;<strong>Take screenshot of an element<\/strong><\/p>\n<p>In the above scenario we had taken the screenshot of entire page. Let us now see how to take the screenshot of only a specific element on a page.<\/p>\n<p>So for example, go the below website<\/p>\n<p><a href=\"https:\/\/the-internet.herokuapp.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/the-internet.herokuapp.com\/<\/a>&nbsp;<\/p>\n<p>Let us say we want to take the snapshot of ony \u201cBroken Images\u201d<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3416\" width=\"558\" data-init-width=\"1198\" height=\"160\" data-init-height=\"344\" title=\"Screenshot 2025-01-16 at 7.18.23\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-7.18.23\u202fPM.png\" data-width=\"558\" data-height=\"160\" style=\"aspect-ratio: auto 1198 \/ 344;\"><\/span><\/p>\n<p>&nbsp;To achieve this, we have to simply call the <em>ScreenshotOptions()<\/em> method from \u201cLocator\u201d library instead of \u201cPage\u201d library.<\/p>\n<p>Also instead of <em>page.screenshot<\/em> we have to use <em>page.locator.screenshot<\/em> syntax as shown below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3417\" width=\"615\" data-init-width=\"1198\" height=\"163\" data-init-height=\"318\" title=\"Screenshot 2025-01-16 at 7.19.00\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-7.19.00\u202fPM.png\" data-width=\"615\" data-height=\"163\" style=\"aspect-ratio: auto 1198 \/ 318;\"><\/span><\/p>\n<p>&nbsp;Execute.<\/p>\n<p>Refresh the playwright project to see the png file.&nbsp;<\/p>\n<p>Open the png file, we can see the image of the element<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3418\" width=\"583\" data-init-width=\"1198\" height=\"120\" data-init-height=\"246\" title=\"Screenshot 2025-01-16 at 7.20.01\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-7.20.01\u202fPM.png\" data-width=\"583\" data-height=\"120\" style=\"aspect-ratio: auto 1198 \/ 246;\"><\/span><\/p>\n<p>&nbsp;<strong>Capture video<\/strong><\/p>\n<p>Let us now see how to capture a video of any desired test execution.<\/p>\n<p>We have to create an instance of \u201c<em>BrowserContext<\/em>\u201d and use <em>setRecordVideoDir()<\/em> method. The below code will serve the purpose. Make sure that you close the context (line#23) otherwise video will not get captured<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3419\" width=\"594\" data-init-width=\"1198\" height=\"235\" data-init-height=\"474\" title=\"Screenshot 2025-01-16 at 7.20.36\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-7.20.36\u202fPM.png\" data-width=\"594\" data-height=\"235\" style=\"aspect-ratio: auto 1198 \/ 474;\"><\/span><\/p>\n<p>&nbsp;Execute. Notice that video gets generated<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3420\" width=\"551\" data-init-width=\"1198\" height=\"262\" data-init-height=\"570\" title=\"Screenshot 2025-01-16 at 7.21.12\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-7.21.12\u202fPM.png\" data-width=\"551\" data-height=\"262\" style=\"aspect-ratio: auto 1198 \/ 570;\"><\/span><\/p>\n<p>&nbsp;Go to the video file properties and open the folder location<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3421\" width=\"640\" data-init-width=\"1198\" height=\"478\" data-init-height=\"894\" title=\"Screenshot 2025-01-16 at 7.21.45\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-7.21.45\u202fPM.png\" data-width=\"640\" data-height=\"478\" style=\"aspect-ratio: auto 1198 \/ 894;\"><\/span><\/p>\n<p>&nbsp;Open a new browser, press <em>Ctrl+O<\/em> and go to the folder location of video<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3422\" width=\"577\" data-init-width=\"1198\" height=\"501\" data-init-height=\"1040\" title=\"Screenshot 2025-01-16 at 7.27.56\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-7.27.56\u202fPM.png\" data-width=\"577\" data-height=\"501\" style=\"aspect-ratio: auto 1198 \/ 1040;\"><\/span><\/p>\n<p>&nbsp;Select the video file and \u201cOpen\u201d to play the video<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3423\" width=\"629\" data-init-width=\"1198\" height=\"360\" data-init-height=\"686\" title=\"Screenshot 2025-01-16 at 7.28.57\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-7.28.57\u202fPM.png\" data-width=\"629\" data-height=\"360\" style=\"aspect-ratio: auto 1198 \/ 686;\"><\/span><\/p>\n<p>&nbsp;<\/p>\n<p>So this is how we take the screenshots of page, element and capture the video.<\/p>\n<p><strong>Source code (page screenshot)<\/strong><strong>package<\/strong> com.rsa.playwrightjava;<strong>import<\/strong> java.nio.file.Paths;<strong>import<\/strong> com.microsoft.playwright.Browser;<strong>import<\/strong> com.microsoft.playwright.BrowserType;<strong>import<\/strong> com.microsoft.playwright.Page;<strong>import<\/strong> com.microsoft.playwright.Page.ScreenshotOptions;<strong>import<\/strong> com.microsoft.playwright.Playwright;<strong>public<\/strong><strong>class<\/strong> Blog23_CapturePageScreenshot {<strong>public<\/strong><strong>static<\/strong><strong>void<\/strong> main(String[] args) {Playwright pw = Playwright.<em>create<\/em>();&nbsp;Browser browser = pw.chromium().launch(<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>));Page page = browser.newPage();page.navigate(&#8220;https:\/\/courses.rahulshettyacademy.com\/courses\/&#8221;);\/\/page.screenshot(new ScreenshotOptions().setPath(Paths.get(&#8220;.\/screenshot\/samplepage1.png&#8221;)));page.screenshot(<strong>new<\/strong> Page.ScreenshotOptions().setPath(Paths.<em>get<\/em>(&#8220;.\/screenshot\/samplepage1.png&#8221;))); \/\/this also workspage.pause();page.close();browser.close();pw.close();}}<strong>Source code (element screenshot)<\/strong><strong>package<\/strong> com.rsa.playwrightjava;<strong>import<\/strong> java.nio.file.Paths;<strong>import<\/strong> com.microsoft.playwright.Browser;<strong>import<\/strong> com.microsoft.playwright.BrowserType;<strong>import<\/strong> com.microsoft.playwright.Locator;<strong>import<\/strong> com.microsoft.playwright.Page;<strong>import<\/strong> com.microsoft.playwright.Playwright;<strong>public<\/strong><strong>class<\/strong> Blog23_ElementScreenshot {<strong>public<\/strong><strong>static<\/strong><strong>void<\/strong> main(String[] args) {Playwright pw = Playwright.<em>create<\/em>();&nbsp;Browser browser = pw.chromium().launch(<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>));Page page = browser.newPage();page.navigate(&#8220;https:\/\/the-internet.herokuapp.com\/&#8221;);page.locator(&#8220;text=Broken Images&#8221;).screenshot(<strong>new<\/strong> Locator.ScreenshotOptions().setPath(Paths.<em>get<\/em>(&#8220;.\/screenshot\/element_screenshot.png&#8221;)));\/\/page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get(&#8220;.\/screenshot\/samplepage1.png&#8221;)));page.pause();page.close();browser.close();pw.close();}}<strong>Source code (video capture)<\/strong><strong>package<\/strong> com.rsa.playwrightjava;<strong>import<\/strong> java.nio.file.Paths;<strong>import<\/strong> com.microsoft.playwright.Browser;<strong>import<\/strong> com.microsoft.playwright.BrowserContext;<strong>import<\/strong> com.microsoft.playwright.BrowserType;<strong>import<\/strong> com.microsoft.playwright.Page;<strong>import<\/strong> com.microsoft.playwright.Playwright;<strong>public<\/strong><strong>class<\/strong> Blog23_VideoCapture {<strong>public<\/strong><strong>static<\/strong><strong>void<\/strong> main(String[] args) {Playwright pw = Playwright.<em>create<\/em>();&nbsp;Browser browser = pw.chromium().launch(<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>));BrowserContext context = browser.newContext(<strong>new<\/strong> Browser.NewContextOptions().setRecordVideoDir(Paths.<em>get<\/em>(&#8220;videos\/&#8221;)));Page page = context.newPage();page.navigate(&#8220;https:\/\/the-internet.herokuapp.com\/&#8221;);page.locator(&#8220;text=Broken Images&#8221;).click();page.close();context.close();pw.close();}}Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog we are going to see how to take screenshot and capture video using Playwright Java.&nbsp; Topics that we will cover: Take screenshot of a page&nbsp; Take screenshot of an element Capture video Source code (page screenshot) Source code (element screenshot) Source code (video capture) Take screenshot of a page Let us say [&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-3410","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\/3410","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=3410"}],"version-history":[{"count":6,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3410\/revisions"}],"predecessor-version":[{"id":3733,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3410\/revisions\/3733"}],"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=3410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}