Slide 1

Slide 1 text

Matija Marohnić Cypress vs. Playwright End-to-end testing showdown https://silvenon.com/blog/e2e-testing-with-cypress-vs-playwright

Slide 2

Slide 2 text

My experience with Cypress

Slide 3

Slide 3 text

Background • prior experience with tools like WebdriverIO • used Cypress for a long time • friendlier API • approachable • but eventually mostly for critical functionality

Slide 4

Slide 4 text

Speed • 5 tests = 45s (locally) • compared to my other optimizations it became uncomfortable • started writing less tests 💔

Slide 5

Slide 5 text

GUI 🤷

Slide 6

Slide 6 text

GUI

Slide 7

Slide 7 text

API • familiarity = jQuery 😔 • won’t look familiar to any new developers

Slide 8

Slide 8 text

API • should = expect

Slide 9

Slide 9 text

API • wrap objects to make assertions • another round of jQuery for everyone! 🍻

Slide 10

Slide 10 text

API • synchronous…? • commands are queued to be run later

Slide 11

Slide 11 text

Meet Playwright 🎭

Slide 12

Slide 12 text

Background • new testing framework by Microsoft • haven’t used it in any serious projects yet • only side projects

Slide 13

Slide 13 text

Supports WebKit • unlike Cypress, Playwright supports Safari • Safari’s support table can be uncomfortable, so it’s really useful

Slide 14

Slide 14 text

Headless by default • seemed odd at fi rst • turned out to be a great feature • less clutter, no dashboards or browsers • run headed only when you need to debug

Slide 15

Slide 15 text

Speed • 13 tests = 3s ⚡ • more than 2x as many tests = 15x faster • speed is no longer an issue • started testing every square inch of my blog

Slide 16

Slide 16 text

API • asynchronous, almost everything needs to be awaited

Slide 17

Slide 17 text

API • at fi rst repetitive and error-prone, mistakes aren’t always obvious • but gives full control over execution order, more transparent

Slide 18

Slide 18 text

API • uses Jest’s expect library for assertions, so looks more like a unit test • doesn’t need a Testing Library plugin, locators are powerful

Slide 19

Slide 19 text

VS Code extension 🤯 • killer feature • makes Playwright really e ffi cient to use! • run a test just by clicking on it, and much more • a more balanced approach to GUI — stay in your text editor • 👨💻

Slide 20

Slide 20 text

…and so much more!

Slide 21

Slide 21 text

• I’m always excited to learn more about Playwright • it makes me want to write more tests 🥳