In this blogpost we will cover how to get started with end to end testing using cypress and angular and the AngularCLI.
The code for this blogpost can be found here
As a long term AngularCLI user I am very used to work with protractor when it comes to end to end testing. To be honest I did not like end to end testing that much. So I was looking for an alternative and this tweet from Dominic Elm pushed me more into the direction of cypress.
🎉 ngx-drag-to-select is now thoroughly tested using @cypress and @fbjest. Those two make it so much more fun to write tests ❤️🔥— Dominic Elm 🎓 (@elmd_) April 25, 2018
If you are curious what it looks like to write e2e tests with Cypress, here's the code:https://t.co/YELpaHFxr6
So I started taking a closer look.
Cypress is an end to end testing utility which can run beside your maybe existing protractor tests. To install it just run the following command and it persists to your package.json.
npm i cypress --save-dev
As your application has to run while cypress is testing it I use a package called
concurrently to run two commands in parallel. In this case I want to start my application and want to start cypress as well.
If you now start the cypress tests you will notice that cypress created a folder “cypress” for you. In there is a folder called “integration” which is holding your tests
This is just the default folder. You configure a lot in the cypress variables. Just check them out and play around with them. The folder is quite interesting in the beginning because it provides a good starting point watching the file “example_spec.js” which contains some example tests.
The application is rather simple and is just a Todo-List which we want to test end-to-end. We have a form component which can throw the output of an added todo and a list component which can mark items as “done” and expects a list of items as input.
Every item gets a button beside it which can be clicked to mark the item as “done”. When an item is marked as “done” we will apply a css class called “inactive” on it.
So even if it is a small todo application we have:
- an input which we can type something in
- a button which is not active when the input is empty
- another button for each todo item to mark it as done
- a todo list containing all the items no matter if they are marked as done or not
So this is a nice scope to get started wich cypress. So lets go and write some tests for first checking only the title.
Writing tests with Cypress
So let’s check if the title is correct as our first test. We can wrap all our tests in an describe method which takes a string and another method where we can implement the tests.
The well known “it” method then is wrapping our test directly. First of all we have to visit our site because otherwise we would not have anything to test. Once loaded, we can access the main properties via the “cy” object which cypress provides us.
Notice that we write tests actually like we would describe them (well…sort of ;-) ). We will get to that point later again.
However, now we know how to visit a site and how to check properties…lets access some controls. Because that is the most interesting part. We can access controls like we would do it with jQuery with an id for example. So the button
can be accessed with
Lets check if our “Add Todo” button contains the words “AddTodo”
We do not want to write that
cy.visit('http://localhost:4200'); everytime, so lets put that in a
beforeEach at the top of our tests.
Lets also check if the button is disabled if nothing has been typed in yet:
Again we can write tests like we would speak it.
Let’s take that a little bit further and get some things chained with cypress. Because getting something and testing it’s state is not the only thing we can do.
So let’s test if we get the button first it has the disabled attribute. Then lets get the input write something in it and then get the button again checking if the disabled attribute disappeared.
Again we can chain many of the attributes and methods which we can find attributes and assert things with. That is pretty easy to read, isn’t it?
Let’s get the todo, type something in, submit the complete form and see if the input got resetted. And all that with chaining the operators.
When getting the input we can type something in with the method “type(‘myText’)” and then get the form the same way and simply submit it. Then we can check the value of the input again and check if it is empty.
Lets test next if when we
- get the input
- enter something in the todo input
- get the form
- submit the form
- grab the list items then which …
- … should contain one item then
if we break up a test like this we can nearly overtake it 1:1 in our cypress test. Take a look:
To be complete now lets check if the item gets the correct css class appended if the “done” button was clicked.
What I personally extremely like is that you can step through your tests via virtual snapshots and you can see all the different steps. Beside that I want to have mentioned that you can always take screenshots at a specific place in your test with the screenshot method of cypress.
Please check out the complete API here.
I hope I could give a a sneap peek on how easy it is to write end-to-end-tests with cypress.