Automated Web Testing: How to Create a Web Test in 2 Minutes with TestCafe Studio
Tags: e2e, testing, automation, web
Published: 2019-11-06 16:02:14

[TestCafe Studio](http://www.devexpress.com/products/testcafestudio/?utm_source=devto&utm_medium=content&utm_campaign=testcafestudio&utm_content=tcs) is a cross-platform IDE for end-to-end web testing. It is powered by the [TestCafe open-source framework](http://devexpress.github.io/testcafe/?utm_source=devto&utm_medium=content&utm_campaign=testcafestudio&utm_content=framework) and allows you to create, run, and maintain automated tests with zero code.

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.
{% youtube 40mSSjHqAJc%}

###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.

<img src="https://community.devexpress.com/blogs/testcafe/TwoMinutes/02-start-recording.png" alt="Start the Visual Test Recorder" />

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

<img src="https://community.devexpress.com/blogs/testcafe/TwoMinutes/03-select-upload-mode.jpg" alt="Select upload mode" width="265" />


I’ll then enable multi-file checkbox.

<img src="https://community.devexpress.com/blogs/testcafe/TwoMinutes/04-check-box.jpg" alt="Check box action" width="285" />

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

<img src="https://community.devexpress.com/blogs/testcafe/TwoMinutes/05-select-files.png" alt="Select the files" width="403" />

I’ll click Upload to complete the process.

<img src="https://community.devexpress.com/blogs/testcafe/TwoMinutes/06-click-upload.png" alt="Click Upload" width="172" />

###Step 2: Review the Action List
Its time to switch to TestCafe Studio and review the commands generated by my actions.

<img src="https://community.devexpress.com/blogs/testcafe/TwoMinutes/07-action-list.png" alt="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.

<img src="https://community.devexpress.com/blogs/testcafe/TwoMinutes/09-add-assertion.png" alt="Add assertion" width="124" />

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

<img src="https://community.devexpress.com/blogs/testcafe/TwoMinutes/11-invoke-element-picker.png" alt="Invoke Element Picker" width="444" />

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

<img src="https://community.devexpress.com/blogs/testcafe/TwoMinutes/12-pick-label.png" alt="Pick the Label on the Web Page" width="296" />

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.

<img src="https://community.devexpress.com/blogs/testcafe/TwoMinutes/13-property-grid.png" alt="Select an element's property from the Property Grid" width="402" />

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

<img src="https://community.devexpress.com/blogs/testcafe/TwoMinutes/14-confirm-value.png" alt="Confirm the value" width="436" />

###Step 4: Add a Format Assertion
In much the same way, you can assert a label’s font-size CSS property value.

<img src="https://community.devexpress.com/blogs/testcafe/TwoMinutes/15-assertion.png" alt="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.

<img src="https://community.devexpress.com/blogs/testcafe/TwoMinutes/16-run-test.png" alt="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.

<img src="https://community.devexpress.com/blogs/testcafe/TwoMinutes/17-view-report.png" alt="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](http://www.devexpress.com/products/testcafestudio/?utm_source=devto&utm_medium=content&utm_campaign=testcafestudio&utm_content=download)**