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?

The DDEV + Cypress addon mentioned in #2 looks like a good thing to reference, but I'm not sure it can be used as-is. It does not appearlike it is adding Cypress dependencies to the image Drupal runs on, but instead is running Cypress from a dedicated image. Because of the setup scripts (same PHP scripts as what Nightwatch uses) I'm pretty sure /em> Cypress needs to be running on the same "machine" as Drupal's PHP but happy to find out otherwise

The following steps is from a new DDEV site to Cypress + DDDEV working at the same level Nightwatch Currently does (with no access to the test runner app)

mkdir xb-ddev-project && cd xb-ddev-project
ddev config --project-type=drupal --php-version=8.3 --docroot=web
ddev start
ddev composer create drupal/recommended-project:^11.x-dev
ddev config --update
ddev restart
ddev get ddev/ddev-selenium-standalone-chrome
ddev composer require drush/drush
git clone git@git.drupal.org:project/experience_builder.git web/modules/contrib/experience_builder
echo '$settings["extension_discovery_scan_tests"] = TRUE;' >> web/sites/default/settings.ddev.php
echo '$settings["extension_discovery_scan_tests"] = TRUE;' >> web/sites/default/settings.php
ddev restart
ddev npm --prefix /var/www/html/web/modules/contrib/experience_builder/ui install
ddev npm --prefix /var/www/html/web/modules/contrib/experience_builder/ui run build
cat > web/modules/contrib/experience_builder/ui/.env << EOF
BASE_URL='http://web'
DRUPAL_TEST_DB_URL=sqlite://web/sites/default/files/db.sqlite
VITE_SERVER_ORIGIN='http://localhost:5173'
EOF
ddev drush site:install --account-name=admin --account-pass=admin -y
ddev drush en -y experience_builder
ddev drush uli
ddev launch
ddev exec sudo apt-get -y update; ddev exec sudo apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2 libxtst6 xauth xvfb


# Run tests using ddev exec... for now
ddev exec -d /var/www/html/web/modules/contrib/experience_builder/ui node_modules/.bin/cypress run --browser electron

This also makes running other core tests possible, too.

Things that still need to be done:

• This should ultimately be in an addon so it doesn't go away on poweroff, but this is a good step in the right direction
• We'd want to create comands so we don't have to use a long ddev exec
• We should get it so the Electron based test runner is available
• It would be great to get not-headless Chrome installed on the image so we don't have to configure the tests for the electron browser (or we could change the default test browser to electron)

@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.

The Repo linked in #10 looks like (but perhaps I'm wrong) something that sets up an entire instance, but the goal here is ti make an addon (probably based on the template) that can be applied to an existing ddev instance - basically the Cypress equivalent of the Nightwatch DDEV addon mentioned in the issue summary.

Unless the Github search isn't working right I'm also not seeing the Cypress system dependencies being installed, which are needed for Cypress to run at all. The Cypress documentation page on system dependencies mentioned in the issue summary provides more details, and the following line is how the dependencies are added in the GitlabCI runs:

apt-get -y update; ddev exec sudo apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2 libxtst6 xauth xvfb

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 addon. 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 😊

For me at least, pasting the snippet in #7 takes me all the way to Cypress tests passing on a DDEV site. If ddev auth ssh hasn't been run recently that might be necessary to do the apt-get

It would be helpful for me to know where specifically that snippet fails on your machine, or if it fails at all.

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.

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--ZQuartz. 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 📌 Add Cypress test runner instructions to UI readme Fixed 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! 🙏)

Automatically closed - issue fixed for 2 weeks with no activity.