Debugging Tests

TestCafe allows you to debug server-side test code and provides a number of options useful for debugging.

Debugging Test Code

Starting with version 6.3.0, Node.js allows you to debug applications in Chrome Developer Tools. If you have Chrome and an appropriate version of Node.js installed on your machine, you can debug TestCafe test code. To do this, add the --inspect and --debug-brk flags to the test run command.

testcafe --inspect --debug-brk chrome ./tests

Put the debugger keyword in test code where you want to stop.

fixture `My fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My test', async t => {
    debugger;
    await t
        .click('#populate')
        .click('#submit-button');
});

After the test run command is executed, a debugging URL will appear in the console.

Console with a debugging URL

Open this URL in a new Chrome instance. Chrome will invoke its Developer Tools and the debugger will stop test execution at the first line. Click the 'Resume script execution' button or press F5 to continue. After that, text execution will pause at the debugger keyword allowing you to debug test code.

Chrome Developer Tools

You can also debug test code from an IDE. For instance, Visual Studio Code has a dedicated TestCafe plugin. It allows you to run and debug your tests in the IDE using the context menu.

Options Useful for Debugging

TestCafe includes a few features helpful when you need to find the cause of issues in your tests.

Screenshots

You can specify that a screenshot should be taken in a particular place in a test. Use the t.takeScreenshot action for this.

fixture `My fixture`
    .page `https://devexpress.github.io/testcafe/example`;


test('My test', async t => {
    await t
        .setNativeDialogHandler(() => true)
        .takeScreenshot('./screenshots')
        .click('#populate')
        .takeScreenshot('./screenshots')
        .click('#submit-button');
});

You can also turn on the --screenshots-on-fails option.

testcafe chrome ./my-tests --screenshots ./screenshots --screenshots-on-fails

This option enables TestCafe to take a screenshot automatically when a test fails.

Analyzing these screenshots helps save time on debugging and allows you to determine the reason of issues earlier.

Test Speed

TestCafe provides the capability to change test speed. By default, tests are executed at full speed with minimum delays between actions and assertions. This makes it hard to identify problems visually when running the test. To slow down the test, use the --speed CLI flag. You can use values from 1 to 0.01.

testcafe chrome ./my-tests --speed 0.1

When tests run slowly, you can monitor test execution more easily and notice when test behavior differs from the one that's expected.