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
   

   View Slide

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
   

   View Slide

3. Cypress DE Meetup, 28.11.2021
   Rainer Hahnekamp
   Caution ahead!
   

   View Slide

4. Cypress DE Meetup, 28.11.2021
   Rainer Hahnekamp
   When you have no other choice...
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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.
   

   View Slide

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
    

    View Slide

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.
    

    View Slide

12. Cypress DE Meetup, 28.11.2021
    Rainer Hahnekamp
    Coding Time
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

17. Cypress DE Meetup, 28.11.2021
    Rainer Hahnekamp
    

    View Slide

18. Cypress DE Meetup, 28.11.2021
    Rainer Hahnekamp
    

    View Slide

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
    

    View Slide

20. Cypress DE Meetup, 28.11.2021
    Rainer Hahnekamp
    Fallback slides 😅
    

    View Slide

21. Cypress DE Meetup, 28.11.2021
    Rainer Hahnekamp
    

    View Slide

22. Cypress DE Meetup, 28.11.2021
    Rainer Hahnekamp
    

    View Slide

23. Cypress DE Meetup, 28.11.2021
    Rainer Hahnekamp
    

    View Slide

24. Cypress DE Meetup, 28.11.2021
    Rainer Hahnekamp
    

    View Slide