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 🥳