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
   

   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