I’ve been playing around with Cypress for end-to-end testing ever since I heard Paul Gilzow’s talk on the subject (“Introduction to Automated End-to-End Testing”) at the 2024 WPCampus conference. We did a pilot ten years ago to implement some limited E2E testing using Behat but it didn’t get very far. Building your own Behat suite without core support was a heavy lift (our Moodle plugins are a different matter).
We did build out some functional testing for our Microsite, which is a static copy of our WordPress theme, implemented in Twig. I took the opportunity of yet another chromium/selenium issue to reimplement our tests in Cypress, and to add visual regression testing for our components. An added complexity is that the tests need to work cross-platform: in developer local environments and in our continuous integration environment. It’s working, but there were a few challenges.
First, I got started by installing the Cypress Visual Regression package. Unsurprisingly, you’ll need the virtual framebuffer (xvfb
) package installed. You’ll also want a consistent headless browser across all systems. Chrome is an easy answer, but I’m sure others would have worked. This is what my CI configuration looked like on a Debian-derived container: