[Research] Visualize Browser Interactions for Selenium Tests with Docker

[ananzh]

When running Selenium tests in a Docker environment, it can be challenging to visualize browser interactions and debug the test cases.

Objective: Provide an easy debug environment for contributors to run Selenium tests by visualizing browser interactions when the application is hosted in Docker.

[ananzh]

Introduction

When running Selenium tests in a Docker environment, it can be challenging to visualize browser interactions and debug the test cases. One solution to this problem is to use VNC (Virtual Network Computing) to enable remote access to the container's graphical environment. This proposal outlines the process of setting up VNC for visualizing browser interactions during Selenium test execution in Docker.

Why choose VNC

VNC allows remote access to the container's graphical environment, enabling users to visualize browser interactions during Selenium test execution. This makes it easier to debug and understand the test cases. Other options include:

• DCV (NICE Desktop Cloud Visualization): DCV provides high-performance remote access to 2D/3D applications, but it requires additional setup and configuration.
• Running tests in headless mode: This is more resource-efficient, but it doesn't allow for visualization of browser interactions.

We choose VNC for this proposal because it provides a balance between ease of setup and the ability to visualize browser interactions.

[ananzh]

LXDE

Besides VNC, we should also consider to add desktop environments. We use Openbox and LXDE as lightweight desktop environments for the Docker container. Using LXDE can make it easier to debug the VNC connection issue because it provides a more complete and visually rich desktop environment. LXDE includes a panel, icons, and menus that should provide better visual feedback when connect to the container with a VNC viewer. During the research, I tried three options

• No LXDE or any desktop env manager: I see black VNC viewer. No terminal. Very hard to debug.
• LXDE complete: I initially considered using LXDE, but it is quite big. I have installation issue. First of all install LXDE is pain and it needs a lot of time. The build process is stuck at adding users to the "netdev" group, which is part of the installation of LXDE. It might just need more time to complete. But I think this is not a very efficient option so I didn't wait it to complete.
• Fluxbox: Fluxbox window manager is light weighted, but it doesn't work well. The menu in Fluxbox doesn't work and I can't find a terminal.
• LXDE-core: Finally, I switched to install only the essential components needed for a basic LXDE desktop environment. Replace the lxde package with lxde-core. It installs quickly and I am able to see a menu and a terminal.

Files and setup explanation

The implementation of the proposal would request the following setup:

• Dockerfile.selenium: Installs Google Chrome, xvfb (X virtual framebuffer), x11vnc (VNC server for X), openbox (a lightweight window manager), lxde-core (a lightweight desktop environment), and other dependencies. We chose lxde-core due to its minimal resource usage and compatibility with VNC.

• entrypoint.sh: Just need to update it to start the VNC server by running the start-vnc.sh script.

• start-vnc.sh: This script sets up the VNC server, configures the display, and starts the LXDE desktop environment.

• docker-compose.selenium.yml: This file defines a Docker Compose service for running the Selenium tests with VNC support. It specifies the Dockerfile.selenium file to build the image, maps the VNC port (5900) to the host, and sets the required environment variables.