Cypress never get past loading screen on Ubuntu - node.js

I have created a new React project using
npx create-react-app virtual-office
I then installed a few things like styled-components, react-test-library etc
I then installed cypress with
yarn add -D cypress
When I try running cypress from the project directory with the command
./node_modules/.bin/cypress open
The cypress window opens but the spinner stays up and doesn't load any further.
Running cypress with the debugger turned on it looks like it can find the browser (see the end of the question for the output of the debugger). If I run cypress with the following command I get the same error
yarn run cypress open -b /usr/local/bin/chromium
I can open the Chromium browser with the command
/usr/local/bin/chromium
The version of Chromium is 81.0.4044.92
The command ls -la /usr/local/bin/c* gives the result
lrwxrwxrwx 2 root root 13 Apr 16 10:45 /usr/local/bin/chromium -> /usr/bin/snap
I have also run the commands
node_modules/.bin/cypress cache clear
node_modules/.bin/cypress install
node_modules/.bin/cypress open
And I get the same issue, the Cypress window opens, but no content loads.
What am I doing wrong?
Here are the logs from running the command
DEBUG=cypress:* yarn run cypress open -b /usr/local/bin/chromium &> cypress.log
yarn run v1.21.1
$ /home/luke/projects/virtual-office/node_modules/.bin/cypress open -b /usr/local/bin/chromium
2020-04-16T13:23:16.050Z cypress:cli:cli cli starts with arguments ["/usr/bin/node","/home/luke/projects/virtual-office/node_modules/.bin/cypress","open","-b","/usr/local/bin/chromium"]
2020-04-16T13:23:16.051Z cypress:cli NODE_OPTIONS is not set
2020-04-16T13:23:16.052Z cypress:cli:cli program parsing arguments
2020-04-16T13:23:16.052Z cypress:cli:cli opening Cypress
2020-04-16T13:23:16.149Z cypress:cli parsed cli options { browser: '/usr/local/bin/chromium' }
2020-04-16T13:23:16.149Z cypress:cli opening from options {"browser":"/usr/local/bin/chromium","project":"/home/luke/projects/virtual-office"}
2020-04-16T13:23:16.149Z cypress:cli command line arguments ["--browser","/usr/local/bin/chromium","--project","/home/luke/projects/virtual-office"]
2020-04-16T13:23:16.149Z cypress:cli verifying Cypress app
2020-04-16T13:23:16.150Z cypress:cli checking environment variables
2020-04-16T13:23:16.153Z cypress:cli checking if executable exists /home/luke/.cache/Cypress/4.4.0/Cypress/Cypress
2020-04-16T13:23:16.154Z cypress:cli Binary is executable? : true
2020-04-16T13:23:16.155Z cypress:cli binaryDir is /home/luke/.cache/Cypress/4.4.0/Cypress
2020-04-16T13:23:16.155Z cypress:cli Reading binary package.json from: /home/luke/.cache/Cypress/4.4.0/Cypress/resources/app/package.json
2020-04-16T13:23:16.163Z cypress:cli Found binary version 4.4.0 installed in: /home/luke/.cache/Cypress/4.4.0/Cypress
2020-04-16T13:23:16.166Z cypress:cli { verified: true }
2020-04-16T13:23:16.166Z cypress:cli is Verified ? true
2020-04-16T13:23:16.167Z cypress:cli DISPLAY environment variable is set to :1 on Linux
Assuming this DISPLAY points at working X11 server,
Cypress will not spawn own Xvfb
NOTE: if the X11 server is NOT working, Cypress will exit without explanation,
see https://github.com/cypress-io/cypress/issues/4034
Solution: Unset the DISPLAY variable and try again:
DISPLAY= npx cypress run ...
2020-04-16T13:23:16.168Z cypress:cli needs to start own Xvfb? false
2020-04-16T13:23:16.169Z cypress:cli spawning, should retry on display problem? true
2020-04-16T13:23:16.176Z cypress:cli passing DISPLAY :1
2020-04-16T13:23:16.176Z cypress:cli spawning Cypress with executable: /home/luke/.cache/Cypress/4.4.0/Cypress/Cypress
2020-04-16T13:23:16.177Z cypress:cli spawn args [ '--no-sandbox', '--', '--browser', '/usr/local/bin/chromium', '--project', '/home/luke/projects/virtual-office', '--cwd', '/home/luke/projects/virtual-office' ] { detached: false, stdio: 'inherit' }
2020-04-16T13:23:16.368Z cypress:ts Running without ts-node hook in environment "production"
2020-04-16T13:23:16.798Z cypress:server:appdata path: /home/luke/.config/Cypress/cy/production/browsers
2020-04-16T13:23:16.800Z cypress:server:util:node_options NODE_OPTIONS check passed, not forking { NODE_OPTIONS: '--max-http-header-size=1048576 --http-parser=legacy' }
2020-04-16T13:23:16.800Z cypress:server:util:node_options restoring NODE_OPTIONS { NODE_OPTIONS: '--max-http-header-size=1048576 --http-parser=legacy', ORIGINAL_NODE_OPTIONS: undefined }
2020-04-16T13:23:16.989Z cypress:server:cypress starting cypress with argv [ '/home/luke/.cache/Cypress/4.4.0/Cypress/Cypress', '--no-sandbox', '--', '--browser', '/usr/local/bin/chromium', '--project', '/home/luke/projects/virtual-office', '--cwd', '/home/luke/projects/virtual-office' ]
2020-04-16T13:23:16.989Z cypress:server:args argv array: [ '/home/luke/.cache/Cypress/4.4.0/Cypress/Cypress', '--no-sandbox', '--browser', '/usr/local/bin/chromium', '--project', '/home/luke/projects/virtual-office', '--cwd', '/home/luke/projects/virtual-office' ]
2020-04-16T13:23:16.992Z cypress:server:args argv parsed: { _: [ '/home/luke/.cache/Cypress/4.4.0/Cypress/Cypress' ], sandbox: false, browser: '/usr/local/bin/chromium', project: '/home/luke/projects/virtual-office', cwd: '/home/luke/projects/virtual-office', invokedFromCli: true }
2020-04-16T13:23:16.992Z cypress:server:util:proxy found proxy environment variables {}
2020-04-16T13:23:16.992Z cypress:server:args options { _: [ '/home/luke/.cache/Cypress/4.4.0/Cypress/Cypress' ], sandbox: false, browser: '/usr/local/bin/chromium', project: '/home/luke/projects/virtual-office', cwd: '/home/luke/projects/virtual-office', invokedFromCli: true, config: {} }
2020-04-16T13:23:16.992Z cypress:server:args argv options: { _: [ '/home/luke/.cache/Cypress/4.4.0/Cypress/Cypress' ], sandbox: false, browser: '/usr/local/bin/chromium', project: '/home/luke/projects/virtual-office', cwd: '/home/luke/projects/virtual-office', invokedFromCli: true, config: {}, projectRoot: '/home/luke/projects/virtual-office' }
2020-04-16T13:23:16.992Z cypress:server:cypress from argv [ '/home/luke/.cache/Cypress/4.4.0/Cypress/Cypress', '--no-sandbox', '--browser', '/usr/local/bin/chromium', '--project', '/home/luke/projects/virtual-office', '--cwd', '/home/luke/projects/virtual-office' ] got options { _: [ '/home/luke/.cache/Cypress/4.4.0/Cypress/Cypress' ], sandbox: false, browser: '/usr/local/bin/chromium', project: '/home/luke/projects/virtual-office', cwd: '/home/luke/projects/virtual-office', invokedFromCli: true, config: {}, projectRoot: '/home/luke/projects/virtual-office' }
2020-04-16T13:23:17.032Z cypress:server:appdata path: /home/luke/.config/Cypress/cy/production
2020-04-16T13:23:17.074Z cypress:server:cypress starting in mode interactive with options { _: [ '/home/luke/.cache/Cypress/4.4.0/Cypress/Cypress' ], sandbox: false, browser: '/usr/local/bin/chromium', project: '/home/luke/projects/virtual-office', cwd: '/home/luke/projects/virtual-office', invokedFromCli: true, config: {}, projectRoot: '/home/luke/projects/virtual-office' }
2020-04-16T13:23:17.076Z cypress:server:cypress running Electron currently
2020-04-16T13:23:17.122Z cypress:server:appdata path: /home/luke/.config/Cypress/cy/production
2020-04-16T13:23:17.420Z cypress:server:appdata path: /home/luke/.config/Cypress/cy/production/cache
2020-04-16T13:23:18.907Z cypress:server:util:process_profiler current & mean memory and CPU usage by process group:
┌─────────┬───────────────────┬──────────────┬────────────────┬────────────┬────────────────┬──────────┬──────────────┬─────────────┐
│ (index) │ group │ processCount │ pids │ cpuPercent │ meanCpuPercent │ memRssMb │ meanMemRssMb │ maxMemRssMb │
├─────────┼───────────────────┼──────────────┼────────────────┼────────────┼────────────────┼──────────┼──────────────┼─────────────┤
│ 0 │ 'cypress' │ 1 │ '31795' │ 0 │ 0 │ 147.84 │ 147.84 │ 147.84 │
│ 1 │ 'electron-shared' │ 1 │ '31797' │ 0 │ 0 │ 42.06 │ 42.06 │ 42.06 │
│ 2 │ 'other' │ 2 │ '31939, 31940' │ 0 │ 0 │ 3.72 │ 3.72 │ 3.72 │
│ 3 │ 'TOTAL' │ 4 │ '-' │ 0 │ 0 │ 193.63 │ 193.63 │ 193.63 │
└─────────┴───────────────────┴──────────────┴────────────────┴────────────┴────────────────┴──────────┴──────────────┴─────────────┘
2020-04-16T13:23:19.174Z cypress:server:saved_state making saved state from /home/luke/.cache/Cypress/4.4.0/Cypress/resources/app/packages/server
2020-04-16T13:23:19.174Z cypress:server:saved_state for project path /home/luke/projects/virtual-office
2020-04-16T13:23:19.176Z cypress:server:saved_state state path for project /home/luke/projects/virtual-office
2020-04-16T13:23:19.178Z cypress:server:appdata path: /home/luke/.config/Cypress/cy/production/projects/virtual-office-c3059dc18bc433707ce1e3eabd199225/state.json
2020-04-16T13:23:19.178Z cypress:server:saved_state full state path /home/luke/.config/Cypress/cy/production/projects/virtual-office-c3059dc18bc433707ce1e3eabd199225/state.json
2020-04-16T13:23:19.179Z cypress:server:saved_state making new state file around /home/luke/.config/Cypress/cy/production/projects/virtual-office-c3059dc18bc433707ce1e3eabd199225/state.json
2020-04-16T13:23:19.180Z cypress:server:file get values from /home/luke/.config/Cypress/cy/production/projects/virtual-office-c3059dc18bc433707ce1e3eabd199225/state.json
2020-04-16T13:23:19.182Z cypress:server:file attempt to get lock on /home/luke/.config/Cypress/cy/production/projects/virtual-office-c3059dc18bc433707ce1e3eabd199225/state.json
2020-04-16T13:23:19.187Z cypress:server:file gettin lock succeeded or failed for /home/luke/.config/Cypress/cy/production/projects/virtual-office-c3059dc18bc433707ce1e3eabd199225/state.json
2020-04-16T13:23:19.188Z cypress:server:file read /home/luke/.config/Cypress/cy/production/projects/virtual-office-c3059dc18bc433707ce1e3eabd199225/state.json
2020-04-16T13:23:19.193Z cypress:server:file read succeeded or failed for /home/luke/.config/Cypress/cy/production/projects/virtual-office-c3059dc18bc433707ce1e3eabd199225/state.json
2020-04-16T13:23:19.193Z cypress:server:file attempt to unlock /home/luke/.config/Cypress/cy/production/projects/virtual-office-c3059dc18bc433707ce1e3eabd199225/state.json
2020-04-16T13:23:19.195Z cypress:server:file unlock succeeded or failed for /home/luke/.config/Cypress/cy/production/projects/virtual-office-c3059dc18bc433707ce1e3eabd199225/state.json
2020-04-16T13:23:19.220Z cypress:server:windows creating electron window with options { backgroundColor: '#dfe2e4', width: 801, height: 550, minWidth: 458, minHeight: 400, x: 107, y: 214, type: 'INDEX', devTools: false, trackState: { width: 'appWidth', height: 'appHeight', x: 'appX', y: 'appY', devTools: 'isAppDevToolsOpen' }, onBlur: [Function: onBlur], onFocus: [Function: onFocus], onClose: [Function: onClose], show: true, frame: true, transparent: false, icon: NativeImage {}, webPreferences: { preload: '/home/luke/.cache/Cypress/4.4.0/Cypress/resources/app/packages/server/lib/ipc/ipc.js', partition: null, webSecurity: false, nodeIntegration: false, backgroundThrottling: false, backgroundColor: '#dfe2e4', transparent: false }, url: 'file:///home/luke/.cache/Cypress/4.4.0/Cypress/resources/app/packages/desktop-gui/dist/index.html', contextMenu: false, recordFrameRate: null, onCrashed: [Function: onCrashed], onNewWindow: [Function: onNewWindow] }
2020-04-16T13:23:19.678Z cypress:server:events got request for event: on:menu:clicked, undefined
2020-04-16T13:23:19.679Z cypress:server:events got request for event: get:options, undefined
2020-04-16T13:23:19.681Z cypress:server:events got request for event: get:current:user, undefined
2020-04-16T13:23:19.688Z cypress:server:file get values from /home/luke/.config/Cypress/cy/production/cache
2020-04-16T13:23:19.688Z cypress:server:file attempt to get lock on /home/luke/.config/Cypress/cy/production/cache
2020-04-16T13:23:19.694Z cypress:server:events sending ipc data { type: 'get:options', data: { id: 0.39036739440056767, data: { _: [Array], sandbox: false, browser: '/usr/local/bin/chromium', project: '/home/luke/projects/virtual-office', cwd: '/home/luke/projects/virtual-office', invokedFromCli: true, config: {}, projectRoot: '/home/luke/projects/virtual-office', onFocusTests: null, os: 'linux', version: '4.4.0' } }, originalData: { id: 0.39036739440056767, data: { _: [Array], sandbox: false, browser: '/usr/local/bin/chromium', project: '/home/luke/projects/virtual-office', cwd: '/home/luke/projects/virtual-office', invokedFromCli: true, config: {}, projectRoot: '/home/luke/projects/virtual-office', onFocusTests: [Function: onFocusTests], os: 'linux', version: '4.4.0' } } }
2020-04-16T13:23:19.696Z cypress:server:file gettin lock succeeded or failed for /home/luke/.config/Cypress/cy/production/cache
2020-04-16T13:23:19.696Z cypress:server:file read /home/luke/.config/Cypress/cy/production/cache
2020-04-16T13:23:19.698Z cypress:server:file read succeeded or failed for /home/luke/.config/Cypress/cy/production/cache
2020-04-16T13:23:19.698Z cypress:server:file attempt to unlock /home/luke/.config/Cypress/cy/production/cache
2020-04-16T13:23:19.698Z cypress:server:file unlock succeeded or failed for /home/luke/.config/Cypress/cy/production/cache
2020-04-16T13:23:19.699Z cypress:server:events sending ipc data { type: 'get:current:user', data: { id: 0.3728344423972798, data: {} }, originalData: { id: 0.3728344423972798, data: {} } }
2020-04-16T13:23:19.717Z cypress:server:events got request for event: on:focus:tests, undefined
2020-04-16T13:23:19.718Z cypress:server:events got request for event: on:spec:changed, undefined
2020-04-16T13:23:19.718Z cypress:server:events got request for event: on:config:changed, undefined
2020-04-16T13:23:19.718Z cypress:server:events got request for event: on:project:error, undefined
2020-04-16T13:23:19.719Z cypress:server:events got request for event: on:project:warning, undefined
2020-04-16T13:23:19.719Z cypress:server:events got request for event: open:project, '/home/luke/projects/virtual-office'
2020-04-16T13:23:19.719Z cypress:server:events open:project
2020-04-16T13:23:19.720Z cypress:server:browsers getAllBrowsersWith { nameOrPath: '/usr/local/bin/chromium' }
2020-04-16T13:23:19.720Z cypress:server:browsers:utils getBrowsers
2020-04-16T13:23:19.723Z cypress:launcher detecting if the following browsers are present [ { name: 'chrome', family: 'chromium', channel: 'stable', displayName: 'Chrome', versionRegex: /Google Chrome (\S+)/m, profile: true, binary: [ 'google-chrome', 'chrome', 'google-chrome-stable' ] }, { name: 'chromium', family: 'chromium', channel: 'stable', displayName: 'Chromium', versionRegex: /Chromium (\S+)/m, profile: true, binary: [ 'chromium-browser', 'chromium' ] }, { name: 'chrome', family: 'chromium', channel: 'canary', displayName: 'Canary', versionRegex: /Google Chrome Canary (\S+)/m, profile: true, binary: 'google-chrome-canary' }, { name: 'firefox', family: 'firefox', channel: 'stable', displayName: 'Firefox', info: 'Firefox support is currently in beta! You can help us continue to improve the Cypress + Firefox experience by [reporting any issues you find](https://on.cypress.io/new-issue).', versionRegex: /^Mozilla Firefox ([^\sab]+)$/m, profile: true, binary: 'firefox' }, { name: 'firefox', family: 'firefox', channel: 'dev', displayName: 'Firefox Developer Edition', info: 'Firefox support is currently in beta! You can help us continue to improve the Cypress + Firefox experience by [reporting any issues you find](https://on.cypress.io/new-issue).', versionRegex: /^Mozilla Firefox (\S+b\S*)$/m, profile: true, binary: [ 'firefox-developer-edition', 'firefox' ] }, { name: 'firefox', family: 'firefox', channel: 'nightly', displayName: 'Firefox Nightly', info: 'Firefox support is currently in beta! You can help us continue to improve the Cypress + Firefox experience by [reporting any issues you find](https://on.cypress.io/new-issue).', versionRegex: /^Mozilla Firefox (\S+a\S*)$/m, profile: true, binary: [ 'firefox-nightly', 'firefox-trunk' ] }, { name: 'edge', family: 'chromium', channel: 'stable', displayName: 'Edge', versionRegex: /Microsoft Edge (\S+)/m, profile: true, binary: 'edge' }, { name: 'edge', family: 'chromium', channel: 'canary', displayName: 'Edge Canary', versionRegex: /Microsoft Edge Canary (\S+)/m, profile: true, binary: 'edge-canary' }, { name: 'edge', family: 'chromium', channel: 'beta', displayName: 'Edge Beta', versionRegex: /Microsoft Edge Beta (\S+)/m, profile: true, binary: 'edge-beta' }, { name: 'edge', family: 'chromium', channel: 'dev', displayName: 'Edge Dev', versionRegex: /Microsoft Edge Dev (\S+)/m, profile: true, binary: 'edge-dev' } ]
2020-04-16T13:23:19.732Z cypress:launcher checking one browser chrome
2020-04-16T13:23:19.732Z cypress:launcher looking up chrome on linux platform
2020-04-16T13:23:19.732Z cypress:launcher finding version string using command "google-chrome --version"
2020-04-16T13:23:19.750Z cypress:launcher checking one browser chrome
2020-04-16T13:23:19.750Z cypress:launcher looking up chrome on linux platform
2020-04-16T13:23:19.750Z cypress:launcher finding version string using command "chrome --version"
2020-04-16T13:23:19.772Z cypress:launcher checking one browser chrome
2020-04-16T13:23:19.772Z cypress:launcher looking up chrome on linux platform
2020-04-16T13:23:19.772Z cypress:launcher finding version string using command "google-chrome-stable --version"
2020-04-16T13:23:19.785Z cypress:server:events got request for event: updater:check, undefined
2020-04-16T13:23:19.786Z cypress:server:updater checking for new version of Cypress. current version is 4.4.0
2020-04-16T13:23:19.811Z cypress:launcher Received error detecting browser binary: "google-chrome-stable" with error: Command failed with ENOENT: google-chrome-stable --version
spawn google-chrome-stable ENOENT
2020-04-16T13:23:19.811Z cypress:launcher Received error detecting browser binary: "chrome" with error: Command failed with ENOENT: chrome --version
spawn chrome ENOENT
2020-04-16T13:23:19.811Z cypress:launcher Received error detecting browser binary: "google-chrome" with error: Command failed with ENOENT: google-chrome --version
spawn google-chrome ENOENT
2020-04-16T13:23:19.811Z cypress:launcher browser chrome not installed
2020-04-16T13:23:19.811Z cypress:launcher browser chrome not installed
2020-04-16T13:23:19.811Z cypress:launcher browser chrome not installed
2020-04-16T13:23:19.813Z cypress:launcher checking one browser chromium
2020-04-16T13:23:19.813Z cypress:launcher looking up chromium on linux platform
2020-04-16T13:23:19.813Z cypress:launcher finding version string using command "chromium-browser --version"
2020-04-16T13:23:19.835Z cypress:launcher checking one browser chromium
2020-04-16T13:23:19.835Z cypress:launcher looking up chromium on linux platform
2020-04-16T13:23:19.835Z cypress:launcher finding version string using command "chromium --version"
2020-04-16T13:23:19.858Z cypress:network:agent addRequest called { isHttps: true, href: 'https://download.cypress.io/desktop.json' }
2020-04-16T13:23:19.863Z cypress:network:connect beginning getAddress { hostname: 'download.cypress.io', port: 443 }
2020-04-16T13:23:19.872Z cypress:launcher Received error detecting browser binary: "chromium-browser" with error: Command failed with ENOENT: chromium-browser --version
spawn chromium-browser ENOENT
2020-04-16T13:23:19.873Z cypress:launcher browser chromium not installed
2020-04-16T13:23:19.874Z cypress:network:connect got addresses { hostname: 'download.cypress.io', port: 443, addresses: [ { address: '104.26.7.176', family: 4 }, { address: '104.26.6.176', family: 4 }, { address: '2606:4700:20::681a:7b0', family: 6 }, { address: '2606:4700:20::681a:6b0', family: 6 } ] }
2020-04-16T13:23:19.902Z cypress:network:agent got family { family: 6, href: 'https://download.cypress.io/desktop.json' }
2020-04-16T13:23:20.631Z cypress:server:updater latest version of Cypress is: 4.4.0
2020-04-16T13:23:20.631Z cypress:server:updater new version of Cypress does not exist
2020-04-16T13:23:20.632Z cypress:server:events sending ipc data { type: 'updater:check', data: { id: 0.23731125038707646, data: false }, originalData: { id: 0.23731125038707646, data: false } }
2020-04-16T13:23:30.159Z cypress:server:util:process_profiler current & mean memory and CPU usage by process group:
┌─────────┬───────────────────┬──────────────┬───────────────────────┬────────────┬────────────────┬──────────┬──────────────┬─────────────┐
│ (index) │ group │ processCount │ pids │ cpuPercent │ meanCpuPercent │ memRssMb │ meanMemRssMb │ maxMemRssMb │
├─────────┼───────────────────┼──────────────┼───────────────────────┼────────────┼────────────────┼──────────┼──────────────┼─────────────┤
│ 0 │ 'cypress' │ 1 │ '31795' │ 1.23 │ 0.61 │ 235.24 │ 191.54 │ 235.24 │
│ 1 │ 'electron-shared' │ 3 │ '31797, 31953, 32245' │ 0 │ 0 │ 166.46 │ 104.26 │ 166.46 │
│ 2 │ 'desktop-gui' │ 1 │ '32561' │ 0 │ 0 │ 121.11 │ 121.11 │ 121.11 │
│ 3 │ 'other' │ 2 │ '32739, 32740' │ 0 │ 0 │ 3.57 │ 3.64 │ 3.72 │
│ 4 │ 'TOTAL' │ 7 │ '-' │ 1.23 │ 0.61 │ 526.38 │ 360.01 │ 526.38 │
└─────────┴───────────────────┴──────────────┴───────────────────────┴────────────┴────────────────┴──────────┴──────────────┴─────────────┘
2020-04-16T13:23:41.003Z cypress:server:util:process_profiler current & mean memory and CPU usage by process group:
┌─────────┬───────────────────┬──────────────┬───────────────────────┬────────────┬────────────────┬──────────┬──────────────┬─────────────┐
│ (index) │ group │ processCount │ pids │ cpuPercent │ meanCpuPercent │ memRssMb │ meanMemRssMb │ maxMemRssMb │
├─────────┼───────────────────┼──────────────┼───────────────────────┼────────────┼────────────────┼──────────┼──────────────┼─────────────┤
│ 0 │ 'cypress' │ 1 │ '31795' │ 1.17 │ 0.8 │ 238.16 │ 207.08 │ 238.16 │
│ 1 │ 'electron-shared' │ 3 │ '31797, 31953, 32245' │ 0.61 │ 0.2 │ 166.46 │ 124.99 │ 166.46 │
│ 2 │ 'desktop-gui' │ 1 │ '32561' │ 0.89 │ 0.44 │ 114.76 │ 117.94 │ 121.11 │
│ 3 │ 'other' │ 2 │ '912, 927' │ 0 │ 0 │ 3.63 │ 3.64 │ 3.72 │
│ 4 │ 'TOTAL' │ 7 │ '-' │ 2.66 │ 1.3 │ 523.01 │ 414.34 │ 526.38 │
└─────────┴───────────────────┴──────────────┴───────────────────────┴────────────┴────────────────┴──────────┴──────────────┴─────────────┘
[31953:0416/232558.016581:WARNING:x11_util.cc(1443)] X error received: serial 9721, error_code 9 (BadDrawable (invalid Pixmap or Window parameter)), request_code 130, minor_code 3 (X_ShmPutImage)
[31953:0416/232558.032148:WARNING:x11_util.cc(1443)] X error received: serial 9726, error_code 9 (BadDrawable (invalid Pixmap or Window parameter)), request_code 130, minor_code 3 (X_ShmPutImage)

