Web Application Testing - 6 Tips to Make the Most of TestCafe Studio’s Web Test Recorder
Tags: e2e, testing, automation, web
Published: 2019-12-09 16:40:14

<blockquote>
    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.
</blockquote>

<p>
Our customers love <a href="https://dxpr.es/2Psjm0D" target="_blank">TestCafe Studio</a> 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. </p>

<p> 
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. 
</p>

<h3>
    1.	Hover Over an Element
</h3>

<p>
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). 
</p>

<p>
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.
</p>

<p>
To add a hover action during recording, switch to the TestCafe Studio window and click the Hover button in the Actions panel to add a Hover action:
</p>

<p>
   <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/1-hover-add.png" alt="Add a Hover action"/>
</p>

<p>
  Click Pick a target element to select an element to hover within the browser:
</p>

<p>
 <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/2-hover-pick.png" alt="Pick a target element"/>   
</p>

<p>
  You can now switch back to the browser window and continue recording.  
</p>

<h3>
    2.	Save the Actual Click Point
</h3>

<p>
   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. 
</p>

<p>
   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. 
</p>

<p>
    <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/3-add-options.png" alt="Add Options"/>
</p>

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

<p>
   <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/4-options-offsets.png" alt="Select offsets"/> 
</p>

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

<h3>
    3.	Repeat Recorded Actions Before Each Test
</h3>

<p>
    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.
</p>

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

<p>
   Run the recorder as you normally would and record your actions: 
</p>

<p>
  <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/5-hook-record.png" alt="Record your actions"/>  
</p>

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

<p>
    <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/6-hook-select-actions.png" alt="Select actions" />
</p>

<p>
    Then click the Move to before each hook button.
</p>

<p>
   <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/7-hook-click-move.png" alt="Click the move to before each hook button" /> 
</p>

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

<h3>
    4.	Handle Native Browser Dialogs
</h3>

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

<p>
  Click the Handle Native Dialogs button in the Actions panel to add the Handle Native Dialogs action. Ensure that it is executed before the action that invokes the dialog.  
</p>

<p>
   <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/8-handle-native-dialogs-create.png" alt="Add the Handle Native Dialogs action" /> 
</p>

<p>
    Click +Confirm to add a confirmation dialog.
</p>

<p>
    <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/9-handle-native-dialogs-add-confirm.png" alt="Add a confirmation dialog" />
</p>

<p>
    Specify OK as the close action, enable the Message switch and specify the expected message:
</p>

<p>
   <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/10-handle-native-dialogs-configure.png" alt="Configure the Handle Native Dialogs action" /> 
</p>

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

<h3>
    5.	Take a Screenshot of the Tested Page
</h3>

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

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

<p>
    <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/11-1-take-screenshot-add.png" alt="Click the Take a Screenshot button" />
</p>

<p>
    TestCafe Studio can also capture screenshots each time a test fails. To enable this option, click the Settings 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.
</p>

<p>
    <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/11-2-take-screenshot-option.png" alt="check ‘Take a screenshot if a test fails‘ in the dialog window." />
</p>

<p>
   You can view screenshots captured during test execution in your report. 
</p>

<p>
    <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/11-3-report-view.png" alt="Report view" />
</p>

<p>
    Click the View screenshots icon in the grid to open the screenshot window.
</p>

<p>
    <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/11-4-screenshots-window.png" alt="Open the screenshot window" />
</p>

<h3>
    6.	Add an Assertion and Verify Its Status
</h3>

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

<p>
    Select the assertion in the Actions panel to create your assertion.
</p>

<p>
    <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/12-assertion-add.png" alt="Create your assertion" />
</p>

<p>
    Click 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.
</p>

<p>
    <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/13-assertion-pick.png" alt="Point to the target element" />
</p>

<p>
    Use the property grid to select the element property whose value you need to check.
</p>

<p>
    <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/14-assertion-property-grid.png" alt="Select the element property"/>
</p>

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

<p>
   <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/15-assertion-copy-value.png" alt="Copy this value to the ‘Expected Value’ field." /> 
</p>

<p>
    Finally, click the Evaluate assertion button to check if the assertion passes. The tick mark indicates that the assertion’s condition matches.
</p>

<p>
    <img src="https://community.devexpress.com/blogs/testcafe/RecorderTips/16-assertion-refresh.png" alt="Click the Assertion State button to check if the assertion passes" />
</p>

<h2>
    Your Feedback Counts
</h2>

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