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
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.
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 testcafe
And 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:***
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:
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 command
yarn 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
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
src/tests/index.js file, I would write the following code:
Line 1 imports the
Selector method from the
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
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
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('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
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
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
I also found a very good article by Michael Herman here