Question

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

从阅读主题看来，我似乎需要使用Xvfb运行“真正的”浏览器。 Xvfb是“Linux使用的显示系统。它为图形程序提供了一个虚假的显示缓冲区，从而允许任何程序无头地运行。” 〜Headless Browser Testing With Xvfb

我正在使用此泊坞窗图片：docker-protractor-headless，其中包含Xvfb。我有一个JS片段，它将在浏览器中检测WebGL支持，它将导致html元素为true或false。当我在开发环境中运行JS片段时，它是真的（如预期的那样）。然而，测试失败了。

问题：如何在支持WebGL的情况下运行E2E测试？

我的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;

E2E测试：

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.

Javascript检查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();

测试浏览器功能（通过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' => '' }

Answer 1

在我看来，这个主题也可以帮助你：Can you run GUI apps in a docker container?

我认为你可以像我们尝试的sakuli项目一样尝试。您可以将这些Dockerfile.sakuli.ubuntu.xfce.java视为良好的起点。示例java-selenium-example显示了如何在这种容器中执行基于maven的java测试。同样的原则也适用于protactors测试。

也许你需要运行更高shm-size的容器。对于这个基于画布的站点，这是必要的。您可以尝试使用您的页面：

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

启动后通过：http://localhost:6901/?password=vncpassword连接，您将查看如下所示的容器：

如何使用无头镀铬和WebGL支持运行E2E测试

1 个答案: