Cypress or Playwright?

Transcript

1. RainerHahnekamp Cypress or Playwright? JAX, 25.4.2024 Rainer Hahnekamp
2. RainerHahnekamp About Me... Professional NgRx https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff • Rainer Hahnekamp ANGULARarchitects.io • Developer / Trainer / Speaker Modern Spring for Angular @RainerHahnekamp
3. RainerHahnekamp Goal • Discuss both Frameworks from different Perspectives • Provide enough information for a founded decision • Present my own opinion
4. RainerHahnekamp
5. RainerHahnekamp
6. RainerHahnekamp Agenda 1. Technological Approach 2. Developer Experience 3. CI 4. Coding 5. Architecture & Extensibility 6. Misc. Features 7. Summary
7. RainerHahnekamp Technological Approach
8. RainerHahnekamp 2010 2005 2015 2020 Selenium RC Selenium 2 CDP Cypress Playwright
9. RainerHahnekamp Playwright: Outside browser testing Test CDP
10. RainerHahnekamp Cypress: Inside browser testing Cypress Test Browser
11. RainerHahnekamp 2 iFrames, same origin
12. RainerHahnekamp Browser Support • Browsers ◦ Chromium Family ◦ Firefox ◦ Webkit • Languages ◦ JavaScript/TypeScript ◦ .NET ◦ Java ◦ Python Playwright • Browsers ◦ Chromium Family ◦ Firefox ◦ Webkit • Languages ◦ JavaScript/TypeScript
13. RainerHahnekamp Playwright Waiting Feature: Auto-Wait
14. RainerHahnekamp Cypress Waiting Feature: Actionability
15. RainerHahnekamp Dependencies • Almost Zero dependencies • Build everything on their own Mocha & Chai jQuery Playwright
16. RainerHahnekamp Developer Experience
17. RainerHahnekamp Cypress Test Runner Embedded Browser Test Code History with "Time Travel" Detailed Logging Info
18. RainerHahnekamp Playwright Native Debug Mode Playwright Inspector
19. RainerHahnekamp Playwright VSCode Integration Interactive Selector Highlighting Debugging Execution Management
20. RainerHahnekamp Playwright UI Mode Test Log Embedded Browser TraceView
21. RainerHahnekamp CI
22. RainerHahnekamp CI • Traceview • Parallelization • Sharding Playwright • Video Recording per Test • Screenshot for failed Test • Commercial Cypress Cloud
23. RainerHahnekamp Cypress Video Recording
24. RainerHahnekamp Cypress Screenshot on Error
25. RainerHahnekamp Playwright Trace Viewer
26. RainerHahnekamp Coding
27. RainerHahnekamp Coding: Selectors, Actions & Assertions • Testing framework built-in ◦ Different Selector Engines ◦ Special Web Assertions • Locators as Abstraction to DOM • Async/Await Playwright • Relies on External Libraries ◦ Selection via jQuery ◦ Assertion via Mocha & Chai ◦ Explicit Assertions • Retryability • "Declarative Asynchrony"
28. RainerHahnekamp cy.visit() cy.get() cy.click() synchronous • visit • get • click asynchronous
29. RainerHahnekamp Architecture & Extensibility
30. RainerHahnekamp Architecture & Extensibility • Recommends Page Objects • Fixtures as DI Playwright • Page Objects possible • Recommendation to extend cy ◦ Mind the Query!
31. RainerHahnekamp Playwright Page Object import { Page } from '@playwright/test'; export class SidemenuPage { constructor(private page: Page) {} async select(menu: 'customers' | 'holidays') { await this.page.getByTestId(`btn-${menu}`).click(); } }
32. RainerHahnekamp Playwright Fixture import { SidemenuPage } from '../page-objects/sidemenu-page'; export interface SidemenuFixtures { sidemenuPage: SidemenuPage; } export const sidemenuFixtures = { sidemenuPage: async ({ page }, use) => { const sidemenuPage = new SidemenuPage(page); await use(sidemenuPage); }, };
33. RainerHahnekamp Playwright Usage in Test const test = base.extend<SidemenuFixtures>(sidemenuFixtures); test('rename Latitia to Laetitia', async ({ page, sidemenuPage }) => { await page.goto(''); await sidemenuPage.select('customers'); // ... });
34. RainerHahnekamp Cypress Commands declare namespace Cypress { interface Chainable<Subject> { openMenu(item: 'Customers' | 'Holidays'): void; } } Cypress.Commands.add('openMenu', (item: 'Customers' | 'Holidays') => { cy.findByRole('link', { name: item }).click(); });
35. RainerHahnekamp Cypress Commands declare namespace Cypress { interface Chainable<Subject> { openMenu(item: 'Customers' | 'Holidays'): void; } } Cypress.Commands.add('openMenu', (item: 'Customers' | 'Holidays') => { cy.findByRole('link', { name: item }).click(); });
36. RainerHahnekamp Cypress Queries declare namespace Cypress { interface Chainable<Subject> { openMenu(item: 'Customers' | 'Holidays'): void; testid(selector: string): Chainable<JQuery<HTMLElement>>; } } Cypress.Commands.add('openMenu', (item: 'Customers' | 'Holidays') => { cy.findByRole('link', { name: item }).click(); }); Cypress.Commands.addQuery('testid', (selector: string) => { const getFn = cy.now('get', `[data-testid=${selector}]`) as () => Promise<Chainable<JQuery>>; return () => getFn(); });
37. RainerHahnekamp Misc. Features
38. RainerHahnekamp Miscellaneous Features • Network: Stubbing, Verifying, Requesting • Visual Regression • A11y: User-Facing Selectors, Axe Plugin • Recorder: Chrome Extensions • Session Storage
39. RainerHahnekamp Summary
40. RainerHahnekamp Browser Support ✅ Performance ✅ More Control over the Browser ✅ Tracing ✅ Backed by Microsoft Playwright ✅ Developer Experience ✅ Mature ✅ Component Testing
41. RainerHahnekamp Thanks!!!
42. RainerHahnekamp Contact Data @Rainer Hahnekamp https://www.youtube.com/@RainerHahnekamp https://www.youtube.com/@ng-news https://www.angulararchitects.io https://www.rainerhahnekamp.com https://github.com/softarc-consulting/sheriff