Skip to main content

​
Overview

The Fill step types text into form fields, text areas, and other input elements on your page. Whether you’re entering static test data, pulling values from environment variables, reusing data from previous steps, or generating realistic dummy data on the fly, Fill handles all your text input needs.

​
When to Use Fill

Fill is perfect when you need to:
  • Enter test data into forms: Registration forms, login pages, search boxes, profile updates
  • Work with sensitive information: Use environment variables to keep passwords and API keys secure
  • Reuse dynamic data: Fill fields with values extracted or generated earlier in your test
  • Generate realistic test data: Create random names, emails, phone numbers, and other data for testing

​
How It Works

Fill simulates real user typing by entering text character-by-character into input elements. This is different from directly setting a value - it triggers all the same events a real user would (keydown, keypress, keyup, input), making it ideal for testing forms with validation, autocomplete, or dynamic behavior that responds to user input. The step finds your target element using a CSS selector, clears any existing content, and types the new text. You can enter static text, reference environment variables, pull from previously declared variables, or generate random dummy data that looks realistic.

​
Using the Fill Step

When you add a Fill step, you’ll configure these key elements:

​
Finding Your Input Field

Use the element picker to visually select your input field, or enter a CSS selector directly. The more specific your selector, the more stable your test will be. Look for unique attributes like data-testid or name attributes that won’t change when the UI is updated.

​
Choosing Your Text Input Method

Fill gives you four flexible ways to provide text: Manual Text Entry Type the text directly into the field. Great for static test data like usernames, product names, or search terms. Environment Variables Reference sensitive data stored in your environment using {{VARIABLE_NAME}} syntax. Perfect for passwords, API keys, or configuration that changes between staging and production. Variables from Previous Steps Toggle “Use variables” to choose from variables you declared earlier in your test. This appears when you’ve used steps like Extract Value, Run Python, or API Request to save data. Ideal for multi-step flows where later inputs depend on earlier results. Random Dummy Data Toggle “Random Data” to generate realistic test data on the fly. Choose from categories like:
  • Personal: Names, emails, phone numbers, including Supatest Email for email testing
  • Address: Streets, cities, postal codes
  • Internet: URLs, usernames, domains
  • Finance: Credit card numbers, currencies
  • Date/Time: Dates, times, timestamps
  • Text: Lorem ipsum, sentences, paragraphs
When you generate random data, give it a variable name so you can reference that same value later in your test.

​
Real-World Examples

​
Logging In with Environment Variables

Locator: input[name='email']
Text: {{TEST_USER_EMAIL}}

Locator: input[type='password']
Text: {{TEST_USER_PASSWORD}}
Why this works: Keeps credentials out of your test code and lets you use different accounts in different environments.

​
Registration Flow with Generated Data

Step 1: Fill
  Locator: input[name='fullName']
  Random Data: Person Full Name
  Variable Name: userName

Step 2: Fill
  Locator: input[name='email']
  Random Data: Supatest Email
  Variable Name: userEmail

Step 3: Fill
  Locator: input[name='password']
  Text: TestPassword123!
Why this works: Each test run creates a unique user with realistic data. The Supatest Email can receive actual test emails.

​
Multi-Step Form with Data Reuse

Step 1: Extract Value
  Locator: .generated-order-id
  Variable Name: orderId

Step 2: Fill
  Locator: input[name='orderReference']
  Use variables: orderId
Why this works: Capture data from one part of your app and use it elsewhere in the same test.

​
Dynamic Search Query

Locator: input[placeholder='Search products']
Text: {{env.PRODUCT_CATEGORY}} laptop
Why this works: Combine environment variables with static text for flexible, reusable tests.

​
Best Practices

​
Write Stable Selectors

  • Prefer data-testid attributes: [data-testid='email-input']
  • Use name attributes for forms: input[name='username']
  • Avoid brittle selectors that reference layout: .row-3 > div:nth-child(2) > input

​
Choose the Right Input Method

  • Use manual text for static values that never change
  • Use environment variables for any sensitive data or configuration
  • Use “Use variables” to chain steps together and test connected workflows
  • Use random data when you need realistic variety or unique values per test run

​
Name Your Variables Well

When generating random data, use descriptive names:
  • ✅ customerEmail, billingZipCode, productName
  • ❌ var1, temp, x
Clear names make your test easier to understand and maintain.

​
Testing Email Workflows

When you need to verify emails sent by your application, use the Supatest Email random data type. This generates email addresses like [email protected] that can receive real emails during test execution. Combine this with the Check Email step to verify the emails your app sends.

​
Troubleshooting

​
Input Field Not Found

Symptom: Test fails saying it can’t find the element Solution:
  • Check that the element exists and is visible when the step runs
  • Use the element picker to confirm your selector
  • Add a Wait for Element step if the field loads dynamically

​
Environment Variable Not Working

Symptom: Field shows {{VARIABLE_NAME}} literally instead of the value Solution:
  • Verify the variable is defined in your environment settings
  • Check the variable name matches exactly (they’re case-sensitive)
  • Make sure you’re using the correct double-curly-brace syntax

​
Variable Dropdown Is Empty

Symptom: When you toggle “Use variables”, no options appear Solution:
  • You can only use variables that were declared in previous steps
  • Make sure the earlier step (Extract Value, Run Python, etc.) ran successfully
  • Check that you’re using a unique variable name (no duplicates)

​
Generated Data Has Wrong Format

Symptom: Random data doesn’t match what the form expects Solution:
  • Choose the right data type from the dropdown (Email for email fields, Phone for phone fields, etc.)
  • Remember variable names must be alphanumeric only
  • Each variable name should be unique within your test
  • Extract Value - Capture text from the page to use in Fill steps later
  • Select - For dropdown and select field interactions
  • Verify Value - Check that filled values appear correctly
  • Check Email - Verify emails sent to Supatest Email addresses