Basta Spring 2024 - Cypress und Playwright

Transcript

1. RainerHahnekamp Playwright Cypress und Playwright Rainer Hahnekamp 15. February Basta Spring 2024
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 Agenda 1. Technological Approach 2. Developer Experience 3. CI 4. Coding 5. Architecture & Extensibility 6. Misc. Features 7. Summary
6. RainerHahnekamp Technological Approach
7. RainerHahnekamp 2010 2005 2015 2020 Selenium RC Selenium 2 CDP Cypress Playwright
8. RainerHahnekamp Playwright: Outside browser testing Test CDP
9. RainerHahnekamp Cypress: Inside browser testing Cypress Test Browser
10. RainerHahnekamp 2 iFrames, same origin
11. RainerHahnekamp Browser Support • Browsers ◦ Chromium Family ◦ Firefox ◦ Webkit • Languages ◦ JavaScript/TypeScript ◦ .NET ◦ Java ◦ Python Playwright • Browsers ◦ Chromium Family ◦ Firefox ◦ Webkit • Languages ◦ JavaScript/TypeScript
12. RainerHahnekamp Playwright Waiting Feature: Auto-Wait
13. RainerHahnekamp Cypress Waiting Feature: Actionability
14. RainerHahnekamp Dependencies • Almost Zero dependencies • Build everything on their own Mocha & Chai jQuery Playwright
15. RainerHahnekamp Developer Experience
16. RainerHahnekamp Cypress Test Runner Embedded Browser Test Code History with "Time Travel" Detailed Logging Info
17. RainerHahnekamp Playwright Native Debug Mode Playwright Inspector
18. RainerHahnekamp Playwright VSCode Integration Interactive Selector Highlighting Debugging Execution Management
19. RainerHahnekamp Playwright UI Mode Test Log Embedded Browser TraceView
20. RainerHahnekamp CI
21. RainerHahnekamp CI • Traceview • Parallelization • Sharding Playwright • Video Recording per Test • Screenshot for failed Test • Commercial Cypress Cloud
22. RainerHahnekamp Cypress Video Recording
23. RainerHahnekamp Cypress Screenshot on Error
24. RainerHahnekamp Playwright Trace Viewer
25. RainerHahnekamp Coding
26. 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"
27. RainerHahnekamp cy.visit() cy.get() cy.click() synchronous • visit • get • click asynchronous
28. RainerHahnekamp Architecture & Extensibility
29. RainerHahnekamp Architecture & Extensibility • Recommends Page Objects • Fixtures as DI Playwright • Page Objects possible • Recommendation to extend cy ◦ Mind the Query!
30. 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(); } }
31. 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); }, };
32. 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'); // ... });
33. 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(); });
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 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(); });
36. RainerHahnekamp Misc. Features
37. RainerHahnekamp Miscellaneous Features • Network: Stubbing, Verifying, Requesting • Visual Regression • A11y: User-Facing Selectors, Axe Plugin • Recorder: Chrome Extensions • Session Storage
38. RainerHahnekamp Summary
39. RainerHahnekamp Browser Support ✅ Performance ✅ More Control over the Browser ✅ Tracing ✅ Backed by Microsoft Playwright ✅ Developer Experience ✅ Mature ✅ Component Testing
40. RainerHahnekamp Thanks!!!
41. 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