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:

* https://github.com/mediacurrent/gatsby-drupal-rain
* https://bitbucket.org/mediacurrent/ci-tests

Presented at Concord Software Developers

Transcript

1. Looking to Test Decoupled Sites? Get Ready to Be Impressed with Cypress! 05/11/2023 PREPARED FOR: Concord Software Developers Meetup Concord Software Developers
2. Your Presenter ABOUT US – 2 Mark Shropshire Senior Technical Director Mediacurrent Mark Shropshire “shrop” is an active public speaker, podcaster, and local tech meetup organizer focusing on web and application development. As a Senior Technical Director at Mediacurrent, he supports team success through coaching, mentorship, and technical leadership. Shrop is a creative leader who has a heart for helping individuals be their best while working with teams delivering best-in-class software projects built with open source technologies.
3. Agenda 01 What’s Cypress? 02 Why Cypress? 03 Live Demos! 04 Q&A 3
4. 4 Wait! What’s Decoupled Drupal?
5. 5 Decoupled Architecture Example 5 API User-Facing Website Images Campus Alerts Files Send Emails for News Publications, etc.
6. 6 01 What’s Cypress?
7. 7 “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 7
8. 8 Features WHAT’S CYPRESS? – 8 • Time Travel • Debuggability • Automatic Waiting • Spies, Stubs, and Clocks • Network Traffic Control • Consistent Results • Screenshots and Videos • Cross browser Testing Image credit: Cypress documentation
9. 02 Why Cypress? 9
10. 10 Open Source + SaaS WHY CYPRESS? – + =
11. 11 Easy Installation - Just Works WHY CYPRESS? – 11
12. 12 12 Excellent Documentation WHY CYPRESS? –
13. 13 13 Cypress App WHY CYPRESS? – Image credit: Cypress Features
14. 14 Cross-Browser Testing WHY CYPRESS? – 14
15. 15 03 Live Demos! Demo Repos: • https://github.com/mediacurrent/gatsby-drupal-rain • https://bitbucket.org/mediacurrent/ci-tests
16. 16 16 July 7th-9th Trainings on Friday Sessions on Saturday Community Day on Sunday
17. Q&A Mark Shropshire - Mediacurrent shrop.dev @shrop