✨ add Cypress E2E testing service

[tyler36]

The New Solution/Problem/Issue/Bug:

This recipe integrates the Cypress E2E testing tool.

Using Cypress, you can:

• test website in multuple real browser versions
• create screenshots and video when tests fails
• create visual regression tests (requires plugin)

I've been using this in WSL2 for a few days without a problem.

Testing

I created a public repo for demo purposes https://github.com/tyler36/ddev-cypress .

1. Clone the repo
2. Start ddev
3. Run cypress commands

• Note: The image runs as root, so there was a permission issue when it created files. I think I resolved it, but confirmation would be appreciated.

TODO

• [ ] X11 setup reference for Mac
• [ ] X11 setup reference for Linux
• [ ] document Win10 setup

Not sure how to handle X11. We probably don't want to be troubleshooting its installation.

Related Issue Link(s):

[tyler36]

FWI, Cypress running WSL2 is pretty noisy and generates "errors".

EG.

[26:1022/055917.834178:ERROR:bus.cc(392)] Failed to connect to the bus: Failed to connect to socket /var/run/dbus/system_bus_socket: No such file or directory
[26:1022/055917.870807:ERROR:bus.cc(392)] Failed to connect to the bus: Address does not contain a colon
[26:1022/055917.870872:ERROR:bus.cc(392)] Failed to connect to the bus: Address does not contain a colon
[179:1022/055918.367731:WARNING:vaapi_wrapper.cc(589)] VAAPI video acceleration not available for swiftshader
[179:1022/055918.368361:ERROR:gpu_init.cc(441)] Passthrough is not supported, GL is swiftshader

These do not affect the service which runs as expected. I think it relates to WSL not being "fully implemented".

Before this PR, I ran cypress in WSL which displayed the same "errors".

[tyler36]

This is a first run-through PR of a service I've been using in WSL. TBH, I wasn't sure if this was something you would like so I submitted it, as is, for your thoughts.

Obviously, it requires updates for other testing environments, especially Win & Mac.

Hoping to get around to further testing today now that I know it useful.

[rfay]

Seems like a useful thing to me!

[rfay]

Sorry, I'm not clear if this is testable on a mac? Also, it uses chrome image which would not be compatible with arm64? (cypress/included does not have arm64 images, so the answer is no.

Pretty sure it does go pretty far into the weeds trying to help people set up X11, which they probably better know how to do ahead of time.

Are you still using this? Is it valuable? Are other people using it as far as you know? Is Cypress valuable.

I appreciate your work on this, and guess I'll pull it without testing if you rebase and add details about it not being arm64 compatible. Let me know when you think it's ready.

[tgaertner]

Just tried this with a Linux host but get several errors in 'ddev cypress-open':

