Looking to Test Decoupled Sites? Get Ready to Be Impressed with Cypress!

Decoupled Drupal is the realization of Drupal as a content hub for frontend websites and web applications. Automated testing is critical to the success of decoupled systems due to the complexities of the overall architecture. In addition, the coverage provided by automated testing allows teams to focus on developing and releasing new features rather than fixing bugs that have made it into production.

This session will introduce attendees to the beautiful world of Cypress, a robust JavaScript end-to-end testing framework. Below are some of the advantages you can expect to benefit from when using Cypress to test your Decoupled solutions:

* End-to-end testing for Drupal and decoupled frontends
* Leverage JavaScript for all testing development
* Excellent developer experience
* Automate testing with continuous integration

While all attendees are guaranteed to learn something during this session, it is helpful for attendees to have some basic understanding of decoupled Drupal architecture and development.

At the end of this session, attendees will be able to:

* Get started with Cypress, integrating it into their existing and new applications.
* Summarize the benefits of leveraging Cypress for automated testing in decoupled architectures.
* Focus efforts on the most essential tests.

Demo code repos:

* Daggerhart: https://github.com/daggerhartlab/cypress-drupal
* Shrop: https://github.com/shrop/gatsby-drupal-rain
* Mediacurrent: https://bitbucket.org/mediacurrent/ci-tests/pull-requests/45

Additional resources:

* https://docs.cypress.io/guides/overview/why-cypress
* https://github.com/cypress-io/cypress-example-recipes
* https://github.com/cypress-io/cypress-realworld-app

Presented at Florida Drupalcamp 2023 with Jonathan Daggerhart

Transcript

1. Looking to Test Decoupled Sites? Get Ready to Be Impressed with Cypress! 02/18/2023 PREPARED FOR: Florida Drupalcamp
2. Your Presenters ABOUT US – 2 Mark Shropshire Sr. Director of Development Mediacurrent Jonathan Daggerhart Lead Architect Daggerhart Lab
3. Agenda 01 What’s Cypress? 02 Why Cypress? 03 Live Demos! 04 Q&A 3
4. 4 01 What’s Cypress?
5. 5 “Fast, easy and reliable testing for anything that runs in a browser.” WHAT’S CYPRESS? – • Open Source + optional SaaS products • Fast End-to-end testing solution for browsers • All-in-one solution • For any frontend framework • Includes modern testing features you expect and more • Designed for developer and QA teams • Not Selenium-based • All tests written in JavaScript 5
6. 6 Features WHAT’S CYPRESS? – 6 • Time Travel • Debuggability • Automatic Waiting • Spies, Stubs, and Clocks • Network Traffic Control • Consistent Results • Screenshots and Videos • Cross browser Testing Image credit: Cypress documentation
7. 02 Why Cypress? 7
8. 8 Open Source + SaaS WHY CYPRESS? – + =
9. 9 Easy Installation - Just Works WHY CYPRESS? – 9
10. 10 10 Excellent Documentation WHY CYPRESS? –
11. 11 11 Cypress App WHY CYPRESS? – Image credit: Cypress Features
12. 12 Cross-Browser Testing WHY CYPRESS? – 12
13. 13 03 Live Demos! Demo Repos: • https://github.com/daggerhartlab/cypress-drupal • https://github.com/mediacurrent/gatsby-drupal-rain • https://bitbucket.org/mediacurrent/ci-tests/pull-requests/45
14. Q&A Jonathan Daggerhart - Daggerhart Lab @daggerhart Mark Shropshire - Mediacurrent @shrop Thank you for attending our session! We are happy to continue the conversation during and following the camp.