Getting Started

This Getting Started tutorial describes how to record a test for the TestCafe Studio sample page, run the test and analyze the results.

The tutorial consists of the following steps:

Install TestCafe Studio

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

Start Recording a Test

TestCafe Studio displays the Welcome page when you open it for the first time. You can specify the tested site's URL (http://devexpress.github.io/testcafe/example) and click the Record button Start recording a test button on this page to start recording a test. TestCafe Studio creates a test, launches a browser with the tested site and starts recording your activity on the webpage (see Interact with the Tested Page).

The Welcome page

You can also organize your tests and start the recording from the Explorer panel. To do this, follow the steps below:

  1. First, create a test directory to store your tests. Next, go to TestCafe Studio, open the File menu, click Open Tests Directory and navigate to the created directory. You can view the directory's contents in the Explorer panel.

  2. Create a fixture for the sample webpage tests. To do this, click the Create a New Fixture button Create a New Fixture button in the Explorer panel. This invokes the New Fixture dialog where you can specify the fixture's name and the tested page's URL (http://devexpress.github.io/testcafe/example).

    The New Fixture dialog

    Click Create. The new fixture is added to the test directory.

  3. Select a browser where you want to test the webpage in the Record Configurations drop-down menu on the toolbar.

    Record configuration

  4. Start recording a test. To do this, click the Record button Record a New Test button in the Explorer panel. TestCafe Studio launches the browser with the tested site and starts recording your activity on the webpage.

Interact with the Tested Webpage

Perform the following actions on the tested webpage:

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

TestCafe Studio adds your actions to the test. You can view the recorded actions in TestCafe Studio at any time.

Record the test

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

View the Recorded Test

TestCafe Studio displays the recorded test in the Test Editor.

The recorded test

The editor allows you to reorder and delete actions, add new actions, and modify actions' parameters. For example, you can change the Element Selector parameter that specifies the action's target element: select an alternative selector from auto-generated selectors or enter your own.

Choose the selector

Add an Assertion to the Test

TestCafe Studio provides a set of assertions to perform verification actions in tests. You can add assertions during or after recording.

This step adds an Equals assertion to the test. The assertion should check if the Thank you page displays the name you entered as Your name. Follow the steps to add the assertion:

  1. Click the Record test actions Record test actions button on the Test Editor's toolbar to continue recording the test. TestCafe Studio replays the previous test actions and waits for you to add new actions.

  2. Click the Equals assertion button in the Actions panel's Assertions section to add the assertion to the test. TestCafe Studio adds the assertion to the end of the test and allows you to specify the assertion's parameters.

  3. Select an element whose property you are going to check. To do this, click the Pick a target element button next to the Actual field. This displays the browser with a tested webpage. Hover the mouse pointer over the page header that says 'Thank you, ...'. The selector popup displays the Element Selector that identifies the page header.

    The Element Selector popup

    Click the page header to add the selector to the Actual field.

  4. Select the property you want to verify from the list.

    The Properties list

    TestCafe Studio generates the element property expression and adds it to the Actual field. It also evaluates the specified expression and shows the result in the Value field.

  5. Specify the element property's expected value in the Expected field. You can click the Copy the value to the Expected field button to add the current property value to the field.

    Assertion

  6. Click the Stop recording button on the Test Editor's toolbar to stop the recording.

If you add the assertion when the recording is stopped, you should enter the assertion's parameters manually. The element picker, property list, and assertion's status verification are available only during recording.

Run the Test

TestCafe Studio can run tests in all popular browsers. It automatically detects browsers on the local computer and creates test run configurations for them. You can open the Run Configuration drop-down menu on the toolbar to view the available configurations.

The Run Configuration menu

To view configurations' details, modify them or create your own configuration, click Settings button next to the menu and use the invoked Run Configurations dialog. You can select one or several browsers for each configuration and specify additional test run options.

The Run Configurations dialog

To run the recorded test in all the installed browsers, use the all configuration. Select it in the Run Configuration menu and click the Run test Run test button on the toolbar. TestCafe Studio executes the test in several browsers simultaneously. The Reports panel displays the test's progress.

View the Test Results

The Reports panel displays the test result after the test is completed. To see a complete test report in the Report view, click the corresponding entry in the Reports panel.

Report