This is an issue with Cypress on Ubuntu when Chromium is installed via snap as documented here: https://github.com/cypress-io/cypress/issues/7020
There will be a release of Cypress in the future to address the issue, so watch the GitHub issue for any updates.
Workaround:
Install Chromium via apt instead (apt install chromium-browser)

Current answer
The problem is solved in Cypress 4.4.1, so if possible, just upgrade. Otherwise see the old answers
Old answers
It is an issue using chromium installed via snap on ubuntu: https://github.com/cypress-io/cypress/issues/7020
According to the issue this bug has been patched, so it should be fixed from the next Cypress release, so hopefully this will be over from 4.4.1.
Workaround that doesn't require changes in packages:
Change the path for the command until the patch is on npm:
For fish shells:
env PATH="/home/rohdef/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin /usr/bin:/sbin:/bin" nom run ...
for bash and similar:
PATH="/home/rohdef/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin /usr/bin:/sbin:/bin" npm run ...
Make sure to adjust the path for your system, so start by doing echo $PATH and ensure that you don't leave important things out, and make sure not to have /snap/bin in your path
Workaround by installing Chromium via apt (doesn't work in 19.10)
This only works on older than 19.10, since in 19.10 apt just installs Chromium using snap
sudo snap remove chromium
sudo apt install chromium-browser
Workaround using this PPA: https://launchpad.net/~saiarcot895/+archive/ubuntu/chromium-dev I have not tested it yet
Workaround by upgrading chromium (sporadic success)
$ sudo snap save chromium # optional, backup
$ sudo snap switch --beta chromium
$ sudo snap refresh chromium
Workaround don't have chromium
Another solution is to uninstall chromium all together.

Related

How can I print Cypress base Url in the `Git bash CLI console`

How can I print Cypress base Url in the Git bash CLI console while running the Cypress test ? Could someone please advise ?
When running headless, the browser logs don't show in the terminal, but those from the Cypress node process (aka cy.task()) do show up.
I assume the baseUrl is changing during the test, here is an example that does that and logs the current value using a task.
The configured value is http://localhost:3000, the test changes it to http://localhost:3001.
cypress.config.js
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
console.log('Printing baseUrl - during setup', config.baseUrl)
on('task', {
logBaseUrl(baseUrl) {
console.log('Printing baseUrl - from task', baseUrl)
return null
}
})
},
baseUrl: 'http://localhost:3000'
},
})
test
it('logs baseUrl to the terminal in run mode', () => {
console.log('Printing baseUrl - directly from test', Cypress.config('baseUrl')) // no show
Cypress.config('baseUrl', 'http://localhost:3001')
cy.task('logBaseUrl', Cypress.config('baseUrl'))
})
terminal
Printing baseUrl - during setup http://localhost:3000
====================================================================================================
Running: log-baseurl.cy.js (1 of 1)
Printing baseUrl - from task http://localhost:3001
√ logs baseUrl to the terminal in run mode (73ms)
1 passing (115ms)
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 1 │
│ Passing: 1 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 0 seconds │
│ Spec Ran: log-baseurl.cy.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
====================================================================================================
(Run Finished)
Spec Tests Passing Failing Pending Skipped
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ √ log-baseurl.cy.js 108ms 1 1 - - - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
√ All specs passed! 108ms 1 1 - - -
Done in 18.49s.
You can use a nodejs command console.log(Cypress.config().baseUrl).
That does not require Git Bash though, only nodejs installed on Your Windows.
Or you can add in your tests cy.config().baseUrl.

