Generate browser-based videos in Katalon Studio reports

Important:

• You need an active Katalon Studio Enterprise license.
• You need to install the FFmpeg library. See: Install FFmpeg library.

You can use the browser-based recording feature in Katalon Studio to capture videos of your test executions. This feature allows you to:

• Record video of browser window only (even if it is hidden behind another window).

• Record video of Headless browser. To learn more about Headless Browser Execution, see: Headless Browsers Execution.

• Record videos of multiple browsers simultaneously (for instance, parallel execution of Test Suite Collection).

This document shows you how to enable the browser-based recording feature in Katalon Studio and install FFmpeg as a third-party library for video encoding.

Note:

• You can only record and watch videos for Web UI testing.
• This feature supports test suite and test suite collection execution.
• This feature is available for Chrome, Microsoft Edge (Chromium-based), and Headless Chrome. To learn more about Headless Chrome, refer to the Google Developer website here: Getting Started with Headless Chrome.
• For screen-based recorder, see Generate screen-based videos in Katalon Studio reports.

Enable browser-based recorder

To enable browser-based recorder in Katalon Studio, follow the steps below:

1. Go to Project > Settings > Execution.

2. In the During-Execution Options panel:

• Enable Video Recorder by checking Record video during execution.
• Select Record Type as Browser-based Recorder.
• Specify the applicable test cases by choosing either Failed test cases or All Test Cases.
• Specify video format and quality based on your preferences:
  • Video format: WEBM (.webm), AVI (.avi), MOV (.mov), or MP4 (.mp4).
  • Video quality: Low; Medium or High.

3. Go to Desired Capabilities > Web UI, then select Chrome, Chrome Headless, or Edge Chromium.

4. Click the Add button, then type in the following value to set a window size of 1500x1000 for the browser to record and allow all remote origins, as shown in the sample screenshot below.

   Name	Type	Value
   args	List	--window-size=1500,1000 --remote-allow-origins=*

To learn more about setting desired capabilities for WebUI testing, see: Set up desired capabilities for WebUI testing.

5. Click Apply & Close.

Install FFmpeg library

To install the FFmpeg library:

• For macOS, use the following command with Homebrew:

  brew install ffmpeg
• For Linux, use the following command:

  sudo apt-get install ffmpeg
• For Windows users:

  1. Go to the FFmpeg download web page.

  2. Download the package for Windows.

  3. Add the path to the FFmpeg executable file to your PATH environment variable. See Add FFmpeg to PATH on Windows.

  4. Reactivate Katalon Studio for this installation to take effect.

For more information on FFmpeg library, see: FFmpeg library.

Attention:

• FFmpeg v7 has an issue with the VP9 codec. The output file cannot be played on Chrome or Microsoft Edge browsers but works fine on Safari and Firefox. To resolve this issue, you should downgrade FFmpeg to v6.

Commands to install FFmpeg v6 on macOS:

Uninstall FFmpeg v7: brew uninstall ffmpeg

Install FFmpeg v6: brew install ffmpeg@6

Link FFmpeg v6: brew link ffmpeg@6

Verify the version: ffmpeg -version

Add FFmpeg to PATH on Windows

On Windows, to use FFmpeg with Katalon Studio, you need to add it to the system PATH. Follow these steps to configure the PATH variable:

1. After downloading and extracting the FFmpeg package, rename the extracted folder to ffmpeg.
2. Move the ffmpeg folder to the root directory of the C: drive or another location of your choice.
3. To add FFmpeg to the PATH, type system variables into the search bar, and select Edit the system environment variables.
   
4. In the System Properties window, go to the Advanced tab and select Environment Variables….
   
5. Under the User variables for [Your Username] section, locate the Path variable and select Edit….
   
6. In the Edit environment variable window, click New and enter the path to the FFmpeg binary folder (for example, C:\ffmpeg\bin).
   
7. Click OK to close all dialog boxes and save the changes.

To verify that FFmpeg has been correctly added to the PATH, open the Command Prompt and run the following command:

ffmpeg -version

The output should display FFmpeg version details, confirming the installation.

Attention:

• If you have already installed FFmpeg, but typing ffmpeg in the command prompt returns nothing, make sure your user account has full permission OR run CMD window as Administrator mode.

Build and commit a Docker image with FFmpeg installed

Katalon Docker image may be used as a container to execute Katalon Studio tests and write reports to the host's file system. However, the default Katalon Docker image does not include the FFmpeg library required for browser-based video recording.

The following steps guide you through building and committing your own Docker image with FFmpeg installed.

Note:

• This procedure assumes you are using the Docker image katalon:9.7.2. To check for the latest images, visit the Katalon Docker Hub.

• Make sure the image tag matches the version of Katalon Studio installed on your system.

1. Run a container from the Katalon Docker image.
   1. Open a terminal on your local machine.
   2. Run the following command to start a container from the desired Katalon Docker image (for example, version 9.7.2):

      docker run -it katalonstudio/katalon:9.7.2 /bin/bash
   3. Inside the container, update the package manager and install FFmpeg:

      apt-get update
      apt-get -y install ffmpeg
2. Save the updated container as a new image.
   1. Open another terminal and list the active Docker containers to locate the container ID:

      docker ps

      Example output:

      CONTAINER ID   IMAGE                             COMMAND
      6e9278d5d7f4   katalonstudio/katalon:9.7.2      "/bin/bash"
   2. Use the container ID from the output to save the updated container as a new Docker image:

      docker commit <container id> <new image name>

      For example, if the container ID is 6e9278d5d7f4 and you want to name the new image ksffmpeg, the command would be:

      docker commit 6e9278d5d7f4 ksffmpeg
3. Run your image.
   In the below example, we are running the ksffmpeg image from the Katalon project directory and mapping a docker volume to the drive.

   docker run -t --rm -v ${pwd}:/tmp/project ksffmpeg katalonc.sh -retry=0 -projectPath="/tmp/project/web-keywords-automation.prj" -testSuitePath="Test Suites/WebUI Keywords Test" -browserType="Chrome" -executionProfile="default" -apiKey="<removed>" -orgID=<removed> --config -proxy.auth.option=NO_PROXY -proxy.system.option=NO_PROXY -proxy.system.applyToDesiredCapabilities=true

You have built your own images for Katalon Docker image. For more information on Katalon Docker image, see: Katalon Docker Image (KDI).

View recorded videos

Click the Play icon in the Video column to play the video as shown below. Each test step in the video has a description embedded like a subtitle.

After running the test suite, navigate to the Result tab. You can see a list of test cases. A recorded video is attached to each test case.

See also

• Common issues with browser-based videos in Katalon Studio report.