After update to cypress:including_4 + we have just a blank window for Chrome browser

[seyfer]

Current behavior:

Using Docker image cypress:including_3.8.0 - everything works fine.

We use this mapping to make cypress open work

cypress:
    volumes:
        # cypress X11 mapping
        - /tmp/.X11-unix:/tmp/.X11-unix
        - /var/run/dbus/system_bus_socket:/var/run/dbus/system_bus_socket
    environment:
        # cypress X11 mapping
        - DISPLAY=unix${DISPLAY}

The host OS is Ubuntu 18.04, latest updates.

But after update to cypress:including_4 + we have just a blank screen for Chrome browser.
Test runner starts without problems, but running any test does not open Chrome, just a blank window appears.

Nevertheless, I can see that the test is running in the console log. We just cannot see it in Chrome.

This is the starting log. I tried with export DEBUG=cypress:* option and cannot see any errors except these.

cypress:server:plugins execute plugin event 'before:browser:launch' Node 'v12.8.1' with args: { channel: 'stable', displayName: 'Chrome', family: 'chromium', isChosen: true, majorVersion: 80, name: 'chrome', path: 'google-chrome', version: '80.0.3987.87', isHeaded: true, isHeadless: false } { preferences: { default: {}, defaultSecure: {}, localState: {} }, args: [ '--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-device-discovery-notifications', '--disable-infobars', '--autoplay-policy=no-user-gesture-required', '--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', '--use-fake-ui-for-media-stream', '--use-fake-device-for-media-stream', '--disable-ipc-flooding-protection', '--disable-backgrounding-occluded-window', '--disable-breakpad', '--password-store=basic', '--use-mock-keychain', '--disable-gpu', '--no-sandbox', '--proxy-server=http://localhost:43005', '--proxy-bypass-list=<-loopback>', '--remote-debugging-port=38611', '--remote-debugging-address=127.0.0.1' ], extensions: [] } undefined +0ms
    '--ignore-certificate-errors',
    '--ignore-certificate-errors',
  cypress:launcher spawning browser { channel: 'stable', displayName: 'Chrome', family: 'chromium', isChosen: true, majorVersion: 80, name: 'chrome', path: 'google-chrome', version: '80.0.3987.87', isHeaded: true, isHeadless: false } with args about:blank --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-device-discovery-notifications --disable-infobars --autoplay-policy=no-user-gesture-required --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 --use-fake-ui-for-media-stream --use-fake-device-for-media-stream --disable-ipc-flooding-protection --disable-backgrounding-occluded-window --disable-breakpad --password-store=basic --use-mock-keychain --disable-gpu --no-sandbox --proxy-server=http://localhost:43005 --proxy-bypass-list=<-loopback> --remote-debugging-port=38611 --remote-debugging-address=127.0.0.1 --window-size=1920,1080 --disable-gpu --no-sandbox --disable-setuid-sandbox --disable-dev-shm-usage --disable-features=VizDisplayCompositor --load-extension=/root/.config/Cypress/cy/production/browsers/chrome-stable/interactive/CypressExtension,/root/.cache/Cypress/4.0.2/Cypress/resources/app/packages/extension/theme --user-data-dir=/root/.config/Cypress/cy/production/browsers/chrome-stable/interactive --disk-cache-dir=/root/.config/Cypress/cy/production/browsers/chrome-stable/interactive/CypressCache +1ms
  cypress:network:connect received error on connect, retrying { iteration: 0, delay: 100, err: Error: connect ECONNREFUSED 127.0.0.1:38611     at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1056:14) { errno: 'ECONNREFUSED', code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 38611 } } +15s
  cypress:network:connect received error on connect, retrying { iteration: 1, delay: 100, err: Error: connect ECONNREFUSED 127.0.0.1:38611     at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1056:14) { errno: 'ECONNREFUSED', code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 38611 } }

Desired behavior:

Chrome browser opens normally with Cypress interface and runs the test as it works with Docker image cypress/included:3.8.0

Test code to reproduce

Use cypress/uncluded:4.0.2, have such docker config

cypress:
  image: cypress/included:4.0.2
  restart: always
  entrypoint: sh -c
  command: ["sleep infinity"]
  depends_on:
      - varnish
  security_opt:
      # make chrome security happy
      - apparmor:unconfined
  volumes:
      - ./data/www/symfony:/e2e
  working_dir: /e2e

