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
- Start Recording a Test
- Interact with the Tested Webpage
- View the Recorded Test
- Add an Assertion to the Test
- Run the Test
- View the Test Results
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 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).
You can also organize your tests and start the recording from the Explorer panel. To do this, follow the steps below:
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.
Create a fixture for the sample webpage tests. To do this, click the 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).
Click Create. The new fixture is added to the test directory.
Select a browser where you want to test the webpage in the Record Configurations drop-down menu on the toolbar.
Start recording a test. To do this, click the 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:
- Enter a name in the Your name field.
- Check the Support for testing on remote devices and Advanced traffic and markup analysis checkboxes.
- Click the Submit button.
TestCafe Studio adds your actions to the test. You can view the recorded actions in TestCafe Studio at any time.
To stop the recording, close the browser window or click on the toolbar.
View the Recorded Test #
TestCafe Studio displays the recorded test in the Test Editor.
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.
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:
Click the 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.
Click the 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.
Select an element whose property you are going to check. To do this, click the 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.
Click the page header to add the selector to the Actual field.
Select the property you want to verify from the 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.
Specify the element property's expected value in the Expected field. You can click the button to add the current property value to the field.
Click the 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.
To view configurations' details, modify them or create your own configuration, click 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.
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 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 #