Automated Web Testing: How to Create a Web Test in 2 Minutes with TestCafe Studio

TestCafe Team Blog
21 August 2019

In this quick tutorial, I’ll describe how to get started with TestCafe Studio and how to test an existing webpage (in this instance, a relatively advanced web page with integrated file upload functionality). As you’ll soon see, I will select and upload two files and then run two assertions: The first for correct file name output and the other for correct file size label format.

I promise – this should only take two minutes of your time - TestCafe Studio’s Visual Test Recorder makes it easy to visually record web tests.

Step 1: Record a Script

I’ll first launch TestCafe Studio (if you’d like to install TestCafe Studio and follow along, simply download our 30-day trial), enter the website URL inside TestCafe’s Welcome screen and press ‘Start Recording a Test’. My browser will navigate to the appropriate address – and since TestCafe’s Visual Test Recorder is up and running in the background – I’ll be ready to record actions performed on this webpage.

Start the Visual Test Recorder

I’ll use the Upload mode drop-down and specify that I wish to begin file upload manually.

Select upload mode

I’ll then enable multi-file checkbox.

Check box action

I’ll click Select file and make my file selections.

Select the files

I’ll click Upload to complete the process.

Click Upload

Step 2: Review the Action List

Its time to switch to TestCafe Studio and review the commands generated by my actions.

Visual Test Recorder - Action List Editor

Step 3: Add a Value Assertion

As you can see, site UI is rendered in an IFRAME, so the first action represents a context switch - click and upload steps follow thereafter (replicating my earlier site actions).

It’s time to finalize the test with a couple of assertions. I’ll first check whether the demo app displays the correct file name.

As you can see, you don’t have to write a single line of code to do this (unlike competing web testing tools which do require you to write lots of custom test code). I’ll simply click a toolbox icon to add an assertion with an “equals” condition.

Add assertion

I’ll then use the Element Picker button to select the target element within the browser.

Invoke Element Picker

This focuses the browser window so you can point to the appropriate element.

Pick the Label on the Web Page

As you can see below, TestCafe Studio generates a selector for this element and opens a list of its properties. Select the property you wish to assert.

Select an element's property from the Property Grid

TestCafe Studio obtains the current property value and asks me to confirm its use (for comparison).

Confirm the value

Step 4: Add a Format Assertion

In much the same way, you can assert a label’s font-size CSS property value.

Add a CSS Style Assertion

Step 5: Stop the Recorder and Run the Test

My test is ready and recording can be stopped. To execute my newly recorded test, I’ll press the Run button and watch TestCafe replay my actions.

Run the Web Test

Step 6: Review the Test Report

Once TestCafe completes the test run, I can review test results within TestCafe’s intuitive UX.

Review the Test Execution Report

That’s it. In just a few minutes and without a single line of code, I created a test that was ready to run across all modern browsers and on different platforms (Win, Mac, and Linux).

Get Started Today

Ready to compare TestCafe Studio to your current web testing platform and experience the TestCafe difference for yourself?

Download Free 30-Day Trial

Should you have any questions or need assistance, share your comments below.

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.

What alternatives do you have when you change all ui to get different names of fields, or stress testing? the license is by user in only one computer? for example one user record the test, and only this user can run the test and get the reports of the tests?

28 August 2019
Alex Skorkin (DevExpress)
Alex Skorkin (DevExpress)
Thank you for your interest in our testing tools.
If you have elements with dynamic IDs or names, you can choose a different auto-generated selector, which corresponds to your scenario: Element Selector Types.
TestCafe Studio is a cross-platform IDE for end-to-end web testing. It does not support stress testing at the moment.
Our licensing is provided on a per tester/user basis. Each tester/user who uses our products must obtain their own license. You can use two or three computers as long as you are the only user of our products on them. The users who want to run your recorded tests need their own license.
29 August 2019
Can the user add comments in the recording?
29 August 2019
Can the user add comments in the recording?
29 August 2019
Alex Skorkin (DevExpress)
Alex Skorkin (DevExpress)


At the moment, comments cannot be added while you are recording your test cases. Would you please clarify what kind of comments you are interested in? What's the purpose of such comments? Do you also want to see them while playing back your test cases?

30 August 2019

I understand Testcafe Studio doesn't recognize the 'Next'/ 'Back' buttons in the browser's menu bar. Is there any way where we can navigate back to the previous page through TestCafe Studio tool?

Currently I am going to Homepage to navigate to different subpages. So it would be helpful if you could tell me if I can navigate to previous page directly?

31 October 2019
Alex Skorkin (DevExpress)
Alex Skorkin (DevExpress)

Using the next TestCafe Studio version, 1.2.0, which will become available this month, you can create steps with Custom Scripts where you can execute any actions like window.history.back() and window.history.forward() to navigate backward and forward.
4 November 2019

Please login or register to post comments.