Video recording

Mobitru supports the video recording of the entire Playwright Browser session and provides the specific API to download the recording in mp4 format.
This feature is available for all browsers and switched off by default.

Enable in tests

To start using the video recording in tests, it’s necessary to just add the enableVideo parameter with true as value to a WebSocket endpoint.
Below you can find an example for different programming languages:

const playwright = require('playwright-core');

const mobitruHost = "browserhub-us.mobitru.com";
const mobitruTeamCode = "<TEAM_CODE>";
const mobitruAccessToken = "mobitru_ak...";
const pwVersion = "1.55.0";
const mobitruLandingUrl = 'https://mobitru.com/';
const browserName = 'chrome';


    test.describe(`Demo test`, () => {
       ....

        test.beforeAll(async ({}, testInfo) => {
            const wsEndpoint = `wss://${mobitruTeamCode}:${mobitruAccessToken}@${mobitruHost}/playwright/${browserName}/playwright-${pwVersion}?enableVideo=true`;
        
            ....
        });
        
       ....
private static final String PROJECT_NAME = "<TEAM_CODE>";
private static final String API_KEY = "mobitru_ak_...";
private static final String BROWSER_HUB = "browserhub-us.mobitru.com";
private static final String BROWSER_NAME = "chrome";
private static final String PW_VERSION = "1.54.0";

@Test
public void demoTest() {
        String wsEndpoint = String.format("wss://%s:%s@%s/playwright/%s/playwright-%s?enableVideo=true",
                PROJECT_NAME, API_KEY, BROWSER_HUB, BROWSER_NAME, PW_VERSION);

        ....
    }
import pytest

from playwright.sync_api import sync_playwright, Page, expect

BILLING_UNIT = '<TEAM_CODE>'
ACCESS_TOKEN = 'mobitru_ak_...'
MOBITRU_HOST = 'browserhub-us.mobitru.com'
BROWSER_NAME = 'chrome'
PW_VERSION = '1.55.0'


@pytest.fixture(scope="function")
def mobitru_page(request):
    with sync_playwright() as playwright:
        chromium = playwright.chromium
        ws_endpoint = f"wss://{BILLING_UNIT}:{ACCESS_TOKEN}@{MOBITRU_HOST}/playwright/{BROWSER_NAME}/playwright-{PW_VERSION}?enableVideo=true"
        ....        

private const string PROJECT_NAME = "<TEAM_CODE>";
private const string API_KEY = "mobitru_ak_....";
private const string BROWSER_HUB = "browserhub-us.mobitru.com";
private const string BROWSER_NAME = "chrome";
private const string PW_VERSION = "1.55.0";

[Test]
public void DemoTest()
{
    string wsEndpoint = $"wss://{PROJECT_NAME}:{API_KEY}@{BROWSER_HUB}/playwright/{BROWSER_NAME}/playwright-{PW_VERSION}?enableVideo=true";
    ....
}

Download the result .mp4 file

The .mp4 file with recording can be downloaded after end of a playwright browser Session.
Important: please store the session id before the end, because this value will be used in the download API call.
Below you can find an example of storing the session id:

const playwright = require('playwright-core');

const mobitruHost = "browserhub-us.mobitru.com";
const mobitruTeamCode = "<TEAM_CODE>";
const mobitruAccessToken = "mobitru_ak...";
const pwVersion = "1.55.0";
const mobitruLandingUrl = 'https://mobitru.com/';
const browserName = 'chrome';
const httpCredentials = {
    username: mobitruTeamCode,
    password: mobitruAccessToken,
};
const mobitruApiAccessToken = btoa(`${httpCredentials.username}:${httpCredentials.password}`);


    test.describe(`Demo test`, () => {
       ....

        test.beforeAll(async ({}, testInfo) => {
            const sessionName = crypto.randomUUID();
            const wsEndpoint = `wss://${mobitruTeamCode}:${mobitruAccessToken}@${mobitruHost}/playwright/${browserName}/playwright-${pwVersion}?enableVideo=true&sessionName=${sessionName}`;
            browser = await browserType.connect({
                timeout: 0,
                wsEndpoint: wsEndpoint
            });

            page = await browser.newPage({
                ignoreHTTPSErrors: true,
                viewport: {width: 1920, height: 1080}
            });
            
            ....
            
            const sessionInfo = await page.request.get(`https://${mobitruHost}/playwright/session/${sessionName}`, {
                headers: {
                    'Authorization': `Basic ${mobitruApiAccessToken}`,
                },
            })
            expect(sessionInfo.ok()).toBeTruthy();
            const jsonResponse = await sessionInfo.json();
            sessionId = jsonResponse.sessionId;
            
        
            ....
        });
        
       ....
import com.google.gson.Gson;
import com.google.gson.JsonObject;
import com.microsoft.playwright.*;

import java.io.IOException;
import java.util.Base64;
import java.util.Map;
import java.util.UUID;

private static final String PROJECT_NAME = "<TEAM_CODE>";
private static final String API_KEY = "mobitru_ak_...";
private static final String BROWSER_HUB = "browserhub-us.mobitru.com";
private static final String BROWSER_NAME = "chrome";
private static final String PW_VERSION = "1.54.0";

@Test
public void demoTest() {
         String credentials = PROJECT_NAME + ":" + API_KEY;
        // Encode the credentials as Base64
        String mobitruApiAccessToken = Base64.getEncoder().encodeToString(credentials.getBytes());
        
        String sessionName = UUID.randomUUID().toString();
        
        String wsEndpoint = String.format("wss://%s:%s@%s/playwright/%s/playwright-%s?enableVideo=true&sessionName=%s",
                PROJECT_NAME, API_KEY, BROWSER_HUB, BROWSER_NAME, PW_VERSION, sessionName);

        try (Playwright playwright = Playwright.create()) {
            Browser browser = playwright.chromium().connect(wsEndpoint);
            Page page = browser.newPage();
            page.navigate(....);

            // Make a GET request
            APIRequestContext apiRequest = playwright.request().newContext(new APIRequest.NewContextOptions()
                    .setBaseURL("https://" + BROWSER_HUB)
                    .setExtraHTTPHeaders(Map.of(
                            "Authorization", "Basic " + mobitruApiAccessToken
                    )));
            APIResponse sessionInfo = apiRequest.get("/playwright/session/" + sessionName);
            String sessionId = new Gson().fromJson(sessionInfo.text(), JsonObject.class)
                    .get("sessionId")
                    .getAsString();

            ....
        }
    }
import pytest
import base64
import uuid

from playwright.sync_api import sync_playwright, Page, expect

BILLING_UNIT = '<TEAM_CODE>'
ACCESS_TOKEN = 'mobitru_ak_...'
MOBITRU_HOST = 'browserhub-us.mobitru.com'
BROWSER_NAME = 'chrome'
PW_VERSION = '1.55.0'


@pytest.fixture(scope="function")
def mobitru_page(request):
    session_name = str(uuid.uuid4())
    with sync_playwright() as playwright:
        chromium = playwright.chromium
        ws_endpoint = f"wss://{BILLING_UNIT}:{ACCESS_TOKEN}@{MOBITRU_HOST}/playwright/{BROWSER_NAME}/playwright-{PW_VERSION}?enableVideo=true&sessionName={session_name}"
        page = browser.new_page()
        page.goto(....)

        http_credentials = f"{BILLING_UNIT}:{ACCESS_TOKEN}"
        mobitru_api_access_token = base64.b64encode(http_credentials.encode()).decode()

        session_info = page.request.get( url=f"https://{MOBITRU_HOST}/playwright/session/{session_name}",
            headers={
                'Authorization': f"Basic {mobitru_api_access_token}"
            }
        )
        json_response = session_info.json()
        session_id = json_response["sessionId"]
        ....        
using System;
using System.Collections.Generic;
using System.Text;
using System.Text.Json;
using System.Threading.Tasks;

private const string PROJECT_NAME = "<TEAM_CODE>";
private const string API_KEY = "mobitru_ak_....";
private const string BROWSER_HUB = "browserhub-us.mobitru.com";
private const string BROWSER_NAME = "chrome";
private const string PW_VERSION = "1.55.0";

[Test]
public void DemoTest()
{
            string sessionName = Guid.NewGuid().ToString();
            string wsEndpoint = $"wss://{PROJECT_NAME}:{API_KEY}@{BROWSER_HUB}/playwright/{BROWSER_NAME}/playwright-{PW_VERSION}?enableVideo=true&sessionName={sessionName}";
            using var playwright = Microsoft.Playwright.Playwright.CreateAsync().GetAwaiter().GetResult();
            var browser = playwright.Chromium.ConnectAsync(wsEndpoint).GetAwaiter().GetResult();
            var page = browser.NewPageAsync().GetAwaiter().GetResult();
            page.GotoAsync(....).GetAwaiter().GetResult();



            string httpCredentials = $"{PROJECT_NAME}:{API_KEY}";

            // Encode to Base64
            string mobitruApiAccessToken = Convert.ToBase64String(Encoding.UTF8.GetBytes(httpCredentials));

            var requestContext = playwright.APIRequest.NewContextAsync(new APIRequestNewContextOptions
            {
                BaseURL = $"https://{BROWSER_HUB}",
                ExtraHTTPHeaders = new Dictionary<string, string>
            {
                { "Authorization", $"Basic {mobitruApiAccessToken}" }
            }
            }).GetAwaiter().GetResult();

            // Perform the GET request
            var sessionInfo = requestContext.GetAsync($"/playwright/session/{sessionName}").GetAwaiter().GetResult();
            var jsonResponse = sessionInfo.JsonAsync().GetAwaiter().GetResult();
            var sessionId = jsonResponse?.GetProperty("sessionId");
    ....
}

Here is the example of CURL request to download a recording using stored session ID:

curl --location 'https://<BILLING_UNIT>:<ACCESS_KEY>@browserhub-us.mobitru.com/wd/hub/session/<RECORDING_ID>/recording'

Scroll to Top