How to run E2E tests using headless chrome with WebGL support

Question

I am trying to run E2E tests with WebGL support inside a CI environment.

From reading up on the topic it seems that I need to run a 'real' browser using Xvfb. Xvfb is "the display system used by Linux. It provides a fake display buffer for graphical programs to write to, thus allowing any program to run headlessly." ~ Headless Browser Testing With Xvfb

I am using this docker image: docker-protractor-headless which includes Xvfb. I have a JS snippet that will detect WebGL support in the browser, it will result in an html element that is true or false. When I run the JS snippet in a dev environment it is true (as expected). However the test fails.

Question: How can I run E2E tests with WebGL support?

My protractor.config:

'use strict';

var config = {
  debug: true,
  logLevel: 'DEBUG',
  allScriptsTimeout: 110000,
  baseUrl: 'http://localhost:' + (process.env.PORT || '9000'),
  specs: [
    'e2e/**/*.spec.js'
  ],
  capabilities: {
    'browserName': 'chrome',
    chromeOptions: {
      args: ['--headless', '--window-size=1200x800']
      // args: ['--headless', '--window-size=1200x800', '--no-sandbox'] // also tried with the no-sandbox flag
    }
  }
};

config.params.baseUrl = config.baseUrl;
exports.config = config;

The E2E tests:

describe("check for webgl", function() {

    it("browser should support webgl", function() {

      browser.get("#/login").then(function() {

      }).then(function(title) {
        browser.waitForAngular();
        browser.sleep(6000);

        var foo = element(by.model('vm.foo'));

        foo.evaluate('vm.foo').then(function (value) {
          expect(value).toBe(true);
        });
      });
    });
});

Failing Test result:

Failures:
1) check for webgl browser should support webgl
  Message:
    Expected false to be true.

Javascript checking for WebGL:

function webgl_detect(return_context) {
      if (!!window.WebGLRenderingContext) {
          var canvas = document.createElement("canvas"),
               names = ["webgl", "experimental-webgl", "moz-webgl", "webkit-3d"],
             context = false;

          for(var i=0;i<4;i++) {
              try {
                  context = canvas.getContext(names[i]);
                  if (context && typeof context.getParameter == "function") {
                      // WebGL is enabled
                      if (return_context) {
                          // return WebGL object if the function's argument is present
                          return {name:names[i], gl:context};
                      }
                      // else, return just true
                      return true;
                  }
              } catch(e) {}
          }

          // WebGL is supported, but disabled
          return false;
      }

      // WebGL not supported
      return false;
    }


    this.foo = webgl_detect();

Test browser capabilities (via modernizr):

Capabilities {
  'applicationCacheEnabled' => false,
  'rotatable' => false,
  'mobileEmulationEnabled' => false,
  'networkConnectionEnabled' => false,
  'chrome' => { chromedriverVersion: '2.32.498513 (2c63aa53b2c658de596ed550eb5267ec5967b351)',
  userDataDir: '/tmp/.org.chromium.Chromium.0sDOso' },
  'takesHeapSnapshot' => true,
  'pageLoadStrategy' => 'normal',
  'databaseEnabled' => false,
  'handlesAlerts' => true,
  'hasTouchScreen' => false,
  'version' => '59.0.3071.115',
  'platform' => 'LINUX',
  'browserConnectionEnabled' => false,
  'nativeEvents' => true,
  'acceptSslCerts' => true,
  'webdriver.remote.sessionid' => '66060cd4-68fc-4142-a524-a348bbf44de2',
  'locationContextEnabled' => true,
  'webStorageEnabled' => true,
  'browserName' => 'chrome',
  'takesScreenshot' => true,
  'javascriptEnabled' => true,
  'cssSelectorsEnabled' => true,
  'setWindowRect' => true,
  'unexpectedAlertBehaviour' => '' }

score 2 · Answer 1 · answered Apr 18 '18 at 15:34

In my opinion this thread can also help you: Can you run GUI apps in a docker container?

I think you can try the same as we tried with our sakuli project. You can take a look at these Dockerfile.sakuli.ubuntu.xfce.java as good starting point. The example java-selenium-example shows how you can execute maven based java test in that kind of containers. The same principle would be working for protactors tests.

Maybe you need to run the containers with a higher shm-size. For this canvas based site it was necessary. You just can try it with your page:

docker run --shm-size=256m -it -p 6901:6901 consol/centos-xfce-vnc chromium-browser http://map.norsecorp.com/

After the startup connect via: http://localhost:6901/?password=vncpassword and you will look into the container like shown here:

How to run E2E tests using headless chrome with WebGL support

1 Answers1