Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Playwright: Changing of the Guard in E2E Testing?

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.

Rainer Hahnekamp

June 23, 2022
Tweet

More Decks by Rainer Hahnekamp

Other Decks in Technology

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
  8. None
  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
  22. None
  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)