How can I enable WebGL testing?

[zakhenry]

• Operating System: Linux (ubuntu in docker)
• Cypress Version: 1.4.1
• Browser Version: unsure (electron in CI)

Is this a Feature or Bug?

Feature

Current behavior:

WebGL is not supported due to app.disableHardwareAcceleration()

Desired behavior:

e2e testing of components with GPU accelerated WebGL components is possible.

How to reproduce:

Create a project with a webgl component (e.g. Three.js or Babylon.js) See that WebGL reports that it is disabled

[brian-mann]

You're right that you won't be able to run this in Electron - however you should be able to run this in Chrome no problem.

Can you install chrome or use our docker containers in CI? Then it should work with cypress run --browser chrome

[zakhenry]

@brian-mann hmm I did try using chrome. I'll see if I can get an example repo up & running on public gitlab and report back

[zakhenry]

@brian-mann yup you're right, Chrome works fine. It must be something in my config.

See https://gitlab.com/zakhenry/cypress-bug/pipelines if you're interested, (attached screenshots below)

With Chrome:

With default (Electron):

[gkrizek]

@zakhenry @brian-mann I'm running into the same problem. I can't test WebGL components when using Electron. I would really like to continue to use Electron because of the video recording capability.

The strange thing is, when running the test with Electron on an OSX host or in a Linux Virtual Machine, all the WebGL pieces work fine. It's only broken when running in a Docker container. My base image in ubuntu:trusty but I've also tried xenial with no success. I have also read some people using xvfb as a work around, but that too doesn't work.

Do you have any ideas why WebGL works in Electron on any OS that's not in Docker?

[brian-mann]

@gkrizek we'll have a more comprehensive answer for you shortly - but the gist is this...

• WebGL requires GPU acceleration (which is why it works on OSX)
• GPU acceleration is disabled when running in linux (on both Electron + Chrome)
• There are WebGL components that have to be enabled in Electron (we're looking into this)
• Recording video when running in Chrome is being worked on right now

The reason GPU acceleration is disabled when running in linux is because linux is literally a shit-show of GPU support and Chromium itself has lots of fallbacks to detect incompatible drivers. The only consistent way for us to make Chrome / Chromium run was always turning off GPU support in linux.

We can likely make a flag that partially enables this - but there is no guarantee it will work in the docker container, and will be affected by the underlying capabilities of the hardware. Docker / Linux running headlessly were not really designed for this use case - and the only workaround here may be to run it in OSX / Windows in CI with CircleCI or Appveyor. We're looking into this and will try to give you some guidance.

As a footnote - we already enable xvfb in Linux - Cypress automatically orchestrates everything under the hood to make all this possible.

I'll have more details for you once we do more research. It may be a simple fix after all, but possibly not.

[rafael-anachoreta]

Hi @brian-mann!
I'm trying to run some visual regression tests, and parts of the site require GPU acceleration to display properly.

This is what I've tried:

    on('before:browser:launch', (browser = {}, args) => {
        if (browser.name === 'chrome') {
            const index = args.indexOf('--disable-gpu');

            if (index > -1) {
                args.splice(index, 1);
            }
            args.push('--ignore-gpu-blacklist');
            console.log(args);

            return args;
        }
    });

And this is what is being logged when running in a Linux container:

[ '--test-type',
  '--ignore-certificate-errors',
  '--start-maximized',
  '--silent-debugger-extension-api',
  '--no-default-browser-check',
  '--no-first-run',
  '--noerrdialogs',
  '--enable-fixed-layout',
  '--disable-popup-blocking',
  '--disable-password-generation',
  '--disable-save-password-bubble',
  '--disable-single-click-autofill',
  '--disable-prompt-on-repos',
  '--disable-background-timer-throttling',
  '--disable-renderer-backgrounding',
  '--disable-renderer-throttling',
  '--disable-restore-session-state',
  '--disable-translate',
  '--disable-new-profile-management',
  '--disable-new-avatar-menu',
  '--allow-insecure-localhost',
  '--reduce-security-for-testing',
  '--enable-automation',
  '--disable-infobars',
  '--disable-device-discovery-notifications',
  '--disable-site-isolation-trials',
  '--metrics-recording-only',
  '--disable-prompt-on-repost',
  '--disable-hang-monitor',
  '--disable-sync',
  '--disable-web-resources',
  '--safebrowsing-disable-auto-update',
  '--safebrowsing-disable-download-protection',
  '--disable-client-side-phishing-detection',
  '--disable-component-update',
  '--disable-default-apps',
  '--no-sandbox',
  '--proxy-server=http://localhost:36365',
  '--ignore-gpu-blacklist' ]

But hardware acceleration is still not working 😞
Any suggestions?

[mabedan]

I have the exact same issue. I tried a very similar approach, of adding ignore-gpu-blacklist and removing disable-gpu. It's partly successful, as page loads and actually shows my 3d model (I verified through screenshots), but fails shortly after (milliseconds after).
I also added enable-logging to the chrome flags, and was able to capture this error consistently:

[748:748:1124/165926.808040:ERROR:gles2_cmd_decoder.cc(3357)] ContextResult::kFatalFailure: fail_if_major_perf_caveat + swiftshader

the code from chromium suggests fail_if_major_perf_caveat flag is used to avoid having the page being slowed down too much under certain circumstances regarding gpu.

[nickatnight]

This is a huge blocker for my team and I, as our tests only fail when running from containers (CodeFresh). Anyone have a work around for this yet?

[zhex900]

Any solution yet? Is it possible to use a Linux machine that supports GPU acceleration?

As a workaround, I managed to run the WebGL tests on windows instances in EC2. The tests must be run in chrome.

[anisometropie]

@rafael-anachoreta ’s solution actually worked for me to enable WebGL in chromium 73

I just edited cypress/plugins/index.js like this:

module.exports = (on, config) => {
  on('before:browser:launch', (browser = {}, args) => {
    if (browser.name === 'chromium') {
      const newArgs = args.filter(arg => arg !== '--disable-gpu')
      newArgs.push('--ignore-gpu-blacklist')
      return newArgs;
    }
  });
};

[janakdr]

Has anyone had success enabling WebGL in electron using a similar workaround to the argument mangling? Setting args['webgl'] = true didn't work for me.

[kaphula]

@rafael-anachoreta ’s solution actually worked for me to enable WebGL in chromium 73

I just edited cypress/plugins/index.js like this:

module.exports = (on, config) => {
  on('before:browser:launch', (browser = {}, args) => {
    if (browser.name === 'chromium') {
      const newArgs = args.filter(arg => arg !== '--disable-gpu')
      newArgs.push('--ignore-gpu-blacklist')
      return newArgs;
    }
  });
};

Could you elaborate a bit how to make this work? I initialized Cypress for my project but the cypress folder does not have a folder called plugins (and it does not make a difference if I add that script at cypress/plugins/index.js).

Attempting to run cypress with Chromium on Linux with WebGL support enabled.