WIP Adding noVNC to docker-selenium (#1253)

Author: diemol

Makefile

@@ -1,7 +1,7 @@
 NAME := $(or $(NAME),$(NAME),selenium)
 CURRENT_DATE := $(shell date '+%Y%m%d')
 BUILD_DATE := $(or $(BUILD_DATE),$(BUILD_DATE),$(CURRENT_DATE))
-VERSION := $(or $(VERSION),$(VERSION),4.0.0-beta-2)
+VERSION := $(or $(VERSION),$(VERSION),4.0.0-beta-3)
 TAG_VERSION := $(VERSION)-$(BUILD_DATE)
 NAMESPACE := $(or $(NAMESPACE),$(NAMESPACE),$(NAME))
 AUTHORS := $(or $(AUTHORS),$(AUTHORS),SeleniumHQ)

NodeBase/Dockerfile.txt

@@ -81,6 +81,25 @@ RUN apt-get -qqy update \
   && rm -rf /var/lib/apt/lists/* \
   && apt-get -qyy clean
 
+########################################
+# noVNC exposes VNC through a web page #
+########################################
+# Download https://github.com/novnc/noVNC dated 2021-03-30 commit 84f102d6a9ffaf3972693d59bad5c6fddb6d7fb0
+# Download https://github.com/novnc/websockify dated 2021-03-22 commit c5d365dd1dbfee89881f1c1c02a2ac64838d645f
+ENV NOVNC_SHA="84f102d6a9ffaf3972693d59bad5c6fddb6d7fb0" \
+    WEBSOCKIFY_SHA="c5d365dd1dbfee89881f1c1c02a2ac64838d645f"
+RUN  wget -nv -O noVNC.zip \
+       "https://github.com/novnc/noVNC/archive/${NOVNC_SHA}.zip" \
+  && unzip -x noVNC.zip \
+  && mv noVNC-${NOVNC_SHA} /opt/bin/noVNC \
+  && cp /opt/bin/noVNC/vnc.html /opt/bin/noVNC/index.html \
+  && rm noVNC.zip \
+  && wget -nv -O websockify.zip \
+      "https://github.com/novnc/websockify/archive/${WEBSOCKIFY_SHA}.zip" \
+  && unzip -x websockify.zip \
+  && rm websockify.zip \
+  && mv websockify-${WEBSOCKIFY_SHA} /opt/bin/noVNC/utils/websockify
+
 #===================================================
 # Run the following commands as non-privileged user
 #===================================================
@@ -115,9 +134,10 @@ RUN sudo chmod -R 777 ${HOME} \
   && sudo chmod -R g=u ${HOME}
 
 #==============================
-# Scripts to run fluxbox and x11vnc
+# Scripts to run fluxbox, x11vnc and noVNC
 #==============================
 COPY start-vnc.sh \
+      start-novnc.sh \
       /opt/bin/
 
 #==============================

NodeBase/selenium.conf

@@ -1,6 +1,6 @@
 ; Documentation of this file format -> http://supervisord.org/configuration.html
 
-; Priority 0 - xvfb, 5 - fluxbox, 10 - x11vnc, 15 - selenium-node
+; Priority 0 - xvfb & fluxbox, 5 - x11vnc, 10 - noVNC, 15 - selenium-node
 
 [program:xvfb]
 priority=0
@@ -22,7 +22,7 @@ stdout_capture_maxbytes=50MB
 stderr_capture_maxbytes=50MB
 
 [program:vnc]
-priority=10
+priority=5
 command=/opt/bin/start-vnc.sh
 autostart=true
 autorestart=false
@@ -40,6 +40,25 @@ stderr_logfile_backups=5
 stdout_capture_maxbytes=50MB
 stderr_capture_maxbytes=50MB
 
+[program:novnc]
+priority=10
+command=/opt/bin/start-novnc.sh
+autostart=true
+autorestart=false
+startsecs=0
+startretries=0
+
+;Logs
+redirect_stderr=false
+stdout_logfile=/var/log/supervisor/novnc-stdout.log
+stderr_logfile=/var/log/supervisor/novnc-stderr.log
+stdout_logfile_maxbytes=50MB
+stderr_logfile_maxbytes=50MB
+stdout_logfile_backups=5
+stderr_logfile_backups=5
+stdout_capture_maxbytes=50MB
+stderr_capture_maxbytes=50MB
+
 [program:selenium-node]
 priority=15
 command=/opt/bin/start-selenium-node.sh

NodeBase/start-novnc.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+#
+# IMPORTANT: Change this file only in directory NodeBase!
+
+if [ "${START_XVFB}" = true ] ; then
+  /opt/bin/noVNC/utils/launch.sh --listen 7900 --vnc localhost:5900
+else
+  echo "noVNC won't start because Xvfb is configured to not start."
+fi

NodeBase/start-vnc.sh

@@ -4,8 +4,15 @@
 
 if [ "${START_XVFB}" = true ] ; then
   # Centering wallpaper
-  echo "Centering wallpaper"
-  /usr/bin/fbsetbg -c /usr/share/images/fluxbox/ubuntu-light.png
+  for i in $(seq 1 10)
+  do
+    sleep 0.5
+    echo "Centering wallpaper"
+    /usr/bin/fbsetbg -c /usr/share/images/fluxbox/ubuntu-light.png
+    if [ $? -eq 0 ]; then
+      break
+    fi    
+  done  
 
   if [ ! -z $VNC_NO_PASSWORD ]; then
       echo "Starting VNC server without password authentication"

README.md

@@ -7,18 +7,18 @@ and made the source code freely available under the [Apache License 2.0](LICENSE
 ![Deployments](https://github.com/SeleniumHQ/docker-selenium/workflows/Deploys/badge.svg)
 
 # :point_right: Status: Grid 4 is under development and on a [Beta stage](https://en.wikipedia.org/wiki/Software_release_life_cycle#Beta)
-We are doing prereleases on a regular basis to get early feedback. This means that all other Selenium components
-can be currently at a different alpha version (e.g. bindings on Beta 1, and Docker images on prerelease Beta 2).
+Prereleases are happening on a regular basis to get early feedback. This means that all other Selenium components
+can be currently at a different beta version (e.g. bindings on Beta 2, and Docker images on prerelease Beta 3).
 
 Docker images for Grid 4 come with a handful of tags to simplify its usage, have a look at them in one of 
-our [prereleases](https://github.com/SeleniumHQ/docker-selenium/releases/tag/4.0.0-beta-3-prerelease-20210329)
+our [releases](https://github.com/SeleniumHQ/docker-selenium/releases/tag/4.0.0-beta-3-prerelease-20210329)
 
-To get notifications of new prereleases, add yourself as a watcher of "Releases only". 
+To get notifications of new prereleases, add yourself as a "Releases only" watcher. 
 
-Doubts or questions? Please get in touch through the different communication channels available in the **Community** section.
+Doubts? Questions? Get in touch through the different communication channels available in the **Community** section.
 
 Looking for Grid 3? Head to the [Selenium 3 branch](https://github.com/SeleniumHQ/docker-selenium/tree/selenium-3). This branch
-will be having new browser releases until Grid 4 has its major release.
+will be having new browser releases until Grid 4 has had its major release.
 
 ## Community
 
@@ -31,32 +31,30 @@ https://www.selenium.dev/support/
 1. Start a Docker container with Firefox
 
 ``` bash
-$ docker run -d -p 4444:4444 --shm-size 2g selenium/standalone-firefox:4.0.0-beta-3-prerelease-20210329
+$ docker run -d -p 4444:4444 -p 7900:7900 --shm-size 2g selenium/standalone-firefox:4.0.0-beta-3-prerelease-20210329
 # OR
-$ docker run -d -p 4444:4444 -v /dev/shm:/dev/shm selenium/standalone-firefox:4.0.0-beta-3-prerelease-20210329
+$ docker run -d -p 4444:4444 -p 7900:7900 -v /dev/shm:/dev/shm selenium/standalone-firefox:4.0.0-beta-3-prerelease-20210329
 ```
 
 2. Point your WebDriver tests to http://localhost:4444/wd/hub
 
 3. That's it! 
 
-To inspect visually the browser activity, see the [Debugging](#debugging) section for details.
+4. (Optional) To see what is happening inside the container, head to http://localhost:7900 (password is `secret`).
+
+More details about visualising the container activity, check the [Debugging](#debugging) section.
 
 :point_up: When executing `docker run` for an image that contains a browser please either mount 
   `-v /dev/shm:/dev/shm` or use the flag `--shm-size=2g` to use the host's shared memory.
 
-> Why is `-v /dev/shm:/dev/shm` or `--shm-size 2g` necessary?
-> This is a known workaround to avoid the browser crashing inside a docker container, here are the documented issues for
-[Chrome](https://code.google.com/p/chromium/issues/detail?id=519952) and [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1338771#c10).
-The shm size of 2gb is arbitrary but known to work well, your specific use case might need a different value, it is recommended
-to tune this value according to your needs. Along the examples `-v /dev/shm:/dev/shm` will be used, but both are known to work.
-
 :point_up: Always use a Docker image with a full tag to pin a specific browser and Grid version.
 See [Tagging Conventions](https://github.com/SeleniumHQ/docker-selenium/wiki/Tagging-Convention) for details.
 
 ___
 
-## Standalone
+## Execution modes
+
+### Standalone
 
 ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_24x24.png) Firefox 
 ``` bash
@@ -82,11 +80,11 @@ _Note: Only one Standalone container can run on port_ `4444` _at the same time._
 
 ___
 
-## Selenium Grid Hub and Nodes
+### Hub and Nodes
 
 There are different ways to run the images and create a Grid with a Hub and Nodes, check the following options.
 
-### Docker networking
+#### Docker networking
 The Hub and Nodes will be created in the same network and they will recognize each other by their container name.
 A Docker [network](https://docs.docker.com/engine/reference/commandline/network_create/) needs to be created as a first step.
 
@@ -122,7 +120,7 @@ When you are done using the Grid, and the containers have exited, the network ca
 $ docker network rm grid
 ```
 
-### Using different machines/VMs
+#### Using different machines/VMs
 The Hub and Nodes will be created on different machines/VMs, they need to know each other's IPs to
 communicate properly.
 
@@ -175,26 +173,26 @@ $ docker run -d -p 5555:5555
     selenium/node-opera:4.0.0-beta-3-prerelease-20210329
 ```
 
-### Docker Compose
+#### Docker Compose
 [Docker Compose](https://docs.docker.com/compose/) is the simplest way to start a Grid. Use the
 linked resources below, save them locally, and check the execution instructions on top of each file.
 
-#### Version 2
+##### Version 2
 [`docker-compose-v2.yml`](docker-compose-v2.yml)
 
-#### Version 3
+##### Version 3
 [`docker-compose-v3.yml`](docker-compose-v3.yml)
 
 To stop the Grid and cleanup the created containers, run `docker-compose down`.
 
-#### Version 3 with Swarm support 
+##### Version 3 with Swarm support 
 [`docker-compose-v3-swarm.yml`](docker-compose-v3-swarm.yml)
 
 ___
 
-## Selenium Grid - Router, Distributor, EventBus, SessionMap and Nodes
+### Fully distributed mode - Router, Queue, Distributor, EventBus, SessionMap and Nodes
 
-It is possible to start a Selenium Grid with its five components apart. For simplicity, only an
+It is possible to start a Selenium Grid with all its components apart. For simplicity, only an
 example with docker-compose will be provided. Save the file locally, and check the execution 
 instructions on top of it.
 
@@ -204,7 +202,7 @@ ___
 
 ## Video recording ![BETA](https://img.shields.io/badge/beta!-blue?style=for-the-badge)
 
-It is possible to record your tests running in containers by using the `selenium/video:ffmpeg-4.3.1-20210329`
+Tests execution can be recorded by using the `selenium/video:ffmpeg-4.3.1-20210329`
 Docker image. One container is needed per each container where a browser is running. This means if you are
 running 5 Nodes/Standalone containers, you will need 5 video containers, the mapping is 1-1.
 
@@ -422,8 +420,8 @@ Grid has a default session timeout of 300 seconds, where the session can be on a
 ### Running in Headless mode
 
 [Firefox](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Headless_mode), 
-[Chrome](https://developers.google.com/web/updates/2017/04/headless-chrome) and 
-[Opera](https://forums.opera.com/topic/20375/opera-cli-switches-and-headless) support running tests in the headless mode.
+[Chrome](https://developers.google.com/web/updates/2017/04/headless-chrome), 
+[Opera](https://forums.opera.com/topic/20375/opera-cli-switches-and-headless) and Edge support running tests in the headless mode.
 When using headless mode, there's no need for the [Xvfb](https://en.wikipedia.org/wiki/Xvfb) server to be started.
 
 To avoid starting the server you can set the `START_XVFB` environment variable to `false` 
@@ -455,31 +453,6 @@ $ BUILD_ARGS="--build-arg http_proxy=http://acme:3128 --build-arg https_proxy=ht
 _Note: Omitting_ `VERSION=local` _will build the images with the released version but replacing the date for the 
 current one._
 
-## Using the images
-
-### Example: Spawn a container for testing in Firefox ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_24x24.png)
-
-``` bash
-$ docker network create grid
-$ docker run -d -p 4442-4444:4442-4444 --net grid --name selenium-hub selenium/hub:4.0.0-beta-3-prerelease-20210329
-$ docker run -d --net grid -e SE_EVENT_BUS_HOST=selenium-hub \
-    -e SE_EVENT_BUS_PUBLISH_PORT=4442 -e SE_EVENT_BUS_SUBSCRIBE_PORT=4443 \
-    -v /dev/shm:/dev/shm \
-    -v /e2e/uploads:/e2e/uploads selenium/node-firefox:4.0.0-beta-3-prerelease-20210329
-```
-
-_Note:_ `-v /e2e/uploads:/e2e/uploads` _is optional in case you are testing browser uploads on your 
-web app you will probably need to share a directory for this._
-
-This command line for Opera or Chrome is almost the same, only remember to replace the image name for 
-`node-opera` or `node-chrome`. Remember that the Selenium running container is able to launch either 
-Chrome, Opera or Firefox, the idea around having 3 separate containers, one for each browser is for convenience plus 
-avoiding certain `:focus` issues your web app may encounter during end-to-end test automation.
-
-_Note: Since a Docker container should not preserve state and spawning a new one takes less than 3 seconds you 
-will likely want to remove containers after each end-to-end test with_ `--rm` _command. You need to think of your 
-Docker containers as single processes, not as running virtual machines._
-
 ___
 
 ## Waiting for the Grid to be ready
@@ -603,37 +576,34 @@ ___
 
 ## Debugging
 
-In the event you wish to see what the browser is doing, you can check what is going inside by connecting to the VNC 
-server running on port 5900 inside the browser container. 
+This project uses [x11vnc](https://github.com/LibVNC/x11vnc) as VNC server to allow users inspect what is happening
+inside the container. Users can connect to this server in two ways:
+
+### Using a VNC client
 
-You are free to map that port to any free external port that you wish. Keep in mind that you will only be able to run 
-one node per port. If you wish to include a second node (or more), you will have to use different ports.
+The VNC server is listening to port 5900, you can use a VNC client and connect to it. Feel free to map port 5900 to 
+any free external port that you wish.
 
-The internal 5900 port will need to remain the same because that is the configured port for the VNC server 
-running inside the container.
+The internal 5900 port remains the same because that is the configured port for the VNC server running inside the container.
 
 Here is an example with the standalone images, the same concept applies to the node images.
 ``` bash
 $ docker run -d -p 4444:4444 -p 5900:5900 -v /dev/shm:/dev/shm selenium/standalone-chrome:4.0.0-beta-3-prerelease-20210329
-$ docker run -d -p 4444:4444 -p 5900:5900 -v /dev/shm:/dev/shm selenium/standalone-edge:4.0.0-beta-3-prerelease-20210329
-$ docker run -d -p 4445:4444 -p 5901:5900 -v /dev/shm:/dev/shm selenium/standalone-firefox:4.0.0-beta-3-prerelease-20210329
-$ docker run -d -p 4446:4444 -p 5902:5900 -v /dev/shm:/dev/shm selenium/standalone-opera:4.0.0-beta-3-prerelease-20210329
+$ docker run -d -p 4444:4444 -p 5901:5900 -v /dev/shm:/dev/shm selenium/standalone-edge:4.0.0-beta-3-prerelease-20210329
+$ docker run -d -p 4445:4444 -p 5902:5900 -v /dev/shm:/dev/shm selenium/standalone-firefox:4.0.0-beta-3-prerelease-20210329
+$ docker run -d -p 4446:4444 -p 5903:5900 -v /dev/shm:/dev/shm selenium/standalone-opera:4.0.0-beta-3-prerelease-20210329
 ```
 
 Then, you would use in your VNC client:
 - Port 5900 to connect to the Chrome container
-- Port 5901 to connect to the Firefox container
-- Port 5902 to connect to the Opera container
+- Port 5901 to connect to the Edge container
+- Port 5902 to connect to the Firefox container
+- Port 5903 to connect to the Opera container
 
-In case you have [RealVNC](https://www.realvnc.com/) binary `vnc` in your path, you can always take a look, select view 
-only to avoid messing around your tests with an unintended mouse click or keyboard interrupt:
-``` bash
-$ ./bin/vncview 127.0.0.1:5900
-```
-
-When you are prompted for the password it is `secret`. If you wish to change this then you should either change 
+If you get a prompt asking for a password, it is: `secret`. If you wish to change this, you should either change 
 it in the `/NodeBase/Dockerfile` and build the images yourself, or you can define a Docker image that derives from 
 the posted ones which reconfigures it:
+
 ``` dockerfile
 #FROM selenium/node-chrome:4.0.0-beta-3-prerelease-20210329
 #FROM selenium/node-edge:4.0.0-beta-3-prerelease-20210329
@@ -646,6 +616,30 @@ RUN x11vnc -storepasswd <your-password-here> /home/seluser/.vnc/passwd
 
 If you want to run VNC without password authentication you can set the environment variable `VNC_NO_PASSWORD=1`.
 
+### Using your browser (no VNC client is needed)
+
+This project uses [noVNC](https://github.com/novnc/noVNC) to allow users inspect visually container activity with
+their browser. This might come handy if you cannot install a VNC client on your machine. Port 7900 is used to start
+noVNC, so you will need to connect to that port with your browser.
+
+Similarly to the previous section, feel free to map port 5900 to any free external port that you wish.
+
+Here is an example with the standalone images, the same concept applies to the node images.
+``` bash
+$ docker run -d -p 4444:4444 -p 7900:7900 -v /dev/shm:/dev/shm selenium/standalone-chrome:4.0.0-beta-3-prerelease-20210329
+$ docker run -d -p 4444:4444 -p 7901:7900 -v /dev/shm:/dev/shm selenium/standalone-edge:4.0.0-beta-3-prerelease-20210329
+$ docker run -d -p 4445:4444 -p 7902:7900 -v /dev/shm:/dev/shm selenium/standalone-firefox:4.0.0-beta-3-prerelease-20210329
+$ docker run -d -p 4446:4444 -p 7903:7900 -v /dev/shm:/dev/shm selenium/standalone-opera:4.0.0-beta-3-prerelease-20210329
+```
+
+Then, you would use in your browser:
+- http://localhost:7900/ to connect to the Chrome container
+- http://localhost:7901/ to connect to the Edge container
+- http://localhost:7902/ to connect to the Firefox container
+- http://localhost:7903/ to the Opera container
+
+If you get a prompt asking for a password, it is: `secret`.
+
 ___
 
 ## Troubleshooting
@@ -655,11 +649,20 @@ All output gets sent to stdout, so it can be inspected by running:
 $ docker logs -f <container-id|container-name>
 ```
 
-You can turn on debugging by passing environment variable to the hub and the nodes containers:
+You can increase the log output by passing environment variable to the containers:
 ```
-GRID_DEBUG=true
+SE_OPTS="--log-level FINE"
 ```
 
+### `-v /dev/shm:/dev/shm` or `--shm-size 2g`
+
+Why is `-v /dev/shm:/dev/shm` or `--shm-size 2g` necessary?
+> This is a known workaround to avoid the browser crashing inside a docker container, here are the documented issues for
+[Chrome](https://code.google.com/p/chromium/issues/detail?id=519952) and [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1338771#c10).
+The shm size of 2gb is arbitrary but known to work well, your specific use case might need a different value, it is recommended
+to tune this value according to your needs. Along the examples `-v /dev/shm:/dev/shm` will be used, but both are known to work.
+
+
 ### Headless
 
 If you see the following selenium exceptions: