DDEV support for Cypress tests

There is already an existing cypress addon for ddev: https://github.com/tyler36/ddev-cypress Perhaps that is already providing everything needed?

@bnjmnm, I'm working on a POC at https://github.com/TravisCarden/xb.ddev.site. The approach is a little crude, but I decided to favor time-to-value over polish. Care to give it a peek and we can discuss it? Just look at the README for instructions.

Yes, thanks, @bnjmnm. POC, as I say. 🙂 I'm trying to get a working, repeatable setup before I try to extract the components into an add-on. I want to solve one problem at a time so I know, for example, whether tests fail because my addon isn't working or because my starting assumptions are wrong.

The Cypress system dependencies are being installed in .ddev/config.yaml.

webimage_extra_packages:
  - libasound2
  - libgbm-dev
  - libgtk-3-0
  - libgtk2.0-0
  - libnotify-dev
  - libnss3
  - libxss1
  - libxtst6
  - xauth
  - xvfb

I encapsulated the Cypress command in a simpleddev cypress command.

The setup itself seems to be working, but that the tests fail, suggesting I'm missing something fundamental. I'll give it another look and then reach out to you to set me straight. 😉

Can you post the output showing the test failures here, @TravisCarden? 🙏 I do not have ddev installed, plus providing that context here will be helpful for posterity anyway 😊

Ah, your snippet works for me now, @bnjmnm. (It probably worked the first time, but as I recall, tests were actually failing upstream at that time, so I couldn't be sure.) That gets me moving forward; thanks.

Alright, @bnjmnm. I have a working add-on, including dependency setup and a simple ddev cypress command, at https://github.com/TravisCarden/ddev-drupal-xb-dev. I have a little more to do in the way of polish, but it's basically functionally complete. You can test it, if you like, while I put on the finishing touches.

A handful of people have tested the add-on, and it seems to be working well. There have been a few hiccups that seem to be mostly about individuals' DDEV installations (e.g., out of date versions), but the add-on itself is working.

I'm currently working on adding support for the Cypress App (UI). I've never used it myself, so I'm getting up to speed on it at the same time.

🥳 Thanks for the update, @TravisCarden!

A few more people have successfully tested the add-on. One person had a mysterious problem that was solved by updating his version of DDEV. If we identify an actual minimum version dependency, it can be explicitly declared in the add-on config, just like you would a Drupal module. Another person is having trouble with certificates in the container preventing Composer operations.

In the meantime, I've fixed an issue with the Cypress binary getting cached on the host machine and becoming unavailable after restarting DDEV. I also added a symlink in the project root to the module (deep down in web/modules/contrib/experience_builder) for convenient access. You'll automatically get the latest state when you follow the installation instructions at https://github.com/TravisCarden/ddev-drupal-xb-dev#installation.

I'm continuing to work on Cypress UI integration.

I've been taking a lot of rabbit trails... Running the UI app from outside the container is complicated. (Thanks to @bnjmnm for showing me how it's at least supposed to look when it works.) I've tried a few approaches that I hoped would limit the number of dependencies on the host, but it doesn't look like I'll get away without at least one--XQuartz. In the meantime, I renamed the Cypress headless tests command to ddev xb-cypress-run and added a ddev xb-npm-ci command to run npm ci to rebuild front-end assets when you make or pull down changes.

It's been >1.5 week without an update here and 2 weeks since the last commit to https://github.com/TravisCarden/ddev-drupal-xb-dev. Can you enlighten the 9 followers of this issue, @TravisCarden? 🙏

TIL that @TravisCarden has been sick for the past 1.5 week! 😞🤗

Thanks, @Wim Leers. I wasn't completely gone during that time, but I wasn't terribly productive, either. Obviously, I could have kept you updated better; sorry. My scrum team knew I wasn't dead. 😛 At any rate...

I have a functionally complete alpha ready for testing--including the interactive Cypress mode that was absent from previous versions. It now takes just four commands to set up a new environment and a single command to run Cypress on demand. See the updated instructions at https://github.com/TravisCarden/ddev-drupal-xb-dev.

My scrum team knew I wasn't dead. 😛

That's truly all I knew! 🤣

Let's get @jessebaker to test this! 🤞

I ran with the instructions and hit the following error, which matches what @jessebaker experienced:

❯ ddev xb-cypress-open
access control disabled, clients can connect from any host
It looks like this is your first time using Cypress: 13.12.0


Cypress failed to start.

This may be due to a missing library or dependency. https://on.cypress.io/required-dependencies

Please refer to the error below for more details.

----------

[2736:0808/124126.818035:ERROR:bus.cc(407)] Failed to connect to the bus: Failed to connect to socket /run/dbus/system_bus_socket: No such file or directory
[2736:0808/124127.561806:ERROR:ozone_platform_x11.cc(240)] Missing X server or $DISPLAY
[2736:0808/124127.561820:ERROR:env.cc(255)] The platform failed to initialize.  Exiting.

