Issue with Cypress Recording Video in Docker Container with GPU Acceleration

[arthurgubaidullin]

Current Behavior

I have created a React application using the Vite bundler, and I've integrated Cypress for end-to-end testing. However, I've encountered an issue where Cypress, by default, improperly records videos within a Docker container when GPU acceleration for the browser is enabled. The recorded video appears blank with no content visible in the browser window.

Expected Behavior

There should be an automated resolution to address this problem, ensuring proper video recording even when GPU acceleration is enabled within a Docker container.

GitHub Repo

https://github.com/arthurgubaidullin/ka-ledger/tree/41194197a9aced8848798d03259b6f42327deae3

Steps to Reproduce

1. Clone repository to dev container;
2. Run nx run web-app-e2e:e2e:production;
3. Check video.

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 18.16.1
   OS     : linux-arm64
   npm    : 9.5.1
   
   nx (global)        : 16.7.4
   nx                 : 16.7.4
   @nx/js             : 16.7.4
   @nx/linter         : 16.7.4
   @nx/workspace      : 16.7.4
   @nx/cypress        : 16.7.4
   @nx/devkit         : 16.7.4
   @nx/eslint-plugin  : 16.7.4
   @nx/react          : 16.7.4
   @nrwl/tao          : 16.7.4
   @nx/vite           : 16.7.4
   @nx/web            : 16.7.4
   @nx/webpack        : 16.7.4
   typescript         : 5.1.6

Failure Logs

> nx run web-app-e2e:e2e:production

  ➜  Local:   http://localhost:4200/
DevTools listening on ws://127.0.0.1:42637/devtools/browser/20ae0deb-a186-4e3e-8a8f-fb12cc5e648c
[20224:0827/111049.874526:ERROR:gpu_memory_buffer_support_x11.cc(44)] dri3 extension not supported.
================================================================================
  (Run Starting)
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        12.17.4                                                                        │
  │ Browser:        Electron 106 (headless)                                                        │
  │ Node Version:   v18.16.1 (/usr/local/bin/node)                                                 │
  │ Specs:          1 found (app.cy.ts)                                                            │
  │ Searched:       src/**/*.cy.{js,jsx,ts,tsx}                                                    │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                    
  Running:  app.cy.ts                                                                       (1 of 1)

  web-app
    ✓ should display welcome message (360ms)
  1 passing (373ms)
  (Results)
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      1                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     app.cy.ts                                                                        │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
  (Video)
  -  Started compressing: Compressing to 32 CRF                                                     
  -  Finished compressing: 0 seconds                                                 
  -  Video output: /workspaces/ka-ledger/dist/cypress/apps/web-app-e2e/videos/app.cy.ts.mp4
================================================================================
  (Run Finished)
       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  app.cy.ts                                369ms        1        1        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        369ms        1        1        -        -        -  

 ———————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Successfully ran target e2e for project web-app-e2e (6s)

Package Manager Version

npm 9.5.1

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

Disabling GPU acceleration in the Cypress configuration resolves the problem.

import { defineConfig } from 'cypress';
import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';

export default defineConfig({
  e2e: (() => {
    const config = nxE2EPreset(__dirname, {
      bundler: 'vite',
    }) as Cypress.PluginConfigOptions;

    return {
      ...config,
      setupNodeEvents: async (on, _config) => {
        await config.setupNodeEvents(on, _config);

        on('before:browser:launch', (browser, launchOptions) => {
          if (browser.name == 'chrome') {
            launchOptions.args.push('--disable-gpu');
          }
          return launchOptions;
        });
      },
    };
  })(),
});

[arthurgubaidullin]

Video:

app.cy.ts.mp4

[barbados-clemens]

Hi @arthurgubaidullin I just tested your repo in cypress v13
and this is the video I got which looks to be working now.

app.cy.ts.mp4

After the Cypress v13 support PR lands (#18885) can you confirm the behavior on your side?

[arthurgubaidullin]

Hi @barbados-clemens, have you tested in a Docker container?

Yes, after the new release, I will check.

[barbados-clemens]

@arthurgubaidullin can you provide the container setup you were using? I didn't see one in the repo you linked.

[arthurgubaidullin]

@barbados-clemens I use Visual Studio Code Dev Containers.

The docker file is in .devcontainer folder.

[arthurgubaidullin]

@barbados-clemens Thank you.

I checked. Fixed in Nx 16.8.0.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.