Playwright can do this?

Slide 1

Slide 1 text

@stefanjudis Playwright can do this?

Slide 2

Slide 2 text

Does anyone remember this friend?

Slide 3

Slide 3 text

Or this one?

Slide 4

Slide 4 text

@stefanjudis stefanjudis.com | webweekly.email Heyo, I'm Stefan! checklyhq.com GDE | Playwright Ambassador

Slide 5

Slide 5 text

webweekly.email

Slide 6

Slide 6 text

The idea of end-to-end testing was great!

Slide 7

Slide 7 text

But it was terrible.

Slide 8

Slide 8 text

Tests were slow, hard to write and fl aky.

Slide 9

Slide 9 text

We run the tests on demand. My colleagues & I

Slide 10

Slide 10 text

We gave up. :/ My colleagues & I

Slide 11

Slide 11 text

Things got a lot better

Slide 12

Slide 12 text

Playwright is cross-everything

Slide 13

Slide 13 text

Playwright is cross-everything

Slide 14

Slide 14 text

Run your tests in VS Code

Slide 15

Slide 15 text

Very solid typings

Slide 16

Slide 16 text

More than a browser control / / @ts - check import { test, expect } from "@playwright/test"; test.describe("navigation", () = > { test.beforeEach(async ({ page }) = > { / / Go to the starting url before each test. await page.goto("https: / / playwright.dev/"); }); test("main navigation", async ({ page }) = > { / / Assertions use the expect API. await expect(page).toHaveURL("https: / / playwright.dev/"); }); });

Slide 17

Slide 17 text

Easy to parallelize npx playwright test - - workers 4 / / playwright.conf i g.js import { def i neConf i g } from '@playwright/test'; export default def i neConf i g({ workers: process.env.CI ? 2 : undef i ned, })

Slide 18

Slide 18 text

Built for quick execution const button = page.locator('button') await button.click() await expect(button).toBeHidden() Auto-wait and web- fi rst assertions make waitFor statements redundant.

Slide 19

Slide 19 text

A very fast release cycle

Slide 20

Slide 20 text

Let's have a look!

Slide 21

Slide 21 text

Auto-wait Web- fi rst assertions Screenshots Test runner Retries Tracing VS Code extension Inspector Debugger Codegen Image Snapshots Native UI

Slide 22

Slide 22 text

Weekly Playwright tips youtube.com/checklyhq

Slide 23

Slide 23 text

There's no silver bullet when it comes to e2e testing...

Slide 24

Slide 24 text

... but Playwright is a stellar solution!

Slide 25

Slide 25 text

Treat your UIs like your APIs.

Slide 26

Slide 26 text

APIs are measured with the number of nines — 99.999%.

Slide 27

Slide 27 text

Your entire application should be tested all the time!

Slide 28

Slide 28 text

Account create Account login Account update Account delete 99.999% 99.1% 99.8% 99.94% Stellar frontends with con fi dence

Slide 29

Slide 29 text

blog.checklyhq.com/how-playwright-can-monitor-third-party-resources/

Slide 30

Slide 30 text

End-to-end monitoring should be your safety net.* * Your future-self will thank you!