Hello devs and testers, in this article, I’ll show you how we can write automated end-to-end tests on an angular project which is Todo App on cypress. We will have some scenarios for doing our e2e tests and we will be covering it one by one. This article will not probably be covering angular parts but cypress parts.

So if you just want to write some tests right now, do clone this repo which I have already created with the angular Todo App project and cypress configured in it. Here’s the repo link https://gitlab.com/mquanit/angular-items. Just clone this, if you want everything ready for playing with cypress.

So, before moving to our examples, first, we have to know what is Cypress. According to its official Website

Cypress is an automated end-to-end testing framework for writing automated tests

But why should we use cypress when we have many other testing tools like Protactor, Karma, Mocha, etc.

Cypress is much like Protractor for Angular applications, but Cypress is much faster to run and easier to debug. Cypress not only is good at the automated end-to-end testing that is independent of our applications, but also is capable of unit testing against methods in model classes, service classes, and so on. Cypress provides a complete end-to-end testing experience in your browser where you can see your tests in an automated way.

Cypress provides it’s own test runner where you can do the tests locally. Cypress provides some other cool features like Time Travel, Debuggability, Real-time reloads, Automatic waiting. These brilliant features make apart this tool and we will see these in action.

Enough talk. If you’ve already cloned this repo then you’re good to go but if not then you probably have an Angular project and you just have to add Cypress as a dependency. We only need to install the cypress NPM package using the following command:

npm i -D cypress

#angular #cypress #tdd #automated-testing