Cypress & Playwright - Speaker Deck

Slide 1

Slide 1 text

Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Cypress & Playwright Overcoming Cypress's Limitation 29.11.2021 Rainer Hahnekamp

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Caution ahead!

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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. Conﬁguration

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Coding Time

Slide 13

Slide 13 text

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. Conﬁguration

Slide 14

Slide 14 text

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. Conﬁguration

Slide 15

Slide 15 text

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. Conﬁguration

Slide 16

Slide 16 text

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. Conﬁguration

Slide 17

Slide 17 text

Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp

Slide 18

Slide 18 text

Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp Fallback slides 😅

Slide 21

Slide 21 text

Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp

Slide 22

Slide 22 text

Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp

Slide 23

Slide 23 text

Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp

Slide 24

Slide 24 text

Cypress DE Meetup, 28.11.2021 Rainer Hahnekamp