Introduction to End to End testing for Node.js Applications using TestCafe
Github Repository: Link
Application testing has proved to be a very important aspect of the modern day software development process. We want to make sure that we are shipping software of high quality and one that would not break in production.
Catching bugs could be hard work and trust me you do not want your users to have a bad experience whilst using your application.
End-to-end testing ensures that one catches bugs around user interaction before deploying the application to production.
I have played with a lot of tools for end-to-end testing. I found TestCafe to be pretty easy and efficient, I prefer to use this as a prefered tool for end-to-end testing.
This article is not aimed at comparing the different tools you can use for end-to-end testing. Rather, it is aimed at showing you how you can get up to speed with using TestCafe.
What are we going to be building?
In this article, I’d be testing a server-rendered node.js application, this app was built using Node.js on the server side and was served hot on the front-end using handlebars.
This is just a matter of preference because I know a lot of engineers have asked questions as to how they can test their server-rendered Node.js applications.
Kindly note that TestCafe would work for any templating engine you make use of, it would also work irrespective of the front-end framework that powers your application like React, Angular, jQuery, etc. it would work on any front-end powered with JavaScript or HTML attributes.
Installing Testcafe
TestCafe is very easy to install, you do not have to do anything crazy.
If you have node.js installed on your local machine, all you need to do is run:
npm install -g testcafeAnd that is it, you’ve just set-up test cafe for your use as that command would install TestCafe globally on your machine.
Setting up TestCafe on our Node.js app
See Repository here: https://github.com/seunzone/node-testcafe
Also, note that I have set-up a Node.js express server with handlebars, you can make use of any environment that suits you.
I would start by installing testcafe as a dependency by running: yarn add testcafe , You can install it as a dev dependency though.
Next, I would create a test script in my package.json file and instruct it to run the test for me.
"dev": "nodemon --exec babel-node src/app.js","test": "testcafe chrome src/tests/index.js --app 'yarn dev' -s screenshots",
For my environmental setup, yarn run dev would usually kick-off my app in development mode hence the commandyarn dev you see within my test scripts.
You’d also notice that we have testcafe chrome starting the test script, this command simply instructs TestCafe to run the test on a chrome browser then the next command specified the path to where we would write our tests.
I have built a simple todo application and we would be testing it using TestCafe.
The Basics of TestCafe
The TestCafe documentation is pretty helpful, in fact, I learnt most of the things I know by just following through the docs.
A very helpful method you would be making use of most of the time whilst interfacing with testcafe is the Selector method. This method makes sure to select the elements within the DOM that you would love to test.
In the src/tests/index.js file, I would write the following code:
Line 1 imports the Selector method from the testcafe package.
Line 3 is just a variable I created to select the h4 element on the DOM.
In line 6, we would enter the URL we want to test, the URL you would love to test doesn't have to be powered by your local server, it could be a link from a live server. The most development team would usually make use of their staging environment for end-to-end testing and I highly recommend such practise.
In line 10 is where we write out our actual test.
To run the test, simply run yarn run test on the terminal, this would fire up a Chrome browser to run the test we’ve written.
Note: Never adjust the browser TestCafe opens for you when running tests.
Simulating user activities on TestCafe
With TestCafe, you can simulate the activities of the users on the DOM and write tests scripts to capture the expected results.
We would be testing what should happen when a user tries to enter a new todo.
In line 3, we click on a particular button on our page.
In line 5, we state that we expect our new page to match the route /new
on the browser.
Lines 8 and 9 would type some letters into the input box of the new page whilst line 10 would click on the button on the page.
Another method that exists in simulating users activities on the browser is the pressKey() method.
pressKey('down up down down enter') would press the down key on the keyboard once, then the up key once, it would then press the down key twice and the enter key finally. You can also simulate things page scrolling in TestCafe.
Different ways to write your test
Writing large applications could be daunting, hence some developers would prefer to copy the selector code directly from the DOM.
The code above can also be written like so:
To get the location of an element directly on the DOM:
- Right click on the webpage.
- Click on inspect.
- Click on the arrow to inspect element.
-Click on the element you intend to target on the DOM.
- Finally, Copy selector.
You can then paste the code generated within the selector method in your test. It would look like:
Selector('body > div > div.row.area > div.col-md-8 > div > a')Debugging your tests
The inbuilt .debug() JavaScript method has been pretty helpful when debugging tests.
To enter debug mode, all you need to do is to call the method within your code and the test would pause at that point.
The tests would pause at the .debug() statement, you can then resume the test or unlock page to manually test elements directly on the DOM.
You can also skip a test from running by calling the .skip() method on it or you can run the .only() to run a single test.
You can check the documentation to see the different methods available for development purposes.
I hope this article was somewhat helpful in introducing you to how to get up to speed with TestCafe.
Other Helpful Resources
The Documentation is a great place to checkout
I also found a very good article by Michael Herman here
