Cypress & Playwright

Sometimes, but only sometimes, we have to do certain things that don't work so well in Cypress... like switching domains. There are workarounds but what should we do if we can't apply them? Switch to another E2E framework? Definitely no, but maybe we can "borrow" some of their functionalities.

In this talk, I will show you how to integrate Playwright into Cypress to navigate to an OAuth2 server and login. You will also see the new cy.session command in action which will significantly improve the speed of tests that require authentication.

Source Code Repository: https://github.com/rainerhahnekamp/cypress-and-playwright

Transcript

1. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Cypress & Playwright Overcoming Cypress's Limitation 29.11.2021 Rainer Hahnekamp
2. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp About Me... • Rainer Hahnekamp ANGULARarchitects.io • Trainings and Consulting @RainerHahnekamp www.angulararchitects.io https://www.youtube.com /c/RainerHahnekamp
3. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Caution ahead!
4. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp When you have no other choice...
5. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Agenda 1. Introduction 2. Live-Coding a. Playwright Script b. Integration in Cypress: cy.task c. Performance Boost: cy.session d. Configuration
6. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp What is a Super Domain? • Same Protocol • Same Port • Same Host https://docs.cypress.io:80/guides/guides/web-security#Same-superdomain-per-test Protocol Host Port
7. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Switching Super Domain: Use Cases 1. Verifying the Switch a. Redirection is the assertion b. Link to another domain is shown c. Network redirection 2. Single Switch a. OAuth2 b. Payment 3. Multiple Switches a. "Application Landscape" Test
8. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Application under Test External Application • Don't run the last step • Verify a link's attribute • Stub the redirection I: Verifying the Switch
9. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Application under Test External Application III: Multiple Switches At the moment, Cypress might not be the right choice.
10. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Application under Test External Application II: Single Switch • Use a Plugin • Replace switch with cy.request • Integrate another E2E Tool • Disable Chrome Web Security
11. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Playwright Approach • Hard to to implement/debug direct HTTP communication ◦ Implementation detail of Third party library ◦ Dependency on Plugin Maintainer • Easier to go via UI ◦ Expect changes more frequently ◦ Full Control over Code • Why Playwright? ◦ Whatever framework you are comfortable with.
12. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Coding Time
13. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Coding Time 1. Playwright Script 2. Integration in Cypress: cy.task 3. Performance Boost: cy.session 4. Configuration
14. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Coding Time 1. Playwright Script 2. Integration in Cypress: cy.task 3. Performance Boost: cy.session 4. Configuration
15. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Coding Time 1. Playwright Script 2. Integration in Cypress: cy.task 3. Performance Boost: cy.session 4. Configuration
16. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Coding Time 1. Playwright Script 2. Integration in Cypress: cy.task 3. Performance Boost: cy.session 4. Configuration
17. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp
18. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp
19. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Further Reading • Same-origin policy - Web security | MDN • Web Security | Cypress Documentation • Multidomain Support · Issue #17336 · cypress-io/cypress · GitHub • Replace window.location.replace from Cypress test • Playwright: Fast and reliable end-to-end testing for modern web apps • https://github.com/rainerhahnekamp/cypress-and-playwright
20. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Fallback slides 😅
21. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp
22. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp
23. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp
24. Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp