Add to Chrome
Add to Edge
Add to Firefox
Add to Opera
Add to Brave
Add to SafariWhen comparing Chrome DevTools vs Cypress, the Slant community recommends Cypress for most people. In the question“What are the best test automation tools for web apps?” Cypress is ranked 4th while Chrome DevTools is ranked 7th. The most important reason people chose Cypress is:
You can edit your test code in the browser and instantly see it run as you change the code.
Question Ranking
Pros
Pro No need for a separate tool
Chrome comes with DevTools baked in. So if Chrome is used for development and it fills the need, there's no need for a separate tool.
Pro Web UI to develop tests quickly
You can edit your test code in the browser and instantly see it run as you change the code.
Pro Easy to record a video
It can easily record a video so you can understand what happened when a test failed in your CI.
Pro Amazing dashboard to view reports and recordings
The Cypress dashboard allows you to see every run on a great UI linked to commits and gitflow.
Pro Cross Browser testing
https://docs.cypress.io/guides/guides/cross-browser-testing.html
Chrome
Firefox
Edge
Electron
Brave
Cons
Con Limited to the box model of elements
DevTools only displays measurements of the HTML element's box that means that it can't measure, for example, relative to text's baseline or objects within a canvas element.
Con Does not measure distance between elements
DevTools measure dimensions of HTML elements only.
Con Doesn't support Safari
Con Single tab only
Does not and will not support multiple tabs or multiple simultaneous browsers.
See https://docs.cypress.io/guides/references/trade-offs.html#Permanent-trade-offs-1
Con Heavy in setup
Do not add Cypress in the main repo. Have a specific test repo for it or you will be sorry when the CI/CD flow takes 5-6 min longer every build due to installation time of Cypress.
