Skip to main content

Debug Tests

  • 3 minutes to read

This topic explains how to debug codeless tests and test scripts.

Debug Codeless Tests

TestCafe Studio’s debug mode helps you understand what is happening on your web page during testing. In this mode, TestCafe Studio pauses the test and allows you to debug the tested page with the browser’s developer tools. You can check the web page’s state, DOM elements’ location, their CSS styles, and so on.

You can activate the debug mode in one of the following ways:

  • Add the Debug action to a particular position of a test. The TestCafe Studio pauses the test execution just before this action.

    Debug Action

  • Enable the Debug mode option for a run configuration in the Run Configurations dialog. In this case, the TestCafe Studio pauses the test before the first test action.

    Debug Mode Option

  • Enable the Pause the test when it fails option for a run configuration in the Run Configurations dialog. TestCafe Studio automatically enters the debug mode when the test fails.

    Pause the Test When it Fails

Once the test is paused, you can open the browser’s developer tools and debug.

The browser window displays the status panel during debugging. This panel allows you to resume test execution or skip to the next action.

Status Panel

Debugging Features

TestCafe Studio includes features that help you find the cause of issues in your tests.

Screenshots

TestCafe Studio can capture screenshots during a test. You can analyze these screenshots to determine what causes these issues.

There are two ways to take screenshots:

  • Use the Take Screenshot action to take a screenshot during a test.

    Take Screenshot Action

  • Turn on the Take a screenshot if a test fails option for a run configuration in the Run Configurations dialog to take a screenshot when a test fails.

    Take Screenshot Option

TestCafe Studio displays screenshots in test reports.

Screenshots

Screenshot Directory

TestCafe Studio stores screenshots in the base directory specified under Advanced Options in the Run Configurations Dialog (<base_dir>).

Screenshot Path

Inside the base directory, TestCafe Studio organizes files into subdirectories according to the date and time when they were taken, the browser name, and other parameters.

TestCafe Studio uses the following pattern for screenshots captured with the Take Screenshot action (if the Path parameter is not specified):

<base_dir>/${DATE}_${TIME}/test-${TEST_INDEX}/${RUN_ID}/${USERAGENT}/${FILE_INDEX}.png

For instance, this pattern can generate the following paths:

<base_dir>/2019-11-01_11-35-40/test-1/run-1/Firefox_65.0.0_Mac_OS_X_10.15.0/1.png
<base_dir>/2019-11-01_11-36-12/test-1/run-1/Chrome_73.0.0_Mac_OS_X_10.15.0/2.png
<base_dir>/2019-11-01_11-36-55/test-1/run-1/Chrome_71.0.0_Windows_10.0.0/1.png

Note

The Path parameter specified in the Take Screenshot action overrides this pattern. If TestCafe Studio executes an action with the Path parameter multiple times (for instance, in different browsers or quarantine runs), then all screenshots are written to the same location. As a result, screenshots are overwritten.

When a screenshot is taken because a test fails, the errors subdirectory is added to its path:

<base_dir>/${DATE}_${TIME}/test-${TEST_INDEX}/${RUN_ID}/${USERAGENT}/errors/${FILE_INDEX}.png

The following table describes placeholders used in these patterns:

Placeholder Description
${DATE} The test run’s start date (YYYY-MM-DD).
${TIME} The test run’s start time (HH-mm-ss).
${TEST_INDEX} The test’s index.
${RUN_ID} Substituted with run-${QUARANTINE_ATTEMPT} for screenshots taken in quarantine mode.
${USERAGENT} The combination of the browser name, browser version, OS name, and OS version (separated by underscores).
${FILE_INDEX} The screenshot file’s index.

Test Speed

Tests are executed at full speed with minimum delays between actions. You can adjust the speed in one of the following ways:

  • Use the Set Test Speed action. The action parameter allows you to specify the test speed from 1 to 0.01.

    Set Test Speed Action

  • Change the Speed option’s value in the Run Configurations dialog’s Advanced Options section.

    Speed Option

Debug Test Scripts

See the following TestCafe topic for more information on how to debug test scripts: Debugging.