In this blog we are going to see how to take screenshot and capture video using Playwright Java.<\/em>\u00a0<\/em><\/p>\n

\n

\n<\/ins>\n<\/div>\n
Topics that we will cover:<\/strong><\/p>\n
\n
Take screenshot of a page\u00a0<\/li>\n
Take screenshot of an element<\/li>\n
Capture video<\/li>\n
Source code (page screenshot)<\/li>\n
Source code (element screenshot)<\/li>\n
Source code (video capture)<\/li>\n<\/ul>\n
Take screenshot of a page<\/strong><\/p>\n
Let us say we want to take a screenshot of a page while executing our test.\u00a0<\/p>\n
The code provided below will assist us in accomplishing that goal. There is a \u201cscreenshot()<\/em>\u201d method that we can use and store the screenshot to a given location<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
Execute the test.\u00a0<\/p>\n
Refresh the playwright project. Notice below that screenshot folder gets generated along with the png file<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Note: The \u201cScreenshotOptions()<\/em>\u201d method is being called from te \u201cPage\u201d library<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Take screenshot of an element<\/strong><\/p>\n
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
So for example, go the below website<\/p>\n
https:\/\/the-internet.herokuapp.com\/<\/a>\u00a0<\/p>\n
Let us say we want to take the snapshot of ony \u201cBroken Images\u201d<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0To achieve this, we have to simply call the ScreenshotOptions()<\/em> method from \u201cLocator\u201d library instead of \u201cPage\u201d library.<\/p>\n
Also instead of page.screenshot<\/em> we have to use page.locator.screenshot<\/em> syntax as shown below<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Execute.<\/p>\n
Refresh the playwright project to see the png file.\u00a0<\/p>\n
Open the png file, we can see the image of the element<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Capture video<\/strong><\/p>\n
Let us now see how to capture a video of any desired test execution.<\/p>\n
We have to create an instance of \u201cBrowserContext<\/em>\u201d and use 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<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Execute. Notice that video gets generated<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Go to the video file properties and open the folder location<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Open a new browser, press Ctrl+O<\/em> and go to the folder location of video<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Select the video file and \u201cOpen\u201d to play the video<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0<\/p>\n
So this is how we take the screenshots of page, element and capture the video.<\/p>\n
Source code (page screenshot)<\/strong><\/div>\n
package<\/strong> com.rsa.playwrightjava;<\/div>\n
<\/div>\n
import<\/strong> java.nio.file.Paths;<\/div>\n
import<\/strong> com.microsoft.playwright.Browser;<\/div>\n
import<\/strong> com.microsoft.playwright.BrowserType;<\/div>\n
import<\/strong> com.microsoft.playwright.Page;<\/div>\n
import<\/strong> com.microsoft.playwright.Page.ScreenshotOptions;<\/div>\n
import<\/strong> com.microsoft.playwright.Playwright;<\/div>\n
<\/div>\n
public<\/strong>
\nclass<\/strong> Blog23_CapturePageScreenshot {<\/div>\n
public<\/strong>
\nstatic<\/strong>
\nvoid<\/strong> main(String[] args) {<\/div>\n
Playwright pw = Playwright.create<\/em>();\u00a0<\/div>\n
Browser browser = pw.chromium().launch(new<\/strong> BrowserType.LaunchOptions().setHeadless(false<\/strong>));<\/div>\n
Page page = browser.newPage();<\/div>\n
page.navigate(“https:\/\/courses.rahulshettyacademy.com\/courses\/”);<\/div>\n
\/\/page.screenshot(new ScreenshotOptions().setPath(Paths.get(“.\/screenshot\/samplepage1.png”)));<\/div>\n
page.screenshot(new<\/strong> Page.ScreenshotOptions().setPath(Paths.get<\/em>(“.\/screenshot\/samplepage1.png”))); \/\/this also works<\/div>\n
page.pause();<\/div>\n
page.close();<\/div>\n
browser.close();<\/div>\n
pw.close();<\/div>\n
}<\/div>\n
}<\/div>\n
<\/div>\n
Source code (element screenshot)<\/strong><\/div>\n
package<\/strong> com.rsa.playwrightjava;<\/div>\n
<\/div>\n
import<\/strong> java.nio.file.Paths;<\/div>\n
import<\/strong> com.microsoft.playwright.Browser;<\/div>\n
import<\/strong> com.microsoft.playwright.BrowserType;<\/div>\n
import<\/strong> com.microsoft.playwright.Locator;<\/div>\n
import<\/strong> com.microsoft.playwright.Page;<\/div>\n
import<\/strong> com.microsoft.playwright.Playwright;<\/div>\n
<\/div>\n
public<\/strong>
\nclass<\/strong> Blog23_ElementScreenshot {<\/div>\n
public<\/strong>
\nstatic<\/strong>
\nvoid<\/strong> main(String[] args) {<\/div>\n
Playwright pw = Playwright.create<\/em>();\u00a0<\/div>\n
Browser browser = pw.chromium().launch(new<\/strong> BrowserType.LaunchOptions().setHeadless(false<\/strong>));<\/div>\n
Page page = browser.newPage();<\/div>\n
page.navigate(“https:\/\/the-internet.herokuapp.com\/”);<\/div>\n
page.locator(“text=Broken Images”).screenshot(new<\/strong> Locator.ScreenshotOptions().setPath(Paths.get<\/em>(“.\/screenshot\/element_screenshot.png”)));<\/div>\n
\/\/page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get(“.\/screenshot\/samplepage1.png”)));<\/div>\n
page.pause();<\/div>\n
page.close();<\/div>\n
browser.close();<\/div>\n
pw.close();<\/div>\n
}<\/div>\n
}<\/div>\n
<\/div>\n
Source code (video capture)<\/strong><\/div>\n
package<\/strong> com.rsa.playwrightjava;<\/div>\n
<\/div>\n
import<\/strong> java.nio.file.Paths;<\/div>\n
import<\/strong> com.microsoft.playwright.Browser;<\/div>\n
import<\/strong> com.microsoft.playwright.BrowserContext;<\/div>\n
import<\/strong> com.microsoft.playwright.BrowserType;<\/div>\n
import<\/strong> com.microsoft.playwright.Page;<\/div>\n
import<\/strong> com.microsoft.playwright.Playwright;<\/div>\n
<\/div>\n
public<\/strong>
\nclass<\/strong> Blog23_VideoCapture {<\/div>\n
public<\/strong>
\nstatic<\/strong>
\nvoid<\/strong> main(String[] args) {<\/div>\n
Playwright pw = Playwright.create<\/em>();\u00a0<\/div>\n
Browser browser = pw.chromium().launch(new<\/strong> BrowserType.LaunchOptions().setHeadless(false<\/strong>));<\/div>\n
BrowserContext context = browser.newContext(new<\/strong> Browser.NewContextOptions().setRecordVideoDir(Paths.get<\/em>(“videos\/”)));<\/div>\n
<\/div>\n
Page page = context.newPage();<\/div>\n
page.navigate(“https:\/\/the-internet.herokuapp.com\/”);<\/div>\n
page.locator(“text=Broken Images”).click();<\/div>\n
page.close();<\/div>\n
context.close();<\/div>\n
pw.close();<\/div>\n
}<\/div>\n
}<\/div>\n
<\/div>\n
Thanks.<\/div>\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 how to take screenshot and capture video using Playwright Java.\u00a0 Topics that we will cover: Take screenshot of a page\u00a0 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 […]<\/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-3410","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\/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":0,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3410\/revisions"}],"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}]}}