The talk explains the requirements and outcomes of e2e testing while describing best practices. I want to take away the fear and bad experience folks might have with flaky and never-ending e2e test suites. After giving an overview, I'll set up a new Playwright project from scratch to show what the still fairly new testing framework can do.

1. @stefanjudis
Playwright
can do this?

2. Does anyone remember
this friend?

3. Or this one?

4. @stefanjudis
stefanjudis.com | webweekly.email
Heyo,
I'm Stefan!
checklyhq.com

5. webweekly.email

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

7. But it was terrible.

8. Tests were slow, hard
to write and
fl
aky.

9. We run the tests
on demand.
My colleagues & I

10. We gave up. :/
My colleagues & I

11. Things got a lot better

12. Playwright is cross-everything

13. Run your tests in VS Code

14. More than a browser control
/
/
@ts
-
check
const { test, expect } = require("@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/");
});
});

15. Easy to parallelize
npx playwright test
-
-
workers 4
/
/
playwright.conf
i
g.js
const conf
i
g = {
workers: process.env.CI ? 2 : undef
i
ned,
};
module.exports = conf
i
g;

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

17. A very fast release cycle

18. Let's have a look!
#crowdCoding

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

20. Short and idempotent scripts
Best practices
Account createAccount login
Account update
Account delete
User account
fl
ow

21. Short and idempotent scripts
Best practices
Account create
Account login
Account update
Account delete

22. Short and idempotent scripts
Best practices
Account create
Account login
Account update
Account delete

23. Short and idempotent scripts
Best practices
Account create
Account login
Account update
Account delete

24. blog.checklyhq.com/how-low-level-api-calls-stabilize-your-end-to-end-tests/

25. Treat your UIs
like your APIs.

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

27. Your entire application
should be tested all the time!

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

29. The tech doesn't matter

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

31. @stefanjudis
www.stefanjudis.com
webweekly.email
Thanks!