Playwright: Changing of the Guard in E2E Testing?

A talk I gave at the enterJS 2022, introducing Playwright and dealing with the question, if Playwright could cause a change of the guard in the world of E2E testing.

Transcript

1. Playwright: Wachablöse für Cypress? Rainer Hahnekamp 23.6.2022
2. About Me... • Rainer Hahnekamp ANGULARarchitects.io • Trainings and Consulting @RainerHahnekamp Professional NgRx https://www.ng-news.com https://www.youtube.com /c/RainerHahnekamp
3. Agenda • History, Context, Landscape • Playwright Architecture • Live-Coding ◦ A first test ◦ Selectors and actions ◦ Tooling • Advanced features
4. 2010 2005 2015 2020 2022 Selenium RC Selenium 2 CDP Cypress Playwright
5. E2E Framework Selenium: Outside browser testing Test Webdriver Webdriver Webdriver Webdriver
6. Cypress: Inside browser testing E2E Framework Browser
7. Two extremes Selenium / Webdriver ✅ Full browser access ✅ W3C Standard ✅ Scalable infrastructure ✅ Cross browser testing ⛔ Developer Experience improvable ⛔ Flakiness Cypress ✅ Superior developer experience ✅ Stable ⛔ Limited to CDP ⛔ Limited functionalities • Workarounds available • Not applicable
9. Playwright: Middle way • Outside browser testing • Everything from one hand ◦ Browsers, Testing Framework, Visual Regression • Limited to CDP, incl. "Safari" • Developer experience • Access existing Selenium Grid via CDP • Backed by Microsoft
10. Playwright Architecture
11. First test import { test, expect } from "@playwright/test"; test.describe("lectio", () => { test("greeting on landing page", async ({ page }) => { await page.goto("http://localhost:3000"); const greeting = page.locator("main div p"); await expect(greeting).toContainText("Welcome to Lectio"); }); });
12. Playwright's powerhorse: page.locator • Returns a promise of a DOM query • Chainable for actions • Argument for assertions (expect) • Different selectors (not just CSS) ◦ Text selectors ◦ Data-testid ◦ Location-based ◦ XPath ◦ React/Vue experimental • Nestable • Shadow DOM "piercing"
13. Actionability build-in • Based on action, Playwright runs checks before the action • Checks ◦ Attached ◦ Visible ◦ Stable ◦ Receive Events (no overlay) ◦ Enabled ◦ Editable
14. Tools
15. Code Generator
16. Debugging mode
17. VSCode integration
18. Trace View
19. Advanced features - visual regression import { expect, test } from "@playwright/test"; test.describe("Visual Regression", () => { test("talk card", async ({ page }) => { await page.goto("http://localhost:3000"); await page.locator("data-testid=mnu-talks").click(); const screenshot = await page .locator("data-testid=talk-card") .first() .screenshot(); await expect(screenshot).toMatchSnapshot("talk-card.png"); }); });
20. Advanced features - Network stubbing test("visually regress the talk card with stubbed network", async ({page}) => { await page.goto("/"); page.route("/talks**", (route) => { route.fulfill({ contentType: "application/json", body: JSON.stringify(mockedTalks), }); }); await page.locator('[data-testid="mnu-talks"]').click(); const card = await page.locator("data-testid=talk-card").first().screenshot(); expect(card).toMatchSnapshot("talk-card.png"); });
21. Further features • Parallel execution incl. sharding • Session storage for authentication • Video recording, screenshotting • Beta ◦ Component Testing ◦ Android Testing • Out-of-browser features ◦ Down- and uploading ◦ Dialog handling ◦ Drag & Drop ◦ Multiple Tabs ◦ Domain Switching
23. Summary ✅ Out-of-browser testing without flakiness ✅ Young but already mature framework ✅ iOS & MacOS support on Windows or Linux ✅ Backed by Microsoft ✅ Powerful Traceviewer ⛔ Multiple support tools instead of central UI ⛔ Little IDE support (expect VSCode)