$30 off During Our Annual Pro Sale. View Details »

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  6. Cypress: Inside browser testing
    E2E Framework
    Browser

    View Slide

  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

    View Slide

  8. View Slide

  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

    View Slide

  10. Playwright Architecture

    View Slide

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

    View Slide

  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"

    View Slide

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

    View Slide

  14. Tools

    View Slide

  15. Code
    Generator

    View Slide

  16. Debugging
    mode

    View Slide

  17. VSCode integration

    View Slide

  18. Trace View

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  22. View Slide

  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)

    View Slide