2021-01-01
2350
#vanilla javascript
Paul Cowan
4265
Jan 1, 2021 ⋅ 8 min read

Cypress vs. Selenium: Why Cypress is the better option

Paul Cowan Contract software developer.

Recent posts:

Handling File Uploads In Next.js Using UploadThing

Handling file uploads in Next.js using UploadThing

Manage file uploads in your Next.js app using UploadThing, a file upload tool to be used in full-stack TypeScript applications.

Jude Miracle
Jun 21, 2024 ⋅ 15 min read
Exploring Advanced Support For Vite 5 In Storybook 8

Exploring advanced support for Vite 5 in Storybook 8

Explore the latest updates in Storybook 8, focusing on its improved support for Vite 5 as a build tool.

Will Soares
Jun 20, 2024 ⋅ 5 min read
Using Next Js With React Suspense To Create A Loading Component

Using Next.js with Suspense to create a loading component

Next.js 13 introduced some new features like support for Suspense, a React feature that lets you delay displaying a component until the children have finished loading.

Suraj Vishwakarma
Jun 19, 2024 ⋅ 9 min read
Exploring Angular 18's Redirectcommand Class And Let Block

Exploring Angular 18’s RedirectCommand class and @let block

Angular’s latest update brings greater control over redirects and the ability to define and assign variables within the template.

Lewis Cianci
Jun 19, 2024 ⋅ 6 min read
View all posts

