Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cypress & Playwright

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

Rainer Hahnekamp

November 29, 2021
Tweet

More Decks by Rainer Hahnekamp

Other Decks in Programming

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