The requested page is not available for the requested platform. You are viewing the content for Default platform.

Test Editor

  • 4 min to read

The Test Editor allows you to view and modify tests and hooks. To open the editor, double-click the test or hook in the Explorer panel or click the corresponding row in the Fixture Editor. If you create an empty test or start recording a new test, TestCafe Studio automatically opens the test in the editor.

The Test Editor consists of the following parts:

  • The toolbar - Displays navigation links and buttons for common tasks.

    Click View Fixture to open the fixture in the Fixture Editor. The Open Tested Page link opens the browser and navigates to the tested page.

  • The test area - Displays the current test's content.

  • The Actions panel - Lists actions you can add to the test. The actions are organized into categories. You can click the arrows next to category names to expand or collapse the categories.

Test editor

Common Tasks

Add Actions From the Actions Panel

Click an action in the Actions panel to add it to the test or hook. TestCafe Studio adds the action to the last position and allows you to specify action parameters.

Add new actions

You can add actions after or during recording. If it's the latter, you can pick an element on a webpage to set it as an action parameter (for example, Element Selector for on-page actions or assertions).

Record Actions

You can record on-page actions and append them to the current test.

Click the Record button Record test actions button on the toolbar to start recording. TestCafe Studio replays the existing actions. The playback stops after the last action (the after each hook is not executed). If the test fails, the playback ends after the last successful action.

Now you can interact with the tested page. TestCafe Studio records your activity and appends new actions at the end of the test.

To stop recording, close the browser or click the Stop recording button button on the editor's toolbar.

Note

The Record button Record test actions button is not displayed for hooks. To use recorded actions in a hook, move or copy them from a test.

However, if playback stops inside a hook because of a failed action, you can record new steps. They are added to the end of the hook in this case.

Run Tests

Click the Run tests button Run test button on the editor's toolbar to run the test.

Note

This button is not displayed for hooks. You cannot run a hook separately.

Modify Actions' Parameters

Click the action's row to expand the action parameters area that allows you to view or modify action parameters.

Change an Action's Position

Hover the mouse cursor over the Drag icon button to the left of the action's name until the cursor icon changes to the Drag icon icon, then drag the action to a new position.

Move Actions to a Hook

After you record actions in the main test sequence, you can move them to a hook. TestCafe Studio appends these actions to an existing hook, or creates a new hook if none exists.

Select actions you want to move (use Cmd/Ctrl-click or Cmd/Ctrl-A to select multiple actions) and click Before each hook icon Move to 'before each' hook or After each hook icon Move to 'after each' hook:

Move actions to a hook

The Test Editor displays the before each and after each steps if this fixture contains a corresponding hook. You can click them to navigate to this hook.

Navigate to a hook from Test Editor

Collapse All Actions

Click the Collapse all actions button Collapse all actions button to collapse parameter areas for all test actions.

Delete Actions

Click the Remove all actions icon Remove all actions button on the editor's toolbar to delete all the actions from the test or hook.

To delete a single action, hover the mouse cursor over the action's row and click the row's Remove icon Remove action button.

Convert the Test to JavaScript

Click Convert icon Convert to JavaScript Code on the editor's toolbar to convert the test to a .js file. This invokes the Convert to JavaScript dialog that allows you to specify the file's name.

Convert to JavaScript Code Dialog

TestCafe Studio creates the test file in the same test directory and displays it in the Explorer panel.

Note

Hooks are only converted to JavaScript together with tests or fixtures.