A Beginner's Guide to Writing End-to-End Tests with TestCafe

Lately, with the planning of a new application launch, I'm learning all the aspects needed to design/develop an application, which isn't just coding and styling it. Yes, your application may look great when you're done, but can you imagine what will happen if any one component of a major system fails or if an issue goes undetected? This is where the importance of End-to-End testing(in addition to a series of other tests, of course) comes in.

What is End-to-End testing?

End-to-end testing is a method used to check whether your application is behaving exactly how it's supposed to as a whole from start to finish. Through this technique, you are testing all of the important functionalities of your product, such as how well it is communicating with other databases, networks, and applications.

---

In this post, I will go over the following:

• What is TestCafe
• How to Install TestCafe
• Writing and running your first test script

---

What is TestCafe?

TestCafe is a new, open-source, Node.js-based end-to-end testing tool used to automate testing for web apps. It takes care of all testing stages: starting browsers, running tests, gathering test results and generating reports. Using TestCafe for end-to-end testing has many advantages:

1. It is easy to install
2. It all supports all browsers and their versions
3. It doesn't need any plugins or has any dependencies; it works right out of the box, without you having to install any other software or web drivers.

---

Installing TestCafe

• First things first, because TestCafe is JavaScript/Node.js-based, you need to install node.js to your system. If you already have it installed, you should be able to install packages using the npm command.
• Now, all you have to do to install testcafe is to run this command globally in your terminal:

---

Writing Tests

To practice writing tests, we will be using TestCafe demo page.

• Create a directory to house your test files. I'll name mine 'TestCafe-Example'.
• Open a code editor of your choice and open up your newly created folder. (I use VSCode as my editor)
• Create a new file called 'app.test.js' in your directory.

---

Now that you have your test file created, time to add in the code.

1. Import the testcafe module
2. Create a fixture.

   A fixture is a category of tests used to make our tests cleaner and readable. A test suite can contain one or more fixtures. To declare a test fixture, use the fixture function:

   _{fixture(fixtureName) or fixture `fixtureName` Note: The fixture declaration can be used to specify the target webpage}
3. Add a test.

   To initiate a test, call the test function and pass the test code inside it.

   _{test(testName, fn(t))}

   

   In the above code sample, the test will type text into the 'Developer Name' input element and click the Submit button. The submit button will redirect you to a page that says 'Thank You, %username%!'(Feel free to change the text in the input element to whatever you like!)

   The 't' object represents the test controller used to access the test run API's methods. You can use the test controller to:

   • call the test actions
   • handle browser dialog
   • use the wait function, and
   • execute assertions.

To check that the text on the page contains the right name, we'll create a selector that locates the article header and adds an assertion that checks that the text says 'Thank you, Phoebe M.' (or whatever name you replaced mine with 😊)

Now to test it! If running on a local machine, simply run this command:

With this command, TestCafe will find and launch Google Chrome to run the test. Of course, if you're using a different browser or you named your test file something differently, feel free to update the command accordingly.

Note: To see a list of browsers that TestCafe detects on your machine, run the following command:

And that's it! The simplest way to write and run an end to end test script.

---

Resources

TutorialsPoint - End-to-End Testing
TestCafe - Getting Started Guide
SitePoint
DevExpress - TestCafe Documentation

Comments

[Lara Durrant]

Thanks for the tutorial! I honestly haven’t written very many tests— looking forward to giving this a go!

[Phoebe M]

You're welcome. Glad you're going to try it out, let me know how it goes.

[Lara Durrant]

Hi! I got a chance to take the tutorial! I still want to take some more time to play around with TestCafe, but from following along I wrote a few tests and was rewarded with three happy green checkmarks! :) There was only one spot I got stuck on while following along and it was related to the expect statement. In your screenshot, the font color (due to the highlighting) made it hard to read so I initially wasn't sure how to format it all. Of all the things, it was only a minor detail, though. Cheers & hope you keep writing!

[Phoebe M]

Hey ! Glad it worked . And yeah I may edit and post without the highlight bc the highlight whites out the “.” before the expect statement. Thanks for pointing that out!

[Paweł Kowalski]

Good to see TestCafe gaining traction :)

I did some writing on our best practices, hopefully it will help to write better/more robust/faster tests, and more reliable applications.

Links:
platformos.com/blog/post/blog/qa-a...
platformos.com/blog/post/blog/qa-a...
platformos.com/blog/post/blog/qa-a...

We also have more tutorial-like series for getting started, similar to yours:
documentation.platformos.com/best-...
documentation.platformos.com/best-...
documentation.platformos.com/best-...

Have fun :)

[Phoebe M]

Great material! I’m still in the process of learning e2e testing so will be looking into your articles to see what I can learn from them. Thanks for sharing!

[TheBadCoder]

I am not sure, but does Test cafe supports reporting?

[Phoebe M]

Good question. I’m not sure either, but I’ll add it to my list of things to research

[TheBadCoder]

Were you able to find the answer?

[Phoebe M]

Hi! I haven't looked into the answer to this question yet thoroughly (haven't been working on test cases for a while and have shifted my focus to another topic), but I came across this article. Hopefully it will help you with what you're looking to do: devexpress.github.io/testcafe/docu....

[TheBadCoder]

Sure..👍

[Dayour5539]

Thanks for the tutorial, Pls I use a windows OS, and I want to run the test, the command line would not work for my windows OS. Kindly help with the write command line for Windows OS.

[Phoebe M]

Hi! I use a Windows OS as well. what editor do you use?