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