All Collections
Beginner
#2 First Trace (Login form)
#2 First Trace (Login form)

How to create your first test - the Login Form test

Arto Vuori avatar
Written by Arto Vuori
Updated over a week ago

#2 First Trace

Introduction

This tutorial shows you how to automate testing for one of the most critical functionalities on a website - the login. If login doesn’t work, users cannot access their accounts on the site.

1. Set The Base URL & Open Editor

Target the Base URL (1) to the website you would like to test. In this tutorial, we’ll use http://testsite.usetrace.com.

Open the editor by clicking “New Trace” (2).

2. Editor

This is the Editor where you create and maintain the traces for your test automation.

3. Virtual Browser

The large box is the Virtual Browser which opens the web page that we just defined (Base URL). The Virtual Browser runs in the Usetrace cloud and you can use it as a regular internet browser. For example, you can change the address, browse the site, click, type, scroll, open the developer tools, etc.

Above the Virtual Browser window, you can select which type of browser to run the trace with.

4. Trace Steps

On the left of the Editor, you see the trace. A trace consists of steps starting from top to bottom. Now we only have the first step which opens our site. We see a box that says ‘Start Recording’. This box is called the Pointer.

5. Pointer

The Pointer adds steps to its location in the trace. In the Pointer, you can choose which type of step to add. The default mode is to record steps automatically.

You can also add steps to Click, Check, Hover with the mouse, Check content, Open Email, Wait, and much more (see editor/steps).

6. Navigating to Login Form

Now, click Login link with your mouse on the web page.

7. Filling Form

Fill out the form with “john.doe@example.com”. As we interact with the site, the Pointer adds steps to our trace (2). After clicking the login button, you’ll see that the completed form is shown as a single step.

8. Adding Check

To verify that we are logged in after submitting the correct credentials, add a check step to see if the “Logged in as” text is present.

Select check mode from the pointer (1) and click on the “Logged in” text on the web page (2). You can add the expected specific text in the Content Comparison part (3).

9. Running Trace

Run the trace to make sure it works. To run the trace with Chrome, click on the Chrome icon (1).

After the run is finished the result is indicated at the end of the last step (2).

10. Change Trace’s Name

Finally, we’ll name the trace by clicking the current name “Trace 1” and typing the new name “Login”.

Now we have created a trace that can automatically test the login functionality on a website with all the supported browsers.

Did this answer your question?