Test Scripts

Mar 04, 2026
6 minutes to read

TestCafe Studio works with JavaScript, TypeScript, and CoffeeScript test script files.

TestCafe Studio supports three ways to create test scripts. You can record tests directly as script files, write scripts from scratch, or convert codeless tests into scripts.

Note

TestCafe Studio can launch and edit legacy TestCafe tests (.test.js files).

Record Test Scripts

TestCafe Studio can record JavaScript and TypeScript test scripts.

Note

TestCafe Studio can execute, but not record CoffeeScript scripts.

Start Recording

To record a new test, open TestCafe Studio and select a browser. Enter the website URL into the Welcome screen input field, select the desired test file format, and click Start Recording a Test.

Record a New Test in Code

For every new test recording, TestCafe Studio creates a new script file with one fixture and a test declaration.

When the preparations are complete, TestCafe Studio opens the browser that you selected, and waits for user actions.

TestCafe Studio saves the test page URL as an argument of the fixture.page function.

Set the test URL

Record Actions

Pay attention to the recording panel browser overlay. If the Action Recording Tab is active, TestCafe is recording your page actions.

Throughout the recording process, TestCafe Studio inserts action code into the open test file. The Recording Destination Marker indicates the point of insertion.

Drag the marker to move it up or down.

Specify Selectors

Actions that interact with the page, like clicks and text input directives, rely on Selector queries to find their target DOM elements. TestCafe Selector queries are similar to CSS Selectors.

TestCafe Studio automatically generates Selectors when it records test actions. However, TestCafe can not record assertions and actions like hover. Use the Selector Inspector tab to define Selectors for these actions.

Note

If your application uses Angular-specific selector logic (for example, testcafe-angular-selectors), TestCafe Studio cannot record those selectors directly. As a workaround, convert the recorded test to JavaScript and apply Angular-specific selectors in code. For codeless workflows, configure custom selector attributes (such as data-test-id) and target those attributes during recording.

To generate a Selector:

Open the Selector Inspector tab.
Click a page element.
Pick an appropriate Selector from the drop-down menu.
Click the Insert button to paste the Selector next to the Paste Destination Marker.

Record Selectors

Stop Recording

Perform one of the following actions to stop the recording:

Close the browser.
Click the Stop Recording Test Editor toolbar button.
Click the Stop Recording icon in the Code Editor.
Click the Stop Recording button within the Main Toolbar.

Amend an Existing Test

Click the Record a Script button next to the test that you want to amend.

When you click Record, TestCafe opens a browser, and executes the test’s existing actions.
If TestCafe encounters an error during test playback, it stops test playback, but does not abort the recording.
When the playback ends, TestCafe places the recording destination marker at the end of the file, and starts recording.

Note

When TestCafe Studio executes a test action, it highlights the corresponding action code.

TestCafe cannot highlight actions within hooks and functions.

Error During Playback

Record Hooks

Hooks are action sequences that run before or after tests and fixtures. They often set up the testing environment (for example, authenticate the user) or clean up after the test (remove a database object).

If you want to execute an action sequence once per fixture run — at the beginning or end of a specific fixture — attach a before / after hook to that fixture.
If you want to execute an action sequence every time a test from a certain fixture begins or ends, attach a beforeEach / afterEach hook to that fixture.
Test-level hooks are not supported in TestCafe Studio.

You cannot record hooks with the rest of the test, because hooks are separate from the rest of the test. Record hook actions separately, and later paste them into the hook section.

Note

In recorded (codeless) tests, values produced in a Run TestCafe Script action are not available to recorded actions (except another Run TestCafe Script action). Convert the test to JavaScript if you need hook-based setup or to share dynamic values with standard test actions.

Visit the TestCafe framework documentation to learn more about hooks.

Test Script Recorder Keyboard Shortcuts

You can control the test recorder with the following shortcuts:

Keys	Description
`Ctrl+G`	Finish the current action and insert it into the script (Supported for codeless tests and test scripts).
`Ctrl+E`	Switches between TestCafe Studio and the browser window during test recording (Supported for codeless tests and test scripts).
`Ctrl+R`	Activate the Action Recording Tab
`Ctrl+S`	Activate the Selector Inspector Tab
`Ctrl+D`	Pause the recording

Compatible Page Actions

The TestCafe Studio Script Recorder can record the following page actions:

Write a Test Script

Test scripts

You can write test code in the built-in Code Editor. Follow the steps below to write a test script from scratch.

Create a test script file. TestCafe Studio creates the file with a test script template and opens it in the Code Editor.
Edit the test script template. Test scripts start with a fixture declaration. A fixture is a group of tests with the same starting URL. The Explorer Panel displays these tests as the file’s children.

Note

A test file should not contain more than one fixture.

Modify the fixture’s name and URL, and change the test’s name.

Add test code to the test function. Visit the TestCafe website for information about the test API.

Convert Codeless Tests to JavaScript

Before the introduction of the test script recorder, TestCafe Studio users could only record codeless tests. Test scripts are more flexible and powerful: they give you access to most features of the TestCafe JavaScript API.

If your test is codeless, but you need TestCafe API features such as request hooks, use the Run TestCafe Script action.

In script-based tests and Run TestCafe Script actions, you can use Node.js HTTP client modules to send API requests (for example, POST, GET, and PATCH) before UI steps.

Note

You do not need to convert codeless tests to run them in TestCafe Studio.

To run recorded tests outside TestCafe Studio (for example, in CI/CD pipelines or Docker containers with TestCafe CLI), convert codeless tests to JavaScript first.

TestCafe Studio can automatically convert codeless tests to JavaScript. To convert a test, do one of the following:

Right-click a codeless test or fixture in the Explorer Panel and select the Convert to Script icon.
Open a test in the Test Editor and click the Convert to JavaScript Code toolbar icon.
Open a fixture in the Fixture Editor and click the Convert to JavaScript Code toolbar icon.