Protractor 如何使用支持WebGL的无头chrome运行E2E测试

我正在尝试在CI环境中使用WebGL支持运行E2E测试

通过阅读这个主题，我似乎需要使用Xvfb运行一个“真正的”浏览器。Xvfb是“Linux使用的显示系统。它为图形程序提供了一个伪显示缓冲区以供写入，从而允许任何程序无头运行。”~

我正在使用这个docker映像：其中包括Xvfb。我有一个JS代码段，它将检测浏览器中的WebGL支持，它将导致html元素为true或false。当我在开发环境中运行JS代码段时，它是真的（如预期的那样）。然而，测试失败了

问题：如何使用WebGL支持运行E2E测试

我的量角器.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;

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);
        });
      });
    });
});

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

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();

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' => '' }

E2E测试：

'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;

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);
        });
      });
    });
});

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

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();

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' => '' }

测试结果失败：

'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;

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);
        });
      });
    });
});

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

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();

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' => '' }

检查WebGL的Javascript:

'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;

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);
        });
      });
    });
});

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

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();

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' => '' }

---

在我看来，这条线索也可以帮助你：

我想你可以像我们在sakuli项目中一样尝试。你可以把这些作为一个很好的起点。该示例展示了如何在这种容器中执行基于maven的java测试。同样的原则也适用于Proactors测试

也许你需要用更高的速度运行容器。对于这个基于画布的站点，这是必要的。您只需在页面上试用即可：

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

启动后，通过连接：查看容器，如下所示：

---

在我看来，此线程还可以帮助您：

我想你可以像我们在sakuli项目中一样尝试。你可以把这些作为一个很好的起点。该示例展示了如何在这种容器中执行基于maven的java测试。同样的原则也适用于Proactors测试

也许你需要用更高的速度运行容器。对于这个基于画布的站点，这是必要的。您只需在页面上试用即可：

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

启动后，通过连接：查看容器，如下所示：