A JavaScript error occurred in the main process
Uncaught Exception:
Error: EACCES: permission denied, mkdir '/.config'
    at Object.mkdirSync (fs.js:1009:3)
    at mkdirsSync (/root/.cache/Cypress/8.6.0/Cypress/resources/app/packages/server/node_modules/fs-extra/lib/mkdirs/mkdirs-sync.js:31:9)
    at mkdirsSync (/root/.cache/Cypress/8.6.0/Cypress/resources/app/packages/server/node_modules/fs-extra/lib/mkdirs/mkdirs-sync.js:36:14)
    at mkdirsSync (/root/.cache/Cypress/8.6.0/Cypress/resources/app/packages/server/node_modules/fs-extra/lib/mkdirs/mkdirs-sync.js:36:14)
    at Object.mkdirsSync (/root/.cache/Cypress/8.6.0/Cypress/resources/app/packages/server/node_modules/fs-extra/lib/mkdirs/mkdirs-sync.js:36:14)
    at createFile (/root/.cache/Cypress/8.6.0/Cypress/resources/app/packages/server/lib/logger.js:23:6)
    at Object.<anonymous> (/root/.cache/Cypress/8.6.0/Cypress/resources/app/packages/server/lib/logger.js:42:21)
    at Module._compile (internal/modules/cjs/loader.js:1083:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1113:10)
    at Module.load (internal/modules/cjs/loader.js:940:32)
    at Module._load (internal/modules/cjs/loader.js:781:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12913)
    at Module.require (internal/modules/cjs/loader.js:964:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/root/.cache/Cypress/8.6.0/Cypress/resources/app/packages/server/lib/server-base.js:20:42)
    at Module._compile (internal/modules/cjs/loader.js:1083:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1113:10)
    at Module.load (internal/modules/cjs/loader.js:940:32)
    at Module._load (internal/modules/cjs/loader.js:781:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12913)
    at Module.require (internal/modules/cjs/loader.js:964:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/root/.cache/Cypress/8.6.0/Cypress/resources/app/packages/server/lib/server-ct.js:7:23)
    at Module._compile (internal/modules/cjs/loader.js:1083:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1113:10)
    at Module.load (internal/modules/cjs/loader.js:940:32)
    at Module._load (internal/modules/cjs/loader.js:781:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12913)
    at Module.require (internal/modules/cjs/loader.js:964:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/root/.cache/Cypress/8.6.0/Cypress/resources/app/packages/server/lib/project-base.js:12:21)
    at Module._compile (internal/modules/cjs/loader.js:1083:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1113:10)
    at Module.load (internal/modules/cjs/loader.js:940:32)
    at Module._load (internal/modules/cjs/loader.js:781:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12913)
    at Module.require (internal/modules/cjs/loader.js:964:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/root/.cache/Cypress/8.6.0/Cypress/resources/app/packages/server/lib/open_project.js:11:24)
    at Module._compile (internal/modules/cjs/loader.js:1083:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1113:10)
    at Module.load (internal/modules/cjs/loader.js:940:32)
    at Module._load (internal/modules/cjs/loader.js:781:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12913)
    at Module.require (internal/modules/cjs/loader.js:964:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/root/.cache/Cypress/8.6.0/Cypress/resources/app/packages/server/lib/cypress.js:17:25)
    at Module._compile (internal/modules/cjs/loader.js:1083:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1113:10)
    at Module.load (internal/modules/cjs/loader.js:940:32)
    at Module._load (internal/modules/cjs/loader.js:781:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12913)
    at Module.require (internal/modules/cjs/loader.js:964:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/root/.cache/Cypress/8.6.0/Cypress/resources/app/packages/server/index.js:39:18)
    at Module._compile (internal/modules/cjs/loader.js:1083:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1113:10)
    at Module.load (internal/modules/cjs/loader.js:940:32)
    at Module._load (internal/modules/cjs/loader.js:781:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12913)
    at Module.require (internal/modules/cjs/loader.js:964:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/root/.cache/Cypress/8.6.0/Cypress/resources/app/index.js:2:1)
    at Module._compile (internal/modules/cjs/loader.js:1083:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1113:10)
    at Module.load (internal/modules/cjs/loader.js:940:32)
    at Module._load (internal/modules/cjs/loader.js:781:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12913)
    at Object.<anonymous> (electron/js2c/browser_init.js:193:3145)
    at Object../lib/browser/init.ts (electron/js2c/browser_init.js:193:3349)
    at __webpack_require__ (electron/js2c/browser_init.js:1:128)
    at electron/js2c/browser_init.js:1:1200
    at electron/js2c/browser_init.js:1:1267
    at NativeModule.compileForInternalLoader (internal/bootstrap/loaders.js:283:7)
    at NativeModule.compileForPublicLoader (internal/bootstrap/loaders.js:225:10)
    at loadNativeModule (internal/modules/cjs/helpers.js:35:9)
    at Module._load (internal/modules/cjs/loader.js:752:15)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12913)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47

[217:0121/114535.938420:ERROR:bus.cc(392)] Failed to connect to the bus: Failed to connect to socket /var/run/dbus/system_bus_socket: No such file or directory
[217:0121/114535.943263:ERROR:bus.cc(392)] Failed to connect to the bus: Address does not contain a colon
[217:0121/114535.943344:ERROR:bus.cc(392)] Failed to connect to the bus: Address does not contain a colon
[371:0121/114535.992020:WARNING:vaapi_wrapper.cc(589)] VAAPI video acceleration not available for swiftshader
[371:0121/114535.992209:ERROR:gpu_init.cc(441)] Passthrough is not supported, GL is swiftshader

I'm not a JS dev, and don't know to evaluate these errors.

[chrisfromredfin]

I have attempted to run this locally on my M1 Mac, and have no love. Turns out, though, Cypress docker images do not yet work with M1. Someone did build one that theoretically should work (uses Chromium + Cypress 9.4.1), but that gives me its own set of permissions errors.

https://github.com/cypress-io/cypress-docker-images/issues/431#issuecomment-1064995924

Error: EACCES: permission denied, stat '/root/.cache/Cypress/9.4.1/Cypress/Cypress'

[tyler36]

@chrisfromredfin

Thank you for the feedback. I will update the docs to say no M1 Mac support.

[rfay]

Seems like you've solved this in https://github.com/tyler36/ddev-cypress - should we close it here?

[tyler36]

Yes ... This is no longer required because it hs been extract to the excellent DDEV addon system.