Web Application Testing - 6 Tips to Make the Most of TestCafe Studio’s Web Test Recorder

TestCafe Team Blog
05 December 2019
TestCafe Studio allows us to test large pools of data and scenarios, thereby catching issues before we launch our products. It has transformed our launches and improved our product success rate.

Our customers love TestCafe Studio for many reasons – among them its accurate and easy-to-use test recording engine. By clicking through a target website, TestCafe Studio allows you to emulate end-user actions and automatically record stable web tests without writing any code.

In this post, we will show you 6 tips to boost productivity and leverage TestCafe Studio’s Test Recorder to address a variety of usage scenarios.

1. Hover Over an Element

TestCafe Studio’s recorder does not save mouse movements during most actions (except for drag-and-drop operations). This enhances test stability because recorded mouse movements usually generate random errors during playback (for instance, this occurs when an element is rendered at a different position).

If you need to perform actions against specific UI elements (when you hover over a menu item or button), TestCafe Studio requires you to explicitly add a hover action.

To add a hover action during recording, switch to the TestCafe Studio window and click Hover icon in the Actions panel to add a Hover action:

Add a Hover action

Click Element Picker icon Pick a target element to select an element to hover within the browser:

Pick a target element

You can now switch back to the browser window and continue recording.

2. Save the Actual Click Point

TestCafe Studio clicks the center of the target element when it replays a recorded test. This produces stable tests even when a target element’s size changes over time.

If you need TestCafe Studio to click the exact position you clicked during recording, simply add an Offset parameter. To add an Offset parameter, expand the action within our Test Editor and click the +Add Option.

Add Options

Select Offsets from the dropdown menu. This adds both X and Y options to the action.

Select offsets

TestCafe Studio initializes these with coordinates captured during the recording. You can use these values or specify a different offset.

3. Repeat Recorded Actions Before Each Test

Many test scenarios begin with similar actions (like login or opening a view). TestCafe Studio allows you to record these actions and configure them prior to each test run.

Action sequences executed before and after each test are called hooks. Here’s how to add actions to a hook.

Run the recorder as you normally would and record your actions:

Record your actions

Hold the Cmd/Ctrl button and select actions you need to repeat before each test:

Select actions

Then click the Before Each Hook button Move to before each hook button.

Click the move to before each hook button

TestCafe Studio creates a ‘before each’ hook with these actions or appends them to an existing hook.

4. Handle Native Browser Dialogs

TestCafe Studio allows you to define how tests should respond to native browser dialogs (alert, confirmations, etc.) invoked on a page.

Click Set Native Dialog Handler icon in the Actions panel to add the Handle Native Dialogs action. Ensure that it is executed before the action that invokes the dialog.

Add the Handle Native Dialogs action

Click +Confirm to add a confirmation dialog.

Add a confirmation dialog

Specify OK as the close action, enable the Message switch and specify the expected message:

Configure the Handle Native Dialogs action

If any subsequent action invokes a confirmation dialog with the specified message, TestCafe Studio will emulate the OK click to close it.

5. Take a Screenshot of the Tested Page

TestCafe Studio allows you to take screenshots of your tested page throughout the test execution process.

Once you record actions that require a screen capture, switch to the TestCafe Studio window and click Take a Screenshot icon in the Actions panel.

Click the Take a Screenshot button

TestCafe Studio can also capture screenshots each time a test fails. To enable this option, click the Settings icon button next to the Run Configuration drop-down menu on the main toolbar and check ‘Take a screenshot if a test fails‘ in the dialog window.

check ‘Take a screenshot if a test fails‘ in the dialog window.

You can view screenshots captured during test execution in your report.

Report view

Click the Screenshot icon icon in the grid to open the screenshot window.

Open the screenshot window

6. Add an Assertion and Verify Its Status

TestCafe Studio provides a straightforward way to create an assertion, configure it and check if it passes.

Select the assertion in the Actions panel to create your assertion.

Create your assertion

Click Element Picker icon Pick a target element to specify the element whose state you need to verify. This opens the browser where you can point to the target element.

Point to the target element

Use the property grid to select the element property whose value you need to check.

Select the element property

TestCafe Studio retrieves and displays its actual value. Click the Copy Value icon button to copy this value to the ‘Expected Value’ field. This is a reference value compared with the values obtained during the test run.

Copy this value to the ‘Expected Value’ field.

Finally, click the Assertion State icon button to check if the assertion passes. The tick mark indicates that the assertion’s condition matches.

Click the Assertion State button to check if the assertion passes

Your Feedback Counts

As always, we welcome your feedback. Please share your thoughts below and let us know how you’re using TestCafe Studio within your enterprise.

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.