Getting Started

• Dec 22, 2021
• 4 minutes to read

This tutorial describes how to record a simple codeless test, run the test, and then view the results. See the Record Tests guide for information on how to record test scripts.

Note

The Creating Your First Test video also covers this tutorial.

Install TestCafe Studio

You can install TestCafe Studio on MacOS, Windows, and Linux. See the Installation page for more information.

Start Recording a Test

TestCafe Studio displays the Welcome screen when you first open the application. The Welcome screen contains basic recording controls.

1. Enter the URL of the test page (http://devexpress.github.io/testcafe/example).
2. Click Start recording a test.

TestCafe Studio creates a codeless test, launches a browser, loads the specified page, and waits for you to interact with the page.

Interact With the Page

Perform the following actions:

1. Enter a name in the Your name field.
2. Select two checkboxes: ‘Support for testing on remote devices’ and ‘Advanced traffic and markup analysis’.
3. Click the ‘Submit’ button.

TestCafe Studio adds actions to the test as you perform them. You can view the list of actions in the Test Editor.

To stop the recording, close the browser window or click on the toolbar.

View the Test

TestCafe Studio displays the test’s content in the Test Editor.

The test editor allows you to reorder and delete existing test actions, as well as add new actions to the test. You can also modify action parameters: for example, change the target of any given action.

Add an Assertion to the Test

Use assertions to verify action results. Assertions examine the page, and then compare the actual value of a page-related variable to the value you expect it to have. If an assertion fails, the test fails too.

If you add an assertion in Recording mode, you can use interactive tools — the element picker and the property list — to configure the assertion.

Create an Equals assertion that checks if the Thank you page displays the name you entered earlier.

1. Click the Record test actions toolbar button to enable Recording mode. TestCafe Studio plays back the test and waits for new actions.

2. Click the button (see the Assertions section in the Actions panel). TestCafe Studio adds the assertion to the end of the test and opens the assertion parameters interface.

3. Select the element that you want to examine. To do this, click the button next to the Selector field. The browser window becomes active. Hover the mouse pointer over the ‘Thank you, …’ page header. The selector pop-up window displays a Selector for that element.

   

   Click the page header to add this selector to the assertion.

4. Select the element property that you want to evaluate.

   

   TestCafe Studio adds the property name to the Verified Property field. It also calculates the property value and displays it in the Actual Value field.

5. Use the Expected Value field to specify a value for comparison. You can click the button to insert the current property value.

   

6. Click the toolbar button.

Run the Test

TestCafe Studio can run tests in desktop, headless and mobile browsers. It automatically detects local browsers and creates run configurations for them. Open the Run Configuration drop-down menu in the editor’s toolbar and select a configuration.

For example, to run the test in all the local browsers that you installed, select the all configuration and click the Run test toolbar button. TestCafe Studio executes the test in several browsers simultaneously, and the Reports panel displays test progress.

View Test Results

The Reports panel displays test results after test execution ends. To see a test report in the Report view, click the corresponding entry in the Reports panel.

Examples

You can find sample codeless tests in the Examples test directory.