Create Your First Test Case

​

Quick Start Video

​

Overview

This guide walks you through creating your first test case in Supatest—from navigating to the test module, configuring your test, adding steps, and running it with a live browser.

​

Prerequisites

Before you begin:

• Sign up for a Supatest account at app.supatest.ai
• Have a web application URL ready to test

​

Step 1: Navigate to Tests

1. Log in to your Supatest dashboard
2. Click Tests in the left sidebar
3. You’ll see the Test Explorer with your folders and test cases

​

Step 2: Create a New Test Case

1. Click the Create button in the top-right corner
2. Select New Test Case from the dropdown
3. A dialog appears to configure your test

​

Configure Your Test

4. Click Create to create the test case
5. You’ll be taken to the Editor where you can build your test

​

Step 3: Add Your First Step

The Editor is where you build your test. Let’s add a navigation step to open your application.

1. Click the + button to add a new step
2. Select Navigate from the step types
3. Enter your application URL:
   • For a hardcoded URL: https://your-app.com
   • For an environment variable: {{ env.BASE_URL }}

​

Step 4: Start the Live Browser

1. Click the Run button in the toolbar
2. Select your browser (Chromium, Firefox, or WebKit)
3. The live browser session starts on the right side of the editor
4. Watch as your Navigate step executes and loads your application

​

Step 5: Add More Steps

Now that your application is loaded, add steps to interact with it:

​

Click a Button or Link

1. Click + to add a step
2. Select Click
3. Use the Element Picker (crosshair icon) to select the element on the live page
4. The locator is automatically captured

​

Fill a Form Field

1. Add a Fill step
2. Use the Element Picker to select the input field
3. Enter the value to type, or use expressions:
   • Static: [email protected]
   • Environment variable: {{ env.TEST_EMAIL }}
   • Random data: {{ random.email() }}

​

Verify Something

1. Add a Verify Text or Verify Visibility step
2. Select the element to verify
3. Enter the expected text or visibility state

​

Step 6: Run Your Complete Test

1. Click Run All to execute all steps from the beginning
2. Watch the live browser as each step runs
3. Check the results:
   • ✅ Green checkmarks indicate passed steps
   • ❌ Red X marks indicate failed steps
4. If a step fails, click it to see:
   • Screenshot: What the page looked like
   • AI Logs: Human-readable explanation
   • Raw Logs: Technical details

​

Example: Simple Login Test

Here’s a complete example of a login test:

​

Tips for Your First Test

​

Keep It Simple

Start with a straightforward flow:

• Navigate to a page
• Perform 2-3 interactions
• Verify the outcome

​

Use the Element Picker

Instead of writing locators manually, use the Element Picker to capture them directly from the live page.

​

Add Meaningful Assertions

End your test with verification steps that confirm the expected outcome. A test without assertions only proves the steps didn’t crash—not that they worked correctly.

​

Save Frequently

Your changes are auto-saved, but it’s good practice to verify your test is saved before closing.

​

What’s Next?

Now that you’ve created your first test, explore more:

​

Troubleshooting

​

Live Browser Won’t Start

• Check your internet connection
• Try refreshing the page
• Ensure you haven’t exceeded concurrent session limits

​

Element Picker Not Selecting

• Make sure the live browser is connected (green indicator)
• Try clicking the element multiple times
• Use the manual locator input if needed

​

Step Fails Immediately

• Verify the locator is correct
• Check if the element exists on the page
• Add a wait step if the element loads dynamically

​

Related

• Editor - Full editor documentation
• Expressions - Using dynamic values
• Environments - Environment configuration
• Run Modes - Different ways to run tests