How to record the test execution to a video file using Playwright with Java.

Official refrence-https://playwright.dev/java/docs/videos

In order to do that we have to define a BrowserContext.

• The BrowserContext object represents a separate browsing context within the browser.
• This means that each BrowserContext object has its own set of cookies, cache, and other state.
• The newContextOptions() method allows you to specify options for the new browser context.
In this case, I am specifying the following options:

        // setRecordVideoDir(): This option specifies the folder where the videos should be saved.
        // setRecordVideoSize(): This option specifies the size of the videos that are recorded.
        // Unfortunately, there is no option to give file name
        BrowserContext context = browser.newContext(
                new NewContextOptions().setRecordVideoDir(Paths.get(path))
                        .setRecordVideoSize(new RecordVideoSize(1280, 720))
        );

Also when recording a video we can’t use Page page = browser.newPage();
Instead of that use Page page = context.newPage(); which I defiend above.

In other words,

Page page = browser.newPage();
  Creates a new Page object in the default browser context.
  Does not record videos.

Page page = context.newPage();
 Creates a new Page object in the specified browser context.
 Records videos for the specified browser context.

So above code is started the recording, so at the end of the execution make sure to close the page , and then the context that we created for recording. Otherwise, the video will be continue to record ,even after the page is closed.

      // Closes the currently open web page or browsing context. Terminates any ongoing network activity related to the page.
        page.close();
        //The next line of code closes the page object. This is important because if you do not close the page object, the video recording will continue even after the page is closed.
        //  This is necessary to stop the video recording.. close the video  after page closure.
        context.close();
        browser.close();
        playwright.close();

There is a limitation that we can’t give the file name so random name will be generated.

So let’s rename it. So output will be like this.

generated video path is-C:\SAMFOLDERS\PlaywrightJavaSam\PlayrightMavenJavaDemo\videos\8094fdf5eb4e0422d6eda2ec65fd4bf9.webm
Renamed  video's new path is-C:\SAMFOLDERS\PlaywrightJavaSam\PlayrightMavenJavaDemo\videos\RecordExecutionToVideo.webm

After everything is closed , (Afterthe playwright.close();) use the below code.

      // First get the current video file name that generated.
        String originalVideoPath=page.video().path().toString();
        System.out.println("generated video path is-"+originalVideoPath);

        // I am planning to get the class name of the current class without the package name and rename the file name with it.
        String className = getClass().getSimpleName();
        // Create a new file object for the new video file
        File renameVideoFile = new File(executionVideosFolder.toString(), className + ".webm");
        // Rename the old video file to the new file name, here I give the class name.
        Files.move(Paths.get(originalVideoPath), renameVideoFile.toPath());
        System.out.println("Renamed  video's new path is-" + renameVideoFile.toString());

Full code is as per below.

package com.sam.scripts;

import com.microsoft.playwright.*;
import com.microsoft.playwright.options.RecordVideoSize;
import org.testng.annotations.Test;
import com.microsoft.playwright.Browser.NewContextOptions;

import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;

import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;

public class RecordExecutionToVideo {
//  a path object that represents the folder where you want to save the videos.  "videos" folder  is located in the current working directory.
    String workingDirectory = System.getProperty("user.dir");
    // location to store the videos.
    Path executionVideosFolder = Paths.get(workingDirectory, "videos");
    //Convert it to String path.
    String path=executionVideosFolder.toString();


    @Test
    public void firstTest() throws IOException {
        Playwright playwright = Playwright.create();
     /*
     The BrowserContext object represents a separate browsing context within the browser.
     This means that each BrowserContext object has its own set of cookies, cache, and other state.
     The newContextOptions() method allows you to specify options for the new browser context.
     In this case, you are specifying the following options:
      */


        Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));


        // setRecordVideoDir(): This option specifies the folder where the videos should be saved.
        // setRecordVideoSize(): This option specifies the size of the videos that are recorded.
        // Unfortunately, there is no option to give file name
        BrowserContext context = browser.newContext(
                new NewContextOptions().setRecordVideoDir(Paths.get(path))
                        .setRecordVideoSize(new RecordVideoSize(1280, 720))
        );

/*
the difference between Page page = browser.newPage(); and Page page = context.newPage();.

The Page object represents a single web page that can be navigated, interacted with, and tested.
The browser.newPage() method creates a new Page object in the default browser context.
The default browser context is the one that is created when you first start the playwright instance.

The context.newPage() method creates a new Page object in the specified browser context.
In your code, you are specifying the browser context that you created in the previous line of code.

The reason why Page page = context.newPage(); should be used is that it allows you to record videos for each browser context.
This is useful if you want to record videos of different tests that are running in different browser contexts.

Here is a breakdown of the difference between the two lines of code:

Page page = browser.newPage();
  Creates a new Page object in the default browser context.
  Does not record videos.

Page page = context.newPage();
 Creates a new Page object in the specified browser context.
 Records videos for the specified browser context.
so don't use Page page = browser.newPage();  and use  Page page = context.newPage();
         */
        Page page = context.newPage();
        //  This code instructs the page object to navigate to the specified URL
        page.navigate("https://the-internet.herokuapp.com/");
        System.out.println(page.title());
        assertThat(page).hasTitle("The Internet");
        // Wait for the element to be available Wait are optional.
        page.waitForSelector("//a[contains(@href, '/hovers')]");
        // Click the element
        page.click("//a[contains(@href, '/hovers')]");
        Locator myImage = page.locator("(//img[@alt='User Avatar'])[1]");
        myImage.hover();
        // Wait for the element with the text to be available
        page.waitForSelector("h5");
        // Retrieve the text of the element
        String elementText = page.innerText("h5");
        System.out.println("Text after hover: " + elementText);
        // Closes the currently open web page or browsing context. Terminates any ongoing network activity related to the page.
        page.close();
        //The next line of code closes the page object. This is important because if you do not close the page object, the video recording will continue even after the page is closed.
        //  This is necessary to stop the video recording.. close the video  after page closure.
        context.close();
        browser.close();
        playwright.close();

      /*
      There is a limitation in Playwright that file name can't  be given, so random value is generated.
      So, let's rename it.
       */
        // First get the current video file name that generated.
        String originalVideoPath=page.video().path().toString();
        System.out.println("generated video path is-"+originalVideoPath);

        // I am planning to get the class name of the current class without the package name and rename the file name with it.
        String className = getClass().getSimpleName();
        // Create a new file object for the new video file
        File renameVideoFile = new File(executionVideosFolder.toString(), className + ".webm");
        // Rename the old video file to the new file name, here I give the class name.
        Files.move(Paths.get(originalVideoPath), renameVideoFile.toPath());
        System.out.println("Renamed  video's new path is-" + renameVideoFile.toString());
}
}

This video also useful-https://www.youtube.com/watch?v=zurNNWSgzqg&list=PLZMWkkQEwOPliOm7TkV0Ndg45cJPDthDC&index=6&t=456s&ab_channel=LambdaTest