It is essential that you test sites and web applications to ensure their reliability, functionality, and user experience. Thanks to its rich API and impressive list of features, TestCafe has emerged as one of the most popular choices for automated end-to-end testing in Node.js.

In this guide, you'll learn what TestCafe is, understand how it works, explore its features, and see it in action with a complete example.

Time to become a TestCafe testing expert!

What Is Testcafe?

TestCafe is a Node.js end-to-end testing framework for browser automation on sites and modern web applications. It provides a test runner for testing any application that runs in a browser, from HTML sites to web applications built on React or similar technologies. This also includes Progressive Web Applications (PWAs) and Electron apps.

TestCafe is a free and open-source technology that allows you to write cross-browser tests in JavaScript or TypeScript through a unified API. You can then run these tests in all major browsers, including Chrome, Firefox, Edge, Safari, and Opera. As a cross-platform solution, it supports Windows, macOS, and Linux.

At the time of writing, TestCafe boasts over 9.6k stars on GitHub and around 250k weekly npm downloads. These statistics reflect the popularity of this robust and reliable end-to-end testing library in the JavaScript web development community.

TestCafe: Main Features and Aspects

Now that you know what TestCafe is, you're ready to dig into its features and find out what makes it so special!

Intuitive API

In TestCafe, test files begin with a fixture declaration. A fixture is a group of tests that share the same starting URL. Each test lives inside a fixture and is defined through the test() function, which accepts the test name and an asynchronous function with test logic. You can then define custom hook functions to run specific setup or cleanup functions before or after fixtures, tests, or even entire test runs.

Here's what a sample TestCafe test file looks like:

fixture`Authentication Tests`.page`https://example.com/login`;
 
test("Login test", async (t) => {
  // test logic for login...
});
 
test("Logout test", async (t) => {
  // test logic for logout...
});
 
test("Signup test", async (t) => {
  // test logic for signup...
});
 
test("Password recovery test", async (t) => {
  // test logic for password recovery...
});

Inside a test() function, you can use:

• Selector API: Similar to CSS selectors, these selectors filter the DOM and return page elements that match the specified criteria. These methods are available through the Selector object.
• Action API: Methods exposed by the t object to interact with the browser and the elements on the page. These include request(), click(), typeText(), and more. Use them to define test logic via browser automation.
• Assertion API: Methods exposed by the t object to compare the current state of the application under test with your expectations. Assertions are required to conclusively determine test success.

TestCafe tests follow the Arrange, Act, Assert (AAA) pattern and are based on a simple-to-use, complete, intuitive API that doesn't require third-party dependencies.

Cross-Browser Testing

TestCafe supports cross-browser testing, enabling you to write tests once using the same API and execute them across different browsers to ensure consistent behavior and compatibility. It natively supports Chromium, Google Chrome, Google Chrome Canary, Microsoft Edge, Mozilla Firefox, Opera, and Safari. Chromium-based and Firefox-based browsers are available in both headed and headless modes.

Additionally, you can run your tests on portable browsers, browsers on remote devices such as smartphones and tablets, browsers inside cloud testing services like BrowserStack, and emulated mobile devices in Chromium-based browsers.

Smart and Automatic Waits

Modern web applications are highly interactive and can perform dynamic operations in the browser after user interaction. To deal with this behavior, many end-to-end testing frameworks require you to add explicit wait instructions in the test code. TestCafe does things differently, as it can intelligently anticipate delays during a test's execution.

It provides smart and automatic wait mechanisms that come into play before applying selectors, performing test actions, evaluating assertions, sending AJAX requests, and navigating to a new page. For example, TestCafe automatically waits for a page element to be visible before executing an action. This feature reduces flaky tests and enhances overall reliability.

Live Mode

In TestCafe, Live Mode runs test execution in real time. Every time you change the test code, TestCafe restarts your test suite. This immediate feedback loop speeds up the development process, making it easier to debug and refine tests quickly.

Built-In TypeScript Support

TestCafe allows you to write tests with TypeScript. That improves code quality and reduces errors compared to JavaScript tests. It also enhances productivity by enabling autocompletion, refactoring tools, and type-checking directly within the testing framework.

As the testcafe npm package bundles TypeScript declaration files, you don't have to install them separately. TypeScript support is native, so you don't need to manually compile TypeScript tests to JavaScript to run them. TestCafe will handle that for you.

Support for Screenshots and Videos

TestCafe can be configured to capture video and screenshots during text execution to help you debug your application and identify why a test failed. This feature is especially useful when running tests in one of the supported CI/CD systems.

The testing tool can take screenshots at any time during test execution or whenever a test fails. Similarly, it can record videos of test executions. These multimedia files help document test results and facilitate collaboration among team members by offering visual evidence of test execution and any problems encountered.

