Extract Value

Overview

The Extract Value step extracts text content or attribute values from page elements using CSS selectors. The extracted value is stored in a variable that you can use in subsequent steps.

When to Use Extract Value

Use Extract Value when you need to:

Capture displayed text: Extract visible text from elements like prices, order numbers, or status messages
Extract attribute values: Get values from element attributes like href, data-id, or value
Store data for later use: Save extracted values to use in subsequent steps
Build dynamic workflows: Create test flows that adapt based on page content

Configuration

Field	Type	Required	Description
Locator	CSS selector	Yes	Element to extract from
Extract Type	dropdown	Yes	What to extract: Text Content or Attribute
Attribute Name	text	Conditional	Required when Extract Type is Attribute
Variable Name	text	Yes	Name for storing the extracted value

Locator

Use a CSS selector to identify the element. Examples:

#order-number - Element with ID
.price-total - Element with class
[data-testid="confirmation-code"] - Element with data attribute
span.order-id - Specific element type with class

Extract Type

Text Content: Extracts the visible text inside the element.

<span class="order-id">ORD-123456</span>

Extracts: "ORD-123456" Attribute: Extracts the value of a specified attribute.

<a href="/orders/123" data-order-id="123">View Order</a>

With Attribute Name data-order-id, extracts: "123"

Variable Name

The extracted value is stored in this variable. Access it in later steps using {{ vars.variableName }}.

Examples

Extract Order Number

Locator: .order-confirmation-number
Extract Type: Text Content
Variable Name: orderNumber

HTML:

<span class="order-confirmation-number">ORD-2024-78534</span>

Result: "ORD-2024-78534" Use in later steps: {{ vars.orderNumber }}

Extract Price

Locator: [data-testid="total-price"]
Extract Type: Text Content
Variable Name: totalPrice

HTML:

<div data-testid="total-price">$149.99</div>

Result: "$149.99"

Extract Link URL

Locator: a.download-link
Extract Type: Attribute
Attribute Name: href
Variable Name: downloadUrl

HTML:

<a class="download-link" href="/files/report-2024.pdf">Download Report</a>

Result: "/files/report-2024.pdf"

Extract Input Value

Locator: input#email
Extract Type: Attribute
Attribute Name: value
Variable Name: emailValue

HTML:

<input id="email" type="email" value="[email protected]" />

Result: "[email protected]"

Extract Data Attribute

Locator: .product-card
Extract Type: Attribute
Attribute Name: data-product-id
Variable Name: productId

HTML:

<div class="product-card" data-product-id="SKU-12345">...</div>

Result: "SKU-12345"

Real-World Scenarios

Capture and Verify Order Flow

Step 1: Fill - Enter order details
Step 2: Click - Submit order button
Step 3: Extract Value
  Locator: .confirmation-number
  Extract Type: Text Content
  Variable Name: confirmationNumber

Step 4: Navigate
  URL: /orders/lookup

Step 5: Fill
  Locator: input#order-search
  Value: {{ vars.confirmationNumber }}

Step 6: Verify Value
  Locator: .order-status
  Expected: Confirmed

Extract and Use in API Request

Step 1: Extract Value
  Locator: [data-user-id]
  Extract Type: Attribute
  Attribute Name: data-user-id
  Variable Name: userId

Step 2: API Request
  Method: GET
  URL: {{ env.API_URL }}/users/{{ vars.userId }}

