Selenium Docker: Viewing tests as they run

Use Case

As a developer I want to observe tests as they run to make sure tested pages are reachable and open completely.

Why?

First of all because it is insanely cool :). Secondly it is very useful to see that what you're testing actually works. Considering that Docker container is mostly a "black box", any way to pick inside that box would be super useful.

How would that be possible?

Luckily docker-selenium offers a debug version of their Selenium containers: selenium/standalone-chrome-debug and selenium/standalone-firefox-debug. Both versions are identical in functionality to non-debug ones with exception that they come bundled with VNC server. With VNC server running inside a Docker container we can see and interact with internal OS and/or browser. With that said, all you need to do is get a VNC viewer such as this one and once tests are started open it up and connect to your localhost. VNC normally runs on port 5900 and we will need to map/expose that port in our docker configuration.

Test process flow explained

1. wdio-docker-service will start a Selenium Docker image with debug feature enabled (ex. selenium/standalone-chrome-docker).
2. Once service is running (normally on port 4444), tests will run (inside a container).
3. Open up your VNC viewer and point it localhost:5900 to observe tests running.
4. Once tests are finished wdio will report back results.

How do I configure that?

This setup resembles regular selenium-docker setup with exception of image used and an addition of VNC port.

Example:

//wdio.conf.js
exports.config = {
    host: 'localhost',
    path: '/wd/hub', // Required to work with wdio v6
    specs: [
        './test/*.js'
    ],

    capabilities: [{
        browserName: 'chrome'
    }],

    sync: true,
    logLevel: 'debug',

    baseUrl: 'http://webdriver.io',

    waitforTimeout: 10000,
    connectionRetryTimeout: 90000,
    connectionRetryCount: 3,

    framework: 'mocha',
    mochaOpts: {
        ui: 'bdd'
    },

    services: ['docker'],
    dockerLogs: './',
    dockerOptions: {
        image: 'selenium/standalone-chrome-debug',
        healthCheck: 'http://localhost:4444',
        options: {
            p: ['4444:4444', '5900:5900'],
            shmSize: '2g'
        }
    },
    onDockerReady: function() {
      //run script to start VNC?
    }
};

Important parts here are image and p.

• image - we use debug version of the selenium-docker-chrome which is selenium/standalone-chrome-debug
• p - we expose additional port 5900 to permit VNC client connection