Concurrent Test Execution

TestCafe can run more than one test simultaneously. In concurrent mode, the framework invokes multiple instances of each browser and divides the test workload among them.

Overall, that technique significantly reduces the test suite's execution time. You can enable the concurrency option either via the test runner API or through a command-line option.

Log, Mock, and Intercept HTTP Requests

TestCafe can log, mock, and intercept HTTP requests made by your frontend application. This feature facilitates testing interactions with backend services, enabling you to simulate various network scenarios, debug API calls, and ensure correct response handling. The result is more robust and reliable tests.

Debugging Capabilities

TestCafe provides a debug mode to control test execution step by step while inspecting a page in the Visual Selector debugger. This interactive panel allows you to enter Selector queries, view the corresponding page elements, and debug failed actions. These features streamline test debugging, allowing for rapid identification and correction of problems and errors in code logic.

Getting Started With TestCafe for Node

Follow this step-by-step tutorial section to write your first end-to-end test using TestCafe.

Node.js Project Setup

First, make sure you have Node.js installed on your local machine. If you do not have a Node application to test, create a new project folder and navigate into it using the following commands:

mkdir testcafe-demo
cd testcafe-demo

Inside the folder, initialize a new Node.js project with the init command below:

npm init -y

Great! The testcafe-demo folder now contains a blank Node project.

TestCafe Installation and Setup

Install TestCafe locally by adding the testcafe npm package to your project's development dependencies:

npm install --save-dev testcafe

Next, create a tests folder inside your project's root directory:

mkdir tests

This will contain all your TestCafe tests.

Add a .testcaferc.js Testcafe configuration file to your project's root folder. Use it to specify the target folder containing your tests and the browsers to execute the tests on:

// .testcaferc.js
 
module.exports = {
  src: "tests",
  browsers: ["chrome"],
};

If you don't have Chrome installed locally, you can replace chrome with any other browser detected by TestCafe, using the following command:

npx testcafe --list-browsers

Awesome, you're ready to write your first TestCafe end-to-end test!

Add an End-to-end Test

Assume you want to test whether the "Login" button on the AppSignal homepage brings you to the login page. To do so, create a new appsignal.js file in your /tests directory:

appsignal.js represents a sample TestCafe test file containing all tests related to the AppSignal site. Define it with a fixture and a test() using the required logic:

// tests/appsignal.js
 
import { Selector } from "testcafe";
 
fixture`AppSignal Tests`.page`https://www.appsignal.com/`;
 
test("Login button redirects to login page", async (t) => {
  // maximize the browser window to avoid
  // responsive rendering
  await t.maximizeWindow();
 
  // select the "Login" button and click it
  const loginButton = Selector("a").withText("Login");
  await t.click(loginButton);
 
  // get new page URL
  var loginForm = Selector("#new_user");
 
  // verify that the current page URL is the
  // AppSignal login page
  await t.expect(loginForm.visible).ok();
});

This test file refers to the https://www.appsignal.com/ URL and contains a test that selects the "Login" button, clicks it, and checks that the new page contains the login form. Thanks to TestCafe's auto-waiting feature, you don't have to wait for the login page to load manually.

Wonderful! Now, all that remains is to run the TestCafe end-to-end test to ensure everything works as expected.

Run the TestCafe Test

Run your TestCafe test with the command below:

npx testcafe

This will execute all test files inside the src folder specified in the .testcaferc.js file (in this case, just the appsignal.js file).

TestCafe will launch a Chrome window as shown below:

Then it will connect to the target page and perform the actions specified in the test file. If everything goes as expected, the login redirect test will pass, and TestCafe will log the following information:

To run the test in headless mode, replace chrome with chrome:headless in .testcaferc.js.

Et voilà! You now know how to write tests with TestCafe in Node.js.

Next Steps For Mastering TestCafe

Next, you should learn how to integrate TestCafe with your CI/CD pipeline to automate your testing process.

TestCafe supports several continuous integration systems, including AppVeyor, Azure DevOps, Bitbucket Pipelines CI, CircleCI, CircleCI and LambdaTest, GitHub Actions, GitHub Actions and BrowserStack, GitLab, Jenkins, TeamCity, Travis, Travis and Sauce Labs, and Useful Links.

Check out the TestCafe documentation for detailed integration guides. The docs also include tons of examples, advanced usage guides, and even a dedicated best practices section.

Wrapping Up

In this blog post, we explored TestCafe and how it helps you test your web applications through browser automation.

You now know:

• What TestCafe is
• Its key features and capabilities for testing
• How to use it to write end-to-end tests in Node.js

Thanks for reading!