Multi-Value Extraction

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: {{ vars.orderId }} → "ORD-123456"
In Verify Value step: Check if element contains {{ vars.orderId }}
In API Request: Use in URL or body: https://api.example.com/orders/{{ vars.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: {{ vars.userEmail }}
Verify it appears elsewhere: Check element contains {{ vars.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 Use Cases

Using Extracted API Keys

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


Step 2: Fill
  Locator: input[name='apiKey']
  Text: {{ vars.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: .cart-tax
  Variable Name: tax

Step 3: Extract Value
  Locator: .cart-total
  Variable Name: total

Step 4: Run Python
  Code: |
    # Verify calculation
    sub = float(vars.subtotal.replace('$', ''))
    tax = float(vars.tax.replace('$', ''))
    total = float(vars.total.replace('$', ''))
    return abs(sub + tax - total) < 0.01

Extract Value vs AI Extract

Feature	Extract Value	AI Extract
Selection method	CSS selector	Natural language prompt
Speed	Fast (direct DOM access)	Slower (AI processing)
AI Credits	None	1 credit per use
Best for	Stable selectors	Dynamic content
Accuracy	Exact match required	Context-aware

Use Extract Value when:

Elements have reliable selectors (data-testid, IDs, stable classes)
Speed matters
You want to avoid AI credit usage
Simple text or attribute extraction

Use AI Extract when:

Elements lack stable selectors
Content structure varies between runs
You need visual context for extraction

Best Practices

Use Stable Selectors

Prefer selectors that won’t change:

[data-testid="order-id"] - Test IDs are stable
#confirmation-code - IDs are usually stable
.order-summary .total - Specific class paths

Avoid fragile selectors:

.css-1a2b3c - Auto-generated classes change
div > div > span:nth-child(3) - Position-based, breaks easily

Name Variables Clearly

Use descriptive names:

orderConfirmationNumber not num
productPrice not val
userEmailAddress not email1

Handle Missing Elements

If the element might not exist, add error handling:

Step 1: Wait for Element (optional)
  Locator: .order-number
  Timeout: 5s

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

Trim and Clean Values

Extracted text may include whitespace. Use expressions to clean:

{{ vars.orderNumber.trim() }}
{{ vars.price.replace('$', '') }}

Troubleshooting

Element Not Found

Symptom: Step fails with “element not found” Solutions:

Verify the selector in browser DevTools
Add a Wait for Element step before extraction
Check if element is inside an iframe
Ensure page has fully loaded

Wrong Value Extracted

Symptom: Extracted value is different than expected Solutions:

Make selector more specific to target the exact element
Check if there are multiple matching elements (first one is used)
Verify you’re using the correct Extract Type (Text vs Attribute)

Variable Not Available

Symptom: {{ vars.myVar }} doesn’t resolve Solutions:

Verify the Extract Value step completed successfully
Check variable name spelling matches exactly
Ensure the extraction step runs before the step using the variable

Empty Value Extracted

Symptom: Variable is empty string Solutions:

Check if element has visible text content
For hidden elements, try extracting textContent attribute
Verify the element isn’t dynamically populated after page load

AI Extract - AI-powered extraction for dynamic content
Fill - Use extracted values in form fields
Verify Value - Verify extracted values
Wait for Element - Ensure element exists before extraction

Interactions

Navigation

Verification

Utilities

Technical

Overview

When to Use Extract Value

Configuration

Locator

Extract Type

Variable Name

Examples

Extract Order Number

Extract Price

Extract Link URL

Extract Input Value

Extract Data Attribute

Real-World Scenarios

Capture and Verify Order Flow

Extract and Use in API Request

Multi-Value Extraction

Example: Extracting a Price

Example: Extracting User Email

Whitespace Handling

Common Use Cases

Using Extracted API Keys

Transaction ID for Support Lookup

Extract Value vs AI Extract

Best Practices

Use Stable Selectors

Name Variables Clearly

Handle Missing Elements

Trim and Clean Values

Troubleshooting

Element Not Found

Wrong Value Extracted

Variable Not Available

Empty Value Extracted

Interactions

Navigation

Verification

Utilities

Technical

​Overview

​When to Use Extract Value

​Configuration

​Locator

​Extract Type

​Variable Name

​Examples

​Extract Order Number

​Extract Price

​Extract Link URL

​Extract Input Value

​Extract Data Attribute

​Real-World Scenarios

​Capture and Verify Order Flow

​Extract and Use in API Request

​Multi-Value Extraction

​Example: Extracting a Price

​Example: Extracting User Email

​Whitespace Handling

​Common Use Cases

​Using Extracted API Keys

​Transaction ID for Support Lookup

​Extract Value vs AI Extract

​Best Practices

​Use Stable Selectors

​Name Variables Clearly

​Handle Missing Elements

​Trim and Clean Values

​Troubleshooting

​Element Not Found

​Wrong Value Extracted

​Variable Not Available

​Empty Value Extracted

​Related Steps

Overview

When to Use Extract Value

Configuration

Locator

Extract Type

Variable Name

Examples

Extract Order Number

Extract Price

Extract Link URL

Extract Input Value

Extract Data Attribute

Real-World Scenarios

Capture and Verify Order Flow

Extract and Use in API Request

Multi-Value Extraction

Example: Extracting a Price

Example: Extracting User Email

Whitespace Handling

Common Use Cases

Using Extracted API Keys

Transaction ID for Support Lookup

Extract Value vs AI Extract

Best Practices

Use Stable Selectors

Name Variables Clearly

Handle Missing Elements

Trim and Clean Values

Troubleshooting

Element Not Found

Wrong Value Extracted

Variable Not Available

Empty Value Extracted

Related Steps