Playwright: Wachablöse für Cypress? Rainer Hahnekamp 23.6.2022

About Me... ● Rainer Hahnekamp ANGULARarchitects.io ● Trainings and Consulting @RainerHahnekamp Professional NgRx https://www.ng-news.com https://www.youtube.com /c/RainerHahnekamp

Agenda ● History, Context, Landscape ● Playwright Architecture ● Live-Coding ○ A first test ○ Selectors and actions ○ Tooling ● Advanced features

2010 2005 2015 2020 2022 Selenium RC Selenium 2 CDP Cypress Playwright

E2E Framework Selenium: Outside browser testing Test Webdriver Webdriver Webdriver Webdriver

Cypress: Inside browser testing E2E Framework Browser

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

No content

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

Playwright Architecture

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"); }); });

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"

Actionability build-in ● Based on action, Playwright runs checks before the action ● Checks ○ Attached ○ Visible ○ Stable ○ Receive Events (no overlay) ○ Enabled ○ Editable

Tools

Code Generator

Debugging mode

VSCode integration

Trace View

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"); }); });

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"); });

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

No content

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)