Skip to main content

​
Overview

The Extract Value step captures text content from elements and stores it in a variable you can use in later steps. It’s the foundation for building dynamic tests that adapt to generated IDs, calculated values, or any content that changes between test runs.

​
When to Use Extract Value

Use Extract Value when you need to:
  • Capture generated IDs: Extract order numbers, transaction IDs, or user references to use in later verification
  • Store dynamic content: Save calculated totals, timestamps, or user-generated content for subsequent tests
  • Reuse data across steps: Extract an email address, username, or URL from one page to use on another
  • Build multi-step workflows: Capture data from early steps to fill forms or verify content later
  • Test data flow: Verify that data moves correctly through your application by extracting and checking values

​
How It Works

Extract Value finds an element using a CSS selector, reads its visible text content, and stores it in a named variable. Once stored, this variable becomes available in subsequent steps through the “Use variables” option in steps like Fill, Check Text, and Check URL. Think of Extract Value as creating a bridge between different parts of your test. You capture something dynamic early in your test flow and use it later to verify that data persists, displays correctly, or flows through your application as expected.

​
Using the Extract Value Step

When you add an Extract Value step, you’ll configure:

​
Finding the Source Element

Use the element picker to visually select the element containing the text you want to extract, or enter a CSS selector directly. Make sure your selector targets the exact element with the text content - not a parent wrapper or container.

​
Naming Your Variable

Give your variable a descriptive, alphanumeric name that clearly indicates what it contains. This name is how you’ll reference the value in later steps, so make it meaningful. Good variable names: orderNumber, userEmail, totalPrice, confirmationCode Poor variable names: var1, temp, x, data Variable names must be alphanumeric only (no spaces, hyphens, or special characters) and should be unique within your test.

​
Real-World Examples

​
Capturing an Order Confirmation Number

Step 1: Click
  Locator: button[data-action='place-order']

Step 2: Extract Value
  Locator: .order-confirmation-number
  Variable Name: orderNumber

Step 3: Navigate
  URL: /orders

Step 4: Check Text
  Locator: .recent-orders
  Use variables: orderNumber
  Assertion: Element has text
Why this works: Extract the generated order number from the confirmation page and verify it appears in your order history.

​
Multi-Page Data Verification

Step 1: Extract Value
  Locator: .user-email-display
  Variable Name: userEmail

Step 2: Click
  Locator: a[href='/settings']

Step 3: Check Text
  Locator: input[name='email']
  Use variables: userEmail
  Assertion: Element has text
Why this works: Verify that user data displays consistently across different pages.

​
Dynamic Form Filling

Step 1: Extract Value
  Locator: .generated-api-key
  Variable Name: apiKey

## Response Format

When you extract text using this step, the extracted value is stored as a **string** in the variable you specify. You can then reference this variable in subsequent steps.

### Example: Extracting an Order ID

