In this blog we are going to see how to take screenshot and capture video using Playwright Java.
Topics that we will cover:
- Take screenshot of a page
- 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 we want to take a screenshot of a page while executing our test.
The code provided below will assist us in accomplishing that goal. There is a “screenshot()” method that we can use and store the screenshot to a given location
Execute the test.
Refresh the playwright project. Notice below that screenshot folder gets generated along with the png file
Note: The “ScreenshotOptions()” method is being called from te “Page” library
Take screenshot of an element
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.
So for example, go the below website
https://the-internet.herokuapp.com/
Let us say we want to take the snapshot of ony “Broken Images”
To achieve this, we have to simply call the ScreenshotOptions() method from “Locator” library instead of “Page” library.
Also instead of page.screenshot we have to use page.locator.screenshot syntax as shown below
Execute.
Refresh the playwright project to see the png file.
Open the png file, we can see the image of the element
Capture video
Let us now see how to capture a video of any desired test execution.
We have to create an instance of “BrowserContext” and use setRecordVideoDir() method. The below code will serve the purpose. Make sure that you close the context (line#23) otherwise video will not get captured
Execute. Notice that video gets generated
Go to the video file properties and open the folder location
Open a new browser, press Ctrl+O and go to the folder location of video
Select the video file and “Open” to play the video
So this is how we take the screenshots of page, element and capture the video.
Source code (page screenshot)
package com.rsa.playwrightjava;
import java.nio.file.Paths;
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Page.ScreenshotOptions;
import com.microsoft.playwright.Playwright;
public
class Blog23_CapturePageScreenshot {
public
static
void main(String[] args) {
Playwright pw = Playwright.create();
Browser browser = pw.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
Page page = browser.newPage();
page.navigate("https://courses.rahulshettyacademy.com/courses/");
//page.screenshot(new ScreenshotOptions().setPath(Paths.get("./screenshot/samplepage1.png")));
page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get("./screenshot/samplepage1.png"))); //this also works
page.pause();
page.close();
browser.close();
pw.close();
}
}
Source code (element screenshot)
package com.rsa.playwrightjava;
import java.nio.file.Paths;
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
public
class Blog23_ElementScreenshot {
public
static
void main(String[] args) {
Playwright pw = Playwright.create();
Browser browser = pw.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
Page page = browser.newPage();
page.navigate("https://the-internet.herokuapp.com/");
page.locator("text=Broken Images").screenshot(new Locator.ScreenshotOptions().setPath(Paths.get("./screenshot/element_screenshot.png")));
//page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get("./screenshot/samplepage1.png")));
page.pause();
page.close();
browser.close();
pw.close();
}
}
Source code (video capture)
package com.rsa.playwrightjava;
import java.nio.file.Paths;
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
public
class Blog23_VideoCapture {
public
static
void main(String[] args) {
Playwright pw = Playwright.create();
Browser browser = pw.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
BrowserContext context = browser.newContext(new Browser.NewContextOptions().setRecordVideoDir(Paths.get("videos/")));
Page page = context.newPage();
page.navigate("https://the-internet.herokuapp.com/");
page.locator("text=Broken Images").click();
page.close();
context.close();
pw.close();
}
}
Thanks.
