Has anyone found a way to record the UI with headless browsing?

We use mostly headless browsing in our Selenium Grids here, and was curious if there is any tools that will work with a headless browser and some how still let you record/render the screens for click through recording support. Or even in a way that just takes a screens shot after every click/page load, without actually writing that into the test.

1 Like

I don’t really know much about headless browsing, but I did come across this today - https://saucelabs.com/blog/new-headless-browser-testing-offered-to-help-speed-development

I guess it depends on what method you’re using for headless browsing. PhantomJS (no longer being developed on) supported screenshots but not too well. If you’re using the headless Chrome it supports screenshots through selenium as is (driver.save_screenshot), not sure about other browsers though. Additionally there are writeups about using ffmpeg in conjunction with xvfb to record headless selenium tests but I have not performed them myself (http://afterdesign.net/2016/02/07/recording-headless-selenium-tests-to-mp4.html)

Yea currently we are using the screen shot approach with Chrome driver on failure, so the back up action is just to take screen shots per action. I am currently looking at ffmpeg as well, just doesn’t seem to be any standard solution.

In the mean time we took to collecting the DOM at failure, so we can render the data in the report file and see if our elements were there at time of failure.

I’m currently using Katalon Studio to record UI tests and to create the test scenarios. Refer to this material to learn how to use (https://docs.katalon.com/katalon-studio/tutorials/headless_browsers_execution.html).

valek, not to be rude but how is that relevant to my question, feels more like a blatant advertising bot post. Can you please review your feedback and update to be relevant .

Hi, sorry if I made you confused with the previous answer. As the document above already provides full instructions about how to deal with your concern, I thought that was enough to make it relevant.
Btw, regarding your question, I am a bit curious on why you want to record the UI on a headless browser. The idea is quite interesting since I could not imagine what it looks like when recording (manually performing actions) on a headless browser where you could not see the UI. So, I just want to recommend a tool like Katalon Studio, which allows you create test scenario by different ways: recording, drag-and-drop built-in keywords, or using scripting language. These scenarios then can be executed with different browsers, and headless browsers. Screenshot is supported in headless browser as well. It is a convenient way to debug and observe what is going on when the test is run with headless browser.
Hope this helps.

Generally we like to encourage people to post answers within the forum, rather than linking out. External links can easily change and having to read through loads of content isn’t particularly helpful at times. It’s much better to focus on the problem/question at hand and try to help them solve that within the same thread.

Of course, links are not disallowed, but places like this attract lots of vendor spam. So as soon as you post a link to a vendor people will think it is spam. If you are part of Katalon Studio you should include that within any comments.

I’ve been using zalenium (https://opensource.zalando.com/zalenium/) for troubleshooting a lot. Works otherwise as selenium -grid, but with video recording. Browserstack (and I suppose saucelab too) have similar services, but they’re commercial. It was fairly easy to get the zaleniumm running in a docker.

  1. First you need to have a selenium -image:
    docker pull elgalu/selenium
  2. Then:
    docker-compose like this:
version: "3.1"
services:  
  zalenium:
    image: dosel/zalenium
    ports: 
      - "4444:4444"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - /tmp/videos:/home/seluser/videos 
    
    command: ["start",
              "--screenWidth", "1920",
              "--screenHeight", "1080",
              "--chromeContainers", "0",
              "--firefoxContainers", "0"] 

and then just point whatever tool you have to http://localhost:4444/wd/hub
e.g. robot -v selenium_server:http://localhost:4444/wd/hub Tests/Regression/

You can monitor the live preview
http://localhost:4444/grid/admin/live
And browse the recordings:
http://localhost:4444/dashboard/

2 Likes

Thanks Jan, I will explore more with this as well.

@chrisgtaylor You may have already found a solution by now, but if you or anyone else is still looking, I’m working on a screen-recorder Ruby gem that allows you to record headless displays via xvfb or xvfb-run.

Repo: https://github.com/kapoorlakshya/screen-recorder
Wiki: https://github.com/kapoorlakshya/screen-recorder/wiki/xvfb-or-headless-Capture

If you’re not using Ruby, you can use FFmpeg directly to capture the output from xvfb.