**HTML on page:**
```html
<div class="order-confirmation">
  <span class="order-id">ORD-123456</span>
</div>
Extract Text step configuration:
  • Locator: .order-id
  • Variable Name: orderId
Stored value: "ORD-123456" Access in later steps:
  • In Fill step: ${orderId} → "ORD-123456"
  • In Verify Value step: Check if element contains ${orderId}
  • In API Request: Use in URL or body: https://api.example.com/orders/${orderId}

​
Example: Extracting a Price

HTML on page: 
<div class="cart-total">
  <span class="amount">$149.99</span>
</div>
Extract Text step configuration:
  • Locator: .cart-total .amount
  • Variable Name: cartTotal
Stored value: "$149.99" Note: The extracted value includes all text content exactly as displayed, including currency symbols and formatting.

​
Example: Extracting User Email

HTML on page: 
<div class="user-profile">
  <div class="email-display">[email protected]</div>
</div>
Extract Text step configuration:
  • Locator: .user-profile .email-display
  • Variable Name: userEmail
Stored value: "[email protected]" Use in subsequent steps:
  • Fill another email field: ${userEmail}
  • Verify it appears elsewhere: Check element contains ${userEmail}
  • Pass to API request: Include in request body or headers

​
Whitespace Handling

Extracted text preserves leading and trailing whitespace from the element’s text content. If you need trimmed values, consider using a Run Python step: 
async def supatest_run_code(extractedValue):
    return extractedValue.strip()

​
Common Issues

Step 3: Fill Locator: input[name=‘apiKey’] Use variables: apiKey 

Why this works: Extract a generated value and immediately use it to configure another feature.

### Transaction ID for Support Lookup
Step 1: Click Locator: button[type=‘submit’] Step 2: Extract Value Locator: .transaction-id Variable Name: transactionId Step 3: Navigate URL: /support Step 4: Fill Locator: input[name=‘transactionLookup’] Use variables: transactionId Step 5: Click Locator: button[data-action=‘search’] Step 6: Check Text Locator: .search-results Use variables: transactionId Assertion: Element has text 

Why this works: Test complete support lookup workflows using dynamically generated transaction IDs.

### Capturing Share Links
Step 1: Click Locator: button[data-action=‘generate-share-link’] Step 2: Extract Value Locator: input[readonly][type=‘text’] Variable Name: shareLink Step 3: Navigate (use variable) Use variables: shareLink Step 4: Check Visibility Locator: .shared-content Assertion: Is visible 

Why this works: Extract generated URLs and navigate to them to verify sharing functionality.

## Best Practices

### Write Stable Selectors
- Target elements with unique, stable attributes: `[data-testid='confirmation-code']`
- Use semantic selectors that reflect content: `.user-id`, `#transaction-number`
- Avoid brittle selectors based on layout: `div:nth-child(3) > span:first-child`

### Name Variables Clearly
Your variable names should:
- Describe what they contain: `customerName`, not `name1`
- Use consistent naming style: stick with camelCase or snake_case
- Be memorable enough to use steps later without confusion
- Avoid generic names like `value`, `data`, or `text`

### Handle Timing Correctly
- Add [Wait for Element](/steps/wait-for-element) if content loads dynamically
- Ensure the element contains text before extracting
- Account for animations or transitions that might delay content appearance

### Plan Your Data Flow
Think about how extracted values flow through your test:
- What data do you need to extract early?
- Which later steps will use this data?
- Do you need to extract multiple related values?
- Will the data persist across page navigations?

## Troubleshooting

### Element Not Found
**Symptom**: Test fails saying it can't find the element
**Solution**:
- Use the element picker to verify your selector
- Check that the element exists when the step runs
- Add a [Wait for Element](/steps/wait-for-element) if content loads asynchronously

### Extracted Value Is Empty
**Symptom**: Variable is created but contains empty or whitespace
**Solution**:
- Verify the element contains visible text content
- Check if text is in a child element rather than the target element
- Ensure the element has fully loaded before extraction
- Look for timing issues with dynamic content

### Variable Not Available in Later Steps
**Symptom**: "Use variables" dropdown doesn't show your variable
**Solution**:
- Verify the Extract Value step ran successfully
- Check that the variable name is alphanumeric only
- Ensure the variable name is unique in your test
- Confirm you're looking for the variable in a step that comes AFTER extraction

### Wrong Content Extracted
**Symptom**: Variable contains unexpected or partial text
**Solution**:
- Confirm your selector targets the right element (use element picker)
- Check if the element contains child elements with additional text
- Verify you're extracting text content, not attribute values
- Look for whitespace or formatting that might be included

## Using Extracted Values

Once you extract a value, it becomes available in the "Use variables" dropdown for these steps:

**Fill Steps**: Use extracted text to fill form fields with dynamic data

**Check Text Steps**: Verify that extracted values appear correctly in other elements

**Check URL Steps**: Use extracted URLs or parameters to verify navigation

**Navigate Steps**: Navigate to extracted URLs or dynamic paths

**API Request Steps**: Use extracted IDs or tokens in API calls

## Related Steps

- [Fill](/steps/fill) - Use extracted values to fill form fields
- [Check Text](/steps/verify-value) - Verify extracted values appear elsewhere
- [Check URL](/steps/verify-url) - Verify URLs match extracted patterns
- [Wait for Element](/steps/wait-for-element) - Wait for dynamic content before extraction