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.

Tags


You may also like

Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}