How to load local file with cdktf for helm release?

I'd like to reference a local yaml file when creating a helm chart with cdktf.
I have the following cdktf config:
{
"language": "typescript",
"app": "npx ts-node main.ts",
"projectId": "...",
"terraformProviders": [
"hashicorp/aws#~> 3.42",
"hashicorp/kubernetes# ~> 2.7.0",
"hashicorp/http# ~> 2.1.0",
"hashicorp/tls# ~> 3.1.0",
"hashicorp/helm# ~> 2.4.1",
"hashicorp/random# ~> 3.1.0",
"gavinbunney/kubectl# ~> 1.14.0"
],
"terraformModules": [
{
"name": "secrets-store-csi",
"source": "app.terraform.io/goldsky/secrets-store-csi/aws",
"version": "0.1.5"
}
],
"context": {
"excludeStackIdFromLogicalIds": "true",
"allowSepCharsInLogicalIds": "true"
}
}
Note npx ts-node main.ts as the app.
In main.ts I have the following helm release
new helm.Release(this, "datadog-agent", {
chart: "datadog",
name: "datadog",
repository: "https://helm.datadoghq.com",
version: "3.1.3",
set: [
{
name: "datadog.clusterChecks.enabled",
value: "true",
},
{
name: "clusterAgent.enabled",
value: "true"
},
],
values: ["${file(\"datadog-values.yaml\")}"],
});
Note that I'm referencing a yaml file called datadog-values.yaml similar to this example from the helm provider.
datadog-values.yaml is a sister file to main.ts
However, when I try to deploy this with cdktf deploy I get the following error
│ Error: Invalid function argument
│
│ on cdk.tf.json line 1017, in resource.helm_release.datadog-agent.values:
│ 1017: "${file(\"datadog-values.yaml\")}"
│
│ Invalid value for "path" parameter: no file exists at
│ "datadog-values.yaml"; this function works only with files that are
│ distributed as part of the configuration source code, so if this file will
│ be created by a resource in this configuration you must instead obtain this
goldsky-infra-dev ╷
│ Error: Invalid function argument
│
│ on cdk.tf.json line 1017, in resource.helm_release.datadog-agent (datadog-agent).values:
│ 1017: "${file(\"datadog-values.yaml\")}"
│
│ Invalid value for "path" parameter: no file exists at
│ "datadog-values.yaml"; this function works only with files that are
│ distributed as part of the configuration source code, so if this file will
│ be created by a resource in this configuration you must instead obtain this
│ result from an attribute of that resource.
To run a deployment I execute npm run deploy:dev which is a customer script in my package.json:
"build": "tsc",
"deploy:dev": "npm run build && npx cdktf deploy",
How can I reference my datadog yaml file in a helm release like in the example shown by the helm provider?
To reference local files in CDKTF, you need to use assets. Assuming at the root level of your project there's a values folder where you store your values yaml file:
const valuesAsset = new TerraformAsset(this, 'values-asset', {
path: `${process.cwd()}/values/${this.chartValues}`,
type: AssetType.FILE,
});
new HelmRelease(this, 'helm-release', {
name: this.releaseName,
chart: this.chartName,
repository: this.chartRepository,
values: [ Fn.file(valuesAsset.path) ]
})
}
Note that I've used the file Terraform function to read the content of the file.

