Create your first automated end-to-end test in 5 minutes (with Chimp JS)
About a year ago I was assigned a project to create the structure for automated end-to-end testing. This could give us the benefit to test the functionality of some basic pages like registration, login etc and generally give us a piece of mind that we didn’t break anything critical. There were a few things that I should have taken into consideration to complete this project:
- Create the end-to-end tests with a framework (Chimp JS).
- Create a Jenkins job to a pre-existing Jenkins server.
- Trigger the Jenkins job whenever we pushed to the develop branch.
- Send a success/fail message to a Slack channel whenever a test passed or failed.
I will try to cover the first bullet in this post, the development of the end-to-end tests.
The framework to create the tests
Also I used Cucumber.js to write the acceptance/end-to-end tests thinking that at some point the QA team would jump in and create the feature files for me, then I would only have to create the step definitions. Keep reading if these don’t make much sense yet, hopefully they will :)
So lets get started, lets install ChimpJS with npm (its better to install it globally).
The folder structure that we need is the following:
Now let’s define the user story in our feature file. Let’s try to test something very simple in the ASOS homepage, that whatever value we add in the search input, after clicking the search button, it would exist as a title in the following product list page.
Check a very useful and detailed article on how to to create a feature file here.
Test file (Step definition)
At this point we can run
chimp --watch in our root folder (
chimp-test) so we can copy paste the steps from the terminal and use them in our
test.js file like the following:
The next step is to check the documentation of Webdriver and write our code inside every step. In the first step we want to just navigate to the ASOS homepage:
In the second step we want to add a value to the search input and click the search button.
In the third and last step we want to make a simple assertion to check that our search term exist as a title on top of the list page.
Hopefully if we rerun
chimp --watch our tests should pass and we should see something like the following:
Congratulations! You made your first simple end-to-end test!
Leave a comment if you want me to cover the rest of the bullet points listed in the beginning of the article.