----------

Platform: linux-arm64 (Debian - 12)
Cypress Version: 13.12.0
Failed to execute command node_modules/.bin/cypress open --browser electron --project .: exit status 1
Failed to run xb-cypress-open ; error=exit status 1

I found a thread in a similar project that has seemingly relevant comments to this error: tyler36/ddev-cypress#26. I tried to run things in Rosetta with a modified docker-compose.local.yaml to set platform to linux/amd64 as mentioned in a comment, but that didn't help either.

😬

Thanks for the error output, @balintbrews; that was helpful. I identified a necessary setup step that was missing from the README: https://github.com/TravisCarden/ddev-drupal-xb-dev#prerequisites-xquartz. Please try again. I don't expect it to get you all the way there, but I know it will get your farther. @jessebaker and I also found it necessary to update his installation of DDEV at one point, so you might do that, too, just for good measure. I'll keep looking around to see what (I assume) is still missing from my setup instructions. I might reach out to someone else in my timezone, too. Let me know what you find.

Kind thanks to @mayankguptadotcom for helping me test this more today. Here's the error output he's getting:

$ ddev xb-cypress-open

Cypress failed to start.

This may be due to a missing library or dependency. https://on.cypress.io/required-dependencies

Please refer to the error below for more details.

----------

[2536:0808/191430.352014:ERROR:bus.cc(407)] Failed to connect to the bus: Failed to connect to socket /run/dbus/system_bus_socket: No such file or directory
[2536:0808/191431.055343:ERROR:ozone_platform_x11.cc(240)] Missing X server or $DISPLAY
[2536:0808/191431.055373:ERROR:env.cc(255)] The platform failed to initialize.  Exiting.

----------

Platform: linux-arm64 (Debian - 12)
Cypress Version: 13.12.0
Failed to execute command node_modules/.bin/cypress open --browser electron --project .: exit status 1
Failed to run xb-cypress-open ; error=exit status 1

I think I'm going to post an issue in the DDEV GitHub queue and see if I can get some assistance there.

I've posted a question to the DDEV issue queue at https://github.com/orgs/ddev/discussions/6472.

I was facing the issue in running cypress. Since I was using orbstack - I had to change the DISPLAY variable in /.ddev/config.drupal-xb-dev.yaml to the following :

- DISPLAY=host.orb.internal:0

I had to also ensure that xquartz -> Settings -> Security -> Allow connections from network clients was checked.

I want to call out that @pavlosdan and @chrisfromredfin have been helping me a lot with debugging. I'm going to ask them to comment here and request that they get issue credit for sure. :)

During the initial setup after setting:
xquartz -> Settings -> Security -> Allow connections from network clients was checked.

I had not restarted XQuartz and the debug.sh script was failing. Once I restarted XQuartz and manually trying to run

ddev exec \
  --dir /var/www/html/web/modules/contrib/experience_builder/ui \
  "node_modules/.bin/cypress open --browser electron --project ."

Cypress finally started.

Running from the script again, the script kept failing with:

xhost +
xhost:  unable to open display ":0"

Adjusted debug script to open XQuartz first and give it a small delay to give it a chance to initialize before running xforce +
that helped and cypress is now running successfully.

Without the delay even if i run XQuartz before xforce + i would still get the unable to open display error.

The bottom of my debug.sh script now looks like:

# Run Cypress.
open -a XQuartz
sleep 2 # Give XQuartz some time to start.
xhost +
ddev exec \
  --dir "/var/www/html/$MODULE_PATH/ui" \
  "node_modules/.bin/cypress open --browser electron --project ."

And it runs successfully.

This was a bit of a fun experiment! Issues were definitely around XQuartz config not being set up by default to accept network connections over TCP.

Once that was sorted it seemed to work, with the caveat we had with Maynak that his host.docker.internal alias wasnt working (but host.orb was).

We've got it working for everyone now! Some people were just overlooking some of the installation steps, so I've called those out more prominently in the README. There was a special requirement for Orbstack--over and against Colima or Docker Desktop, for example--so I documented that. And I added an execution delay to accommodate people whose machines were apparently a little slower starting XQuartz. I also added a "FAQ & known issues" section and generally expanded the documentation based on what we've learned. Assigning to @jessebaker for review.

This needs to update ui/README.md, to expand on what #3465241: Add Cypress test runner instructions to UI readme added last week. #3465241 presumed a "bare metal" installation, this should expand what that added to distinguish between "bare metal" and ddev.

But … meanwhile, @jessebaker can review this for sure!

👆 Something like this, @Wim Leers?

Assigning back to @jessebaker for review of the add-on itself.

Yes, thanks!

@jessebaker: up to you to do the final pass and actually merge this! (I already credited everyone who contributed — thank you! 🙏)