[🚀 Feature]: Selenium end to end test headless mode with video recording

[saikatdas98]

Feature and motivation

Running an end-to-end test in Selenium with headless mode and video recording involves executing tests without a visible browser UI while capturing the session as a video.

Usage example

This is useful for saving resources during automated test in headless mode runs and reviewing the execution if any test fails.

[github-actions]

@saikatdas98, thank you for creating this issue. We will troubleshoot it as soon as we can.

---

Info for maintainers

Triage this issue by using labels.

If information is missing, add a helpful comment and then I-issue-template label.

If the issue is a question, add the I-question label.

If the issue is valid but there is no time to troubleshoot it, consider adding the help wanted label.

If the issue requires changes or fixes from an external project (e.g., ChromeDriver, GeckoDriver, MSEdgeDriver, W3C), add the applicable G-* label, and it will provide the correct link and auto-close the issue.

After troubleshooting the issue, please add the R-awaiting answer label.

Thank you!

[pujagani]

Headless mode is supported by the browser. Selenium simply instructs the browser to start in a headless mode. Can you please elaborate on your feature request? I don't think video recording is possible in headless mode since a GUI will be needed for it. So total resource consumption will still be the same. If you want step-by-step details, maybe one option is to enable tracing if you are using Java bindings or the Grid or use the Selenium logger library (https://github.com/titusfortner/selenium-logger) or something similar.

Do you have any ideas on how your featured request cab be implemented?

[krmahadevan]

@saikatdas98 - Adding to what @pujagani elaborated, if all you are looking for is a way to ensure that video recording of tests are available, then you should perhaps start exploring the docker variants of selenium.

I understand the intent behind looking for headless and also the intent behind the videos, but the combo doesnt seem to be a valid use case. Also remember that to the best of my knowledge screen recording basically records the entire screen (which means that if you had multiple browsers, then the recording would include all of them, which is perhaps why you are asking for headless mode)

I would suggest that you start here: https://github.com/SeleniumHQ/docker-selenium?tab=readme-ov-file#video-recording

[saikatdas98]

@pujagani @krmahadevan - thank you for your response.

@pujagani in below script if we run it will run the test in headless mode, but also capturing the GUI steps one-by-one. So I am asking how to achieve this in java selenium (maven dependency)

//starting the code from here
const { chromium } = require('playwright');
const fs = require('fs');
const path = require('path');

(async () => {
const videoDir = path.join(__dirname, 'videos');

if (!fs.existsSync(videoDir)) {
fs.mkdirSync(videoDir);
}

const browser = await chromium.launch({ headless: true }); // Run in non-headless mode for debugging
const context = await browser.newContext({
recordVideo: {
dir: videoDir,
size: { width: 1280, height: 720 },
},
});

const page = await context.newPage();

page.on('requestfailed', request => {
console.log(Request failed: ${request.url()} - ${request.failure().errorText});
});

page.on('response', response => {
console.log(Response status: ${response.status()} for ${response.url()});
});

try {
// Navigate to the login page
console.log('Navigating to login page...');
await page.goto('${base-url}', { timeout: 60000 });
console.log('Navigation successful!');

// Fill the username field
console.log('Filling username...');
await page.fill('#username', 'DIPTIKANTA12'); // Replace with your actual username

// Fill the password field
console.log('Filling password...');
await page.fill('#password', 'Welcome@12'); // Replace with your actual password

// Click on the login button
console.log('Clicking login button...');
await page.click('button:has-text("Login")');

// Wait for the post-login element (custId field) to be visible
console.log('Waiting for custId field...');
await page.waitForSelector('input[name="custId"]', { state: 'visible', timeout: 10000 });
console.log('Filling custId field...');
await page.fill('input[name="custId"]', 'Fusion Automation Testing'); // Replace with the actual client ID

// Click on the submit button (if needed)
console.log('Clicking submit button...');
await page.click('button:has-text("Submit")'); // Modify if there’s a different button text or action needed

// Wait for the dashboard text to be visible after login
console.log('Waiting for Dashboard text to be visible...');
const dashboardVisible = await page.isVisible('text=Dashboard'); // Modify selector based on actual text or element

if (dashboardVisible) {
  console.log('Dashboard text is visible, login successful!');
} else {
  console.log('Dashboard text is not visible, login failed.');
}

} catch (error) {
console.error('Error during the test:', error);
}

await page.close();
await browser.close();

console.log('Test completed.');
})();

@krmahadevan thank you I will check that thing

[diemol]

There are different approaches to do this:

• Using Docker as mentioned above.
• Using CDP like Playwright and Selenium 4 with CDP can do it. @nir-tal-talkspace implemented that in JS, and maybe they can share the code so you can translate it into Java.
• Take screenshots and stitch them together. Like Selenide, or this project.

[github-actions]

💬 Please ask questions at:

• 📫 The Selenium user group
• 📮 StackOverflow
• 🗣 Our IRC/Slack/Matrix channels where the community can help you as well