Jobs doesn't get picked up by #Processor in Nest.js BullQueue

I'm trying to implement a queue using the BullQueue package in nest.js. I have two queues, one is a file queue and another is an email queue.
I use the file queue to regenerate thumbnails in the background after the thumbnail is uploaded. And email queue to send the email. The problem is that my file queue is working completely fine but the email queue I have created gives me an inconsistent result. Sometimes the jobs are getting picked up by the #Process('JobName') function and sometimes it doesn't.
More importantly, I have noticed that when the problem occurs, I tried removing the dist folder and restarting the server which regenerated the dist directory. It worked until it didn't after a few trials.
This is my folder structure.
my-nest-app/
├─ src/
│ ├─ bull-queue/
│ │ ├─ bull-queue.module.ts
│ │ ├─ file-queue/
│ │ │ ├─ file-queue-producer.service.ts
│ │ │ ├─ file-queue-consumer.service.ts
│ │ ├─ email-queue/
│ │ │ ├─ email-producer.service.ts
│ │ │ ├─ email-processor.service.ts
bull-queue.module.ts
export enum BullQueue {
FileQueue = 'file-queue',
EmailQueue = 'email-queue',
}
#Global()
#Module({
imports: [
BullModule.forRoot({
redis: {
host: process.env.REDIS_HOST,
port: parseInt(process.env.REDIS_PORT) || 6379
}
}),
BullModule.registerQueue(
{ name: BullQueue.FileQueue },
{ name: BullQueue.EmailQueue }
),
ProjectModule,
FileModule
],
providers: [
BullQueueService,
FileQueueConsumerService,
FileQueueProducerService,
EmailProcessorService,
EmailProducerService
],
controllers: [],
exports: [FileQueueProducerService, EmailProducerService]
})
export class BullQueueModule {}
email-producer.service.ts
export enum EmailJobs {
PasswordReset = 'password_reset',
}
#Injectable()
export class EmailProducerService {
constructor(#InjectQueue(BullQueue.EmailQueue) private queue:Queue){}
async password_reset_email(payload: PasswordResetPayload){
await this.queue.add(EmailJobs.PasswordReset, payload);
}
}
email-processor.service.ts
#Processor(BullQueue.EmailQueue)
export class EmailProcessorService {
constructor(
private readonly loggerService: LoggerService,
private readonly helperService: HelperService
) {}
#Process(EmailJobs.PasswordReset)
async password_reset(job: Job<PasswordResetPayload>) {
console.log('password_reset Job Processor')
}
}
I was wondering if I violated any design principle or if this was just an issue with the queue package manager.

PM2 & Puppeteer Watch Restarting

I have a puppeteer script which I am using to produce an export from a reporting tool that I use (called pivot.js):
const fs = require('fs');
const path = require('path');
const events = require('events');
const puppeteer = require('puppeteer');
let eventEmitter = new events.EventEmitter();
const directoryPath = "./storage/"; /* A path to the storage of exported files */
((directoryPath) => {
fs.mkdir(path.resolve(path.resolve(),
directoryPath.replace(/^\.*\/|\/?[^\/]+\.[a-z]+|\/$/g, '')), { recursive: true }, error => {
if (error) console.error(error);
});
})(directoryPath); /* Creating a storage folder for exported files (if such a folder doesn't exist yet) */
(async () => {
eventEmitter.once('reportcomplete', () => {
/*
All changes should be made within this function.
Available methods:
- setReport (https://www.flexmonster.com/api/setreport/)
- exportTo (https://www.flexmonster.com/api/exportto/)
The exportTo method takes two parameters: type and params.
Callback function will be ignored.
Possible destination types:
- plain (the file will be saved by the path defined as a value of the "directoryPath" variable)
- server (the file will be exported to the server)
Available events (use "eventEmitter" to manage events):
- ready (https://www.flexmonster.com/api/ready/)
- reportcomplete (https://www.flexmonster.com/api/reportcomplete/)
- exportcomplete (https://www.flexmonster.com/api/exportcomplete/)
Additional methods and events can be added using the template.
*/
eventEmitter.once('reportcomplete', () => { /* Exporting when the report is ready */
exportTo("csv");
exportTo("html");
exportTo("pdf");
exportTo("image");
exportTo("excel");
});
let exportCount = 0;
eventEmitter.on('exportcomplete', () => {
exportCount++;
if (exportCount == 5) browser.close(); /* Closing the browser when all the exports are complete */
});
setReport({
dataSource: {
filename: 'https://cdn.flexmonster.com/data/data.json'
}
});
});
const browser = await puppeteer.launch(); /* Launching the headless browser */
const page = await browser.newPage(); /* Creating a new page */
/* A function to set a report for the component dynamically */
function setReport(report) {
page.evaluate(report => {
flexmonster.setReport(report);
}, report)
}
/* This code is responsible for the export itself. It supports five export formats:
.html, .xlsx, .pdf, .csv, and .png. */
function exportTo(type, params) {
page.evaluate((type, params) => {
type = type.toLowerCase();
if (params) {
if (params.destinationType != "plain" && params.destinationType != "server")
params.destinationType = "plain";
}
else params = { destinationType: "plain" };
if (!params.filename) params.filename = "pivot";
flexmonster.exportTo(type, params, (result) => {
switch (type) {
case "pdf":
result.data = result.data.output();
break;
case "excel":
result.data = Array.from(result.data);
break;
case "image":
result.data = result.data.toDataURL();
break;
}
exportHandler(result);
});
}, type, params);
}
await page.exposeFunction('exportHandler', (result) => {
switch (result.type) {
case "excel":
result.data = Buffer.from(result.data);
result.type = "xlsx";
break;
case "image":
result.data = Buffer.from(result.data.replace(/^data:image\/\w+;base64,/, ""), 'base64');
result.type = "png";
break;
}
fs.writeFile(`${directoryPath}${result.filename}.${result.type}`, result.data, 'utf8', error => {
if (error) console.log(error);
});
});
/* This code adds functions to emit ready, reportcomplete, and exportcomplete events for the browser
when called. This approach allows us to handle the component's events in the browser's scope. */
await page.exposeFunction('onReady', () => {
eventEmitter.emit('ready')
});
await page.exposeFunction('onReportComplete', () => {
eventEmitter.emit('reportcomplete')
});
await page.exposeFunction('onExportComplete', () => {
eventEmitter.emit('exportcomplete')
});
/* Reading the file with the component and setting it as the browser page's contents */
await page.setContent(fs.readFileSync('index.html', 'utf8'));
/* This code runs in the page's scope, subscribing the browser window to the component's ready,
reportcomplete, and exportcomplete events */
await page.evaluate(() => {
window.addEventListener('ready', () => window.onReady());
window.addEventListener('reportcomplete', () => window.onReportComplete());
window.addEventListener('exportcomplete', () => window.onExportComplete());
});
})();
I am then using PM2 to watch the file, allowing me to swap out the code used to produce different reports, using:
pm2 start pivot.js --watch
The issue I have is that whenever I delete the contents of the storage folder (which the script writes into), a new export appears straight away. Almost as if the script is continuously being called, or PM2 is being restarted.
Both of the logs for PM2 are completely blank. But after running:
pm2 show 0
I receive the following:
│ status │ stopping │
│ name │ pivot │
│ namespace │ default │
│ version │ 1.0.0 │
│ restarts │ 1957 │
│ uptime │ 0 │
│ script path │ C:\Users\admin\Documents\Windows Puppeteer\pivot.js │
│ script args │ N/A │
│ error log path │ C:\Users\admin\.pm2\logs\pivot-error.log │
│ out log path │ C:\Users\admin\.pm2\logs\pivot-out.log │
│ pid path │ C:\Users\admin\.pm2\pids\pivot-0.pid │
│ interpreter │ node │
│ interpreter args │ N/A │
│ script id │ 0 │
│ exec cwd │ C:\Users\admin\Documents\Windows Puppeteer │
│ exec mode │ fork_mode │
│ node.js version │ 14.15.1 │
│ node env │ N/A │
│ watch & reload │ ✔ │
│ unstable restarts │ 0 │
│ created at │ 2020-11-30T01:24:27.461Z │
I hope you can help.
The issue is that the puppeteer script (named pivot.js) dumps the returning file in a folder called "storage". Storage is within the same directory as pivot.js, meaning that whilst PM2 monitors that directory, it is creating an infinite loop. The solution is to use the ignore watch option.
Creating a ecosystem file as such:
module.exports = {
apps : [{
script: 'pivot.js',
watch: '.',
ignore_watch : ["node_modules", "storage"]
}],
...
};
Or using:
pm2 start pivot.js --watch --ignore-watch="storage"
In my examples above will resolve the problem.

clearing cloudflare cache programmatically

I am trying to clear the cloudflare cache for single urls programmatically after put requests to a node.js api. I am using the https://github.com/cloudflare/node-cloudflare library, however I can't figure out how to log a callback from cloudflare. According to the test file in the same repo, the syntax should be something like this:
//client declaration:
t.context.cf = new CF({
key: 'deadbeef',
email: 'cloudflare#example.com',
h2: false
});
//invoke clearCache:
t.context.cf.deleteCache('1', {
files: [
'https://example.com/purge_url'
]
})
How can I read out the callback from this request?
I have tried the following in my own code:
client.deleteCache(process.env.CLOUDFLARE_ZONE, { "files": [url] }, function (data) {
console.log(`Cloudflare cache purged for: ${url}`);
console.log(`Callback:${data}`);
})
and:
client.deleteCache('1', {
files: [
'https://example.com/purge_url'
]
}).then(function(a,b){
console.log('helllllllooooooooo');
})
to no avail. :(
Purging Cloudflare cache by url:
var Cloudflare = require('cloudflare');
const { CF_EMAIL, CF_KEY, CF_ZONE } = process.env;
if (!CF_ZONE || !CF_EMAIL || !CF_KEY) {
throw new Error('you must provide env. variables: [CF_ZONE, CF_EMAIL, CF_KEY]');
}
const client = new Cloudflare({email: CF_EMAIL, key: CF_KEY});
const targetUrl = `https://example.com/purge_url`;
client.zones.purgeCache(CF_ZONE, { "files": [targetUrl] }).then(function (data) {
console.log(`Cloudflare cache purged for: ${targetUrl}`);
console.log(`Callback:`, data);
}, function (error) {
console.error(error);
});
You can lookup cloudflare zone this way:
client.zones.browse().then(function (zones) {
console.log(zones);
})
Don't forget to install the current client version:
npm i cloudflare#^2.4.1 --save-dev
I wrote a nodejs module to purge cache for a entire website. It scan your "public" folder, build the full url and purge it on cloudflare:
You can run it using npx:
npm install -g npx
npx purge-cloudflare-cache your#email.com your_cloudflare_key the_domain_zone https://your.website.com your/public/folder
But, you can install it and run using npm too:
npm install -g purge-cloudflare-cache
purge your#email.com your_cloudflare_key the_domain_zone https://your.website.com your/public/folder
For a public/folder tree like:
├── assets
│ ├── fonts
│ │ ├── roboto-regular.ttf
│ │ └── roboto.scss
│ ├── icon
│ │ └── favicon.ico
│ └── imgs
│ └── logo.png
├── build
│ ├── main.css
│ ├── main.js
├── index.html
It will purge cache for files:
https://your.website.com/index.html
https://your.website.com/build/main.css
https://your.website.com/build/main.js
https://your.website.com/assets/imgs/logo.png
https://your.website.com/assets/icon/favicon.ico
https://your.website.com/assets/fonts/roboto.css
https://your.website.com/assets/fonts/roboto-regular.ttf
This is probably happening because my mocha tests don't wait for the callback to return.
https://github.com/mochajs/mocha/issues/362

Resources