cypress:
    volumes:
        # cypress X11 mapping
        - /tmp/.X11-unix:/tmp/.X11-unix
        - /var/run/dbus/system_bus_socket:/var/run/dbus/system_bus_socket
    environment:
        # cypress X11 mapping
        - DISPLAY=unix${DISPLAY}

Run the command such as

xhost + && docker-compose exec cypress bash -l -c "export DEBUG=cypress:* && cypress open --browser chrome --project cypress/backend/"

It works with 3.8.0
It doesn't for 4.0.2

I think that issue is the newer chrome browser. Something changed starting from Chrome 78.
These are options which worked for us with Chrome 77

launchOptions.args.push('--window-size=1920,1080');
launchOptions.args.push('--disable-gpu');
launchOptions.args.push('--no-sandbox');
launchOptions.args.push('--disable-setuid-sandbox');
launchOptions.args.push('--disable-dev-shm-usage');
launchOptions.args.push('--disable-features=VizDisplayCompositor');

Now it doesn't work with or without these options.
With Cypress builds with Chrome 78-80 we cannot connect to Chrome anymore?
What options could be missing?

Versions

Ubuntu 18.04, Chrome 80, Cypress 4.0.2

[jennifer-shehane]

Can you open the DevTools? Are there any errors printed there when the browser opens?

We have tests with the latest Chrome browser - this is running in 80.0.3987.87, which we have tested.

I would recommend removing options from the docker config to see which ones are affecting the run.

cc @bahmutov any thoughts?

[jbergknoff-rival]

I have a similar issue. I'm running cypress open in Docker (cypress/included:4.0.2). It opens the Cypress app (where I can browse tests, view settings, etc.), but when I go to run a test using Chrome (version 80), the Chrome window is blank. No window controls (e.g. minimize/maximize). The tests do run, but the browser stays blank.

If I select Electron (v78) from the browser dropdown, and run my tests that way, then the browser appears and works as expected.

Aside: cypress open --browser electron doesn't seem to have any effect. The dropdown still defaults to Chrome. Should it have an effect?

[milesrichardson]

Also having this issue with only 4.0.2. Extremely minimal setup, using the spec.js from https://github.com/bahmutov/demo-docker-cypress-included

In fact if you change the version in cy-open.sh from that repository to 4.0.2, you should be able to replicate it.

[milesrichardson]

I believe this is related (and may be the issue itself): https://bugs.chromium.org/p/chromium/issues/detail?id=1026950

[milesrichardson]

I managed to fix it.

You need to set three environment variables, either when running via docker, or within the docker image build:

export QT_X11_NO_MITSHM=1
export _X11_NO_MITSHM=1
export _MITSHM=0

or

docker run -it \
  -v $PWD:/e2e \
  -v /tmp/.X11-unix:/tmp/.X11-unix \
  -w /e2e \
  -e DISPLAY=host.docker.internal:0 \
  -e QT_X11_NO_MITSHM=1 \
  -e _X11_NO_MITSHM=1 \
  -e _MITSHM=0 \
  --entrypoint cypress \
  cypress/included:4.0.2 open --project .

Explanation

The bug only happens when you are using a remote X11 interface, for example socat with XQuartz on Mac and X11 in the docker container. The chromium issue has a hint: MIT-SHM is the problem; specifically, Chrome attempting to use MIT-SHM when it does not exist. MIT-SHM has to do with shared memory of an X11 client and host. Obviously you can't share memory over a remote connection, so we want it to be disabled. These environment variables disable MIT-SHM and thus, appear to fix the problem. (more info here: https://unix.stackexchange.com/questions/136606/mit-shared-memory-extension-or-mit-shm-over-ssh)

I spent all day today exploring browser automation frameworks. I found this bug in Cypress and then went to look at playwright, where I found the same bug. This solution fixes both.

The docker example + docker images should probably be updated

[jennifer-shehane]

@milesrichardson Thanks for the detailed response and debugging.

We will move this into our docker-images repo since this is more related to environment setup than the Cypress product itself.

[bahmutov]

I tried https://github.com/bahmutov/cypress-open-from-docker-compose with Cypress 4.0.2 and Chrome browser with local X11 forwarding and saw the problem. Setting the env variables to disable shared memory fixed the problem. Will add these variables and notes to the new Docker containers.

[seyfer]

As I understand the problem fixed in the new https://github.com/cypress-io/cypress-docker-images/tree/master/included/4.1.0 container. Amazing, great job! Thanks.