45 Replies to "Cypress vs. Selenium: Why Cypress is the better option"

  1. Write Selenium tests properly — with a proper class for pages that can encapsulate most of the complexities, and then additional tests become a breeze, fragility addressed in one place. Use the object oriented properties of those “old” enterprise languages. The author lost me anyway by saying “only test the happy path.” If you believe in a world where errors never happen, and want to irritate your customers who hit them even more, then go ahead and serve up broken web pages. I will stick with a well-tested system.

    1. Hi Erica,

      when I said only test the happy path, I meant only write acceptance tests for the happy path. The vast majority of our tests should be fine grained inexpensive unit tests with a layer of integration tests. Acceptance tests with selenium are too brittle and too expensive to maintain.

      1. The problem is brittle tests, not their usefulness. I assure you that testing of user experience during error handling matters. Other types of tests, while also important, are not enough.

        Fix your brittle tests — write a proper Selenium Page, encapsulate common user functions, and see how easy it is to write robust tests.

  2. Cypress.io. Just what Selenium used to be, like 15 year ago: A sandbox contained JavaScript library, embedded in your page. Now,w use Webdriver/Wire Protocol technology.

    No multi-browser testing, regardless of how much HTML and JavaScript have evolved, still ends on products that work on Chrome but not on Firefox. I have seen this happening regularly for the last 20 years.

  3. Well written but my biggest complaint is that you make judgement with your title but don’t really make that point. It should be a question.

    Cypress has its uses but I don’t think it’s going to be the tool to end all tools, specifically selenium. Selenium written with custom attributes and proper encapsulated classes be they page level or component level can be a very effective and valuable tool still.

    Cypress is doing some sort of waiting, it’s just not explicitly done by the client wiring up the tests. What does Cypress do if it truly can’t find the element you are looking for? It probably waits up to a certain time and fails.

  4. I think that you didn’t understood the author.
    “Only test the happy path” – means that UI should be automated as less as it could. Much more to be covered in unit and integration tests, and then just automate the happy path with UI. I agree with this part.

  5. I agree with the other commenter. Use page objects and proper wait logic and selenium isn’t that difficult. This article also left out a very big concern of mine for Cypress. Cypress uses semantic click and keystroke events through the DOM API, and doesn’t actually interact with the UI itself. For a quality acceptance test Cypress won’t work due to this constraint. Cypress is great for a front end developer integration test, but I cannot see it’s place for a quality group.

  6. Hi Nick, I think wait logic is a bit of an oxymoron here. Selenium executes at break neck speed and not anything remotely like a user. you simply have to add lots of waitForXXX helpers. network latency in the CI environment quickly lead to non deterministic tests. you are left with a bunch of brittle and hard to maintain tests that make change really difficult, hence my call for 1 happy path acceptance test is sensible but I can see rushing to call this heresy by people who make a living adding a mountain of these tests.

  7. I think you are blaming selenium for developers bad practices in most cases. The waits are there for a good reasons. Im sure there is a thread.sleep buried in your dlls.

  8. The title should be a question mark. The content has not convinced me that it is a selenium killer.

  9. From my point of view this article makes the wrong assumption from the start. It is not Selenium’s problems if tests are flaky – you need a good test framework to handle this well. Also he totally dismisses the point that Webdriver is now a W3C standard that vendors have to follow. Of course, if you have to test in Chrome only, it will be much faster as it is running inside of it. The same applies if you use an ios or android specific test framework as opposed to a generic one for all.

  10. How does that “logon error” test work? Clicking the submit button is likely to kick off some asynç work, but you check for the error message immediately after clicking it.

  11. That’s a pretty substantial list of drawbacks and the only pro that I take away from this article is that I don’t have to explicitly handle any waiting in my code. I’d gladly add the one-liner wait statements here and there as a tradeoff for that laundry list of drawbacks.

  12. Cypress waits for a page load event before firing the next enqueued command. In this case either a toast message is displayed and cypress will find it or the page would attempt to log in and be redirected back to a failed login page. He kind of glossed over how being in the same run-loop as the application gives Cypress access to the network. Thus it can ensure (unless your app doesn’t send a page load event) in most cases that next command waits for the proper state.

  13. Also in defense of a different way: POM abstraction in most large case test suites tends to be a detriment for upkeep and onboarding. I can’t tell you how many times an entire suite is thrown away because reverse engineering it can be maddening for a new SDET. So to those who think page objects solves the selenium problem are missing the point. Cypress stresses quick test creation and state management + easy ci/cd setup.

  14. Cypress.io is not a replacement or killer for Selenium WebDriver it’s just another cool and trending tool to use, which looks awesome and really have a lot of cool features. One of the big problems of cypress is inability to do cross browser testing, so currently only chrome browser and electron framework are supported. Selenium WebDriver on the other hand is a W3C standard (https://www.w3.org/TR/webdriver1/) and all the major web-browsers creators supporting it by developing dedicated WebDrivers which are W3C standard compliant.
    Now cypress would like to support all the other browsers in the future, and they figured out that to do this they will need to use the same dedicated WebDrivers which Selenium is currently using (https://github.com/cypress-io/cypress/issues/310).

  15. However, cypress has lots of limitations, for instance you can’t upload or download files, no multiple tabs or iframes support. While Cypress is a good tool for components testing, for general end 2 end tests I prefer Puppeteer from Google Chrome. I also use CodeceptJS which has a very simple syntax and brings cypress-like experience to Puppteer.

  16. Cypress does have a lot of limitations, however some of which you mentioned aren’t or can be circumvented at least.

    You can upload files by trigger a drop event on the desired input field
    (https://github.com/cypress-io/cypress/issues/170#issuecomment-311196166)

    And you can download files and make assertions on them
    You can catch the name of the downloaded file by catching the event
    https://docs.cypress.io/api/events/catalog-of-events.html#Event-Types

    And since cypress runs on node you can read directories and make assertions on the existence of the downloaded file in the appropriate folder.

    Imo cypress won’t replace selenium, but it is an easily graspable and implementable tool which can ease development for the developers, since they can debug the app during the tests

  17. The lack of Cross Browser support is a deal killer, and will also be a Cypress killer if they don;t figure it out.

  18. I agree with this. In my current project first end to end test was developed in 2 hours by newly joined SDET. With existing POM selenium framework it would have been min 2 days to understand the framework then start using existing “reusable” methods to develop first script.

  19. Cypress is not a Selenium killer, rather it adds to the stack of tools to use. Cypress is very good at quickly testing components on a page and proving that they work. You can then use Selenium to test the e2e flows through the web app hitting the top 3-5 flows that users take. With less flows through the app the Selenium framework can be smaller and therefore less complicated. If there is a failure you know it is to do with the component integration or (if you are doing cross-browser testing) the browser’s implementation as the cypress tests have already tested the logic.

  20. This comment is absolutely true for me. These tools are complimentary. Cypress needs to work across browsers though for QA Engineers to be engaged with it.

  21. I see that most comments are regarding the Cypress only testing in Chrome, now with 4.0, Cypress supports Edge and Firefox. Article should be updated.

  22. I can still see my cypress test runner, running only on chrome or electron browsers. Can you please provide any more documentation regarding this please. That would be appreciated..

  23. I run through all the comments , and i am more confused now 🙁 I am an automation tester, currently working with selenium web driver but i want to replace the existing selenium test framework with Cypress, can i go ahead with this ?

  24. I’m pretty sure this piece is not that relevant anymore. I’ve used new versions of Selenium IDE. It’s flexible, you barely need any code, everyone can work with it. It’s great.
    I’ve been creating Automated Tests for a few years, using different methods and yes, “oldschool” Selenium is quite time-consuming.

    I’ve been looking for differences between Selenium IDE and Cypress.io to see which works best, but thusfar I don’t see it.
    I’ve set up a project with a lot of tests which can be run simultaneously. I’ve created a PowerShell to handle them in TFS and create useful test output. It was easy, fast and security-wise it seems to be the best option as well.

    Can someone convince me Cypress.io is fast to learn and better to use?

  25. Well, I rarely use waits while automating a very old and very bad written application.
    Using POM for better test clarity and only disabling waits where needed to speed up execution, with perhaps adding some waits where we switch between apps or display very long lists (we don’t have 100% control of test data!).
    Newest Selenium has build in waits which solves all the problems earlier versions had.

    Its good, when used properly. And yes it needs to be maintained, both TF and tests.
    I just think the author isn’t doing his selenium the right way, hence the mess he is experiencing.

  26. The moment you write first ten tests and you end up with enough objects and methods that writing 40 new equals to creating 40 new xml files with test data and maybe a single new line of code per test, you will know you did you abstraction the right way.
    Naming conventions and object pages organisation is the key. If you don’t have these, you will end up with a mess of illegible code. Do POM the right way and it will lead you to the success.
    This is important. Proper conventions, clean code, code reviews and maintenance for automation tests and framework are vital for a long term project success.

  27. Same here – Cypress is a novelty, something good to learn to know why Selenium remains an industry gold standard, if it is behind a proper Automation Framework.
    I’m working on TestNG+Selenium combine framework where we also have some API and Unit tests.
    All can be done from a single framework where needed, as needed.

    I guess it’s just a matter of how people work. Our tests for UI follow POM and we map test steps to code lines (usually few lines of reusable methods per step), so they look very different than this ‘it’ convention that I somehow always relate to Protractor.

    But the way ours are written, you can read the code aloud and they make perfect english sentences describing what user is doing. API and unit tests are simpler (send request, check response, assert method results) but for system tests you could have zero coding skills and you should still be able to read what we coded and understood what happens.

    // Step 1
    logIntoApp

    // Step 2
    navigateToUserProfile

    // Step 3
    selectProfileDetails
    assertTrue(userIdEqualsTestData)

    Etc. Easy enough. And the reason we write it that way is exactly to allow any newcomers to understand what is going on in the test and in the code. Maintainability is second most important quality of test automation framework after usability 🙂

  28. We did a study to compare Cypress.IO, Selenium IDE with other options and chose WebdriverIO instead. It’s easy to use, flexible and stable.
    It’s not easy to use Gherkin, but it’s possible.
    There are easy-to-use packages, you only need NPM and drivers (I use Visual Code for editting).

    Although I spent a lot of time setting up my Selenium IDE, Selenium, MS Coded UI Testing and learned a lot, this is the best choice to be able to run locally for us with a great reporting Allure add-on.

    This is no ad because it’s free to use, but I’m glad we’re using it. I created 300 tests in a short period and it runs within a few minutes headless (and they aren’t small either).

  29. Well I used both Cypress and Selenium. Both have the adventages and down sides but major problem of Cypress is stability because cypress code is constantly changed which causing much bigger problem with the maintanace of the tests over time on complex project. In some versions they literaly depreacated a lot of methods which made tests written in the previous version useless. Also if you are using the cypress in regular mode without any patterns enforced, as it is suggested by cypress team, it is absolut nightmare to mantain the large number of tests over time and there will be a lot of overlappings in the tests. Also cypress has the severe issues with the React and interaction with React elements is also nightmare especially if the App code isn’t perfect. Due to limited number of browser supported and tab limitation it is also useless in complex flows or multiple app testing. Thus from my experiance so far cypress will never be able to replace selenium. At the moment it is just one of the fancy tools which is hyped. Cypress is ok only for quick validation of the simple apps during the sprints or for some test which will not be used anymore in the future. For all other projects that required constant regressions and monitoring Selenium will be always better option. Just design appropriate selenium framwork with appropriate and simple granular page object with methods that work with each element on the page seperatelly and remove driver from the tests by hiding the driver handling behind generic classes like base suite or the base test and it will be as simple for usage as Cypress but much better option for long term project.

  30. Thoughts on Cypress vs Selenium

    Selenium has failed me in spectacular fashion trying to write automated UI tests for an Ext6 JS based product. Totally flaky. I had to rely on complex xpaths to locate elements that were plagued with being hidden, detached you name it. Used POMs, waits, eventually just gave up. In defense of Selenium Ext6 JS DOM is notoriously bloated and our developers didn’t add unique IDs or attributes to elements (a big help surely).

    I tried Cypress yesterday and got further in half a day than in a week with Selenium. Plus I drove Selenium with Python which I have a lot of experience with. Cypress uses Javascript which I am not as well versed in, I still got a lot further and faster than with Selenium.

    I noticed there is also SeleniumBase so I gave it a whirl. Same agony. In exasperation I wrote a Tornado server to serve up various pages and explore Cypress vs Selenium. Again the latter is just useless re stability. I had a simple click-a-button-increase-font-size page and Selenium repeatedly crashed clicking the button to grow the text (connection time out or some such nonsense). Cypress not once. Never. That is surely the starting point you evaluate any automation tools with ! You can’t afford false negatives or positives !!

    Selenium is hyped beyond belief, at least for me it is one of the worst tools I have ever had to use. I suspect the success stories are because developers designed for testability and added unique IDs to elements so were easier to find and whatever JS library was used worked better with Selenium. But what to do if they didn’t? and a code base is over a decade old? I have to conclude Selenium is the most hyped and soul destroying product I have worked with in a decade of automation.

  31. Usually I do not leave comments on blogs, but A LOT of misunderstanding is going on here.

    First, about the element lifecycle exceptions (NoSuchElement, StaleElememtReference, etc.) and Selenium waiters
    1. These exceptions helps to verify negative tests and are an integral part of healthy testing design.
    2. Waiters are not part of the WebDriver protocol, and are just a client implementation and can be easily replaced or customized.
    3. The full control over the element life cycle is very important when testing dynamic applications and I don’t want “silent” waiters in some cases.

    Second, Cypress is based on JavaScript which means it is bound to all JS restrictions including CORS policies (WebDriver is not bound to these restrictions). You will not be able to work cross pages or frames which violates the CORS policy. For instance, try to use Cypress with MS Dynamic CRM products.

    Third, about flaky tests, the only thing it indicates is a bad implementation. I had these problems when I began automation but when I really understood how things works I stopped experience it and I do not have flaky tests in the past 8 years(!!!). Cypress implements some of the flakiness mitigating under the hood, while in Selenium you need to implement it by yourself, while having a full control over the element lifecycle.

    In general, Selenium is basically just a WebDriver client… IT DOES NOTHING but sending POST/GET/DELETE requests to the WebDriver.

    It is not a perfect client, but it does the work. The whole point of WebDriver is to create a unified protocol for automation (that is why it is the industry standard), all that is WebDriver including Appium and some Windows/OSX drivers were designed to give a single unified client for different automation platforms.

    Lets say, I have a web application and native mobile application and I need to test my application on
    1. All browsers
    2. At least 5 last versions of Android
    3. At least 5 last versions of iOS

    The WebDriver protocol allows me to do it with a single framework and a single tech stack.

    As long as tools like Cypress will interact directly with the browser they will not have this capability since they do not have the abstraction layer to communicate with the application under test.

    Furthermore, anything can be WebDriver and the protocol can be (and does) implemented for different application types such as back-end testing, database testing and anything you can imagine. By doing so, I can run all my tests in a distribute way on and against any platform – independent from code or tool, using a single tech stack and unified standard.

    Forth, Cypress cannot distribute tests out of the box as you would have in Selenium grid. You can use 3rd party like https://www.browserstack.com/ to achieve that, but it might be very expansive. You can also implement your own orchestrator (good luck with that) – it might sounds not so important, but lets say you have 6000 tests and your want to parallel them over 100 pods in Kubernetes.

    Conclusion
    Cypress is good and powerful, but it have it’s own use case. It cannot replace Selenium, since it lacks the necessary abstraction, flexibility and functionality and it works on completely different paradigm.

    It can be a very useful tool for front developers who wants to write components or integration tests assuming no CORS limitations and no cross browser testing is needed.

    Most automation engineers, do not write automation in JavaScript (for a good reason, I will write a different post about it), which makes platforms like Cypress and Oxygen less appealing.

  32. There are already different solutions to run parallel cypress tests, even cypress has it’s own but is paid. Saying so, there are some others that are free.

  33. The article is ridiculous. I came here for an answer but I got nothing. Just to point one obvious issue with it — regarding “wait”, sure you don’t write anything like “Thread.sleep” with Cypress, but there is a loop somewhere in Cypress that keeps checking an element you are looking for. You always need to wait for that element to show up in these UI tests. With proper wrapper classes, you could achieve the same thing with Selenium (hiding the wait logic).

Leave a Reply