> ## Documentation Index
> Fetch the complete documentation index at: https://docs.spurtest.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Extractions

> Guide to extracting and reusing data in Spur tests

Extractions let you capture data from your application during a test run and reuse it in later steps. Instead of hardcoding values, you store them as variables that Spur carries forward throughout the test.

## When to use extract

Use an extract step when your test needs to **remember a value from one page and use it on another**. Common scenarios include:

* **Cross-page validation** — You're on a product listing page (PLP) and want to capture a product name and price, then verify those same values appear correctly on the product detail page (PDP) and again at checkout.
* **Capturing generated data** — Your application creates something new (an order confirmation number, a ticket ID, a username) and you need that value in a later step or a dependent test.
* **Dynamic content** — The data changes on every run (timestamps, generated emails, randomized content), so you can't hardcode it in your test.

<Note>
  Extract captures what is **currently visible on the page**. Add the extract step at the point in your test where the value you need is on screen.
</Note>

## How to add an extract step

<Steps>
  <Step title="Open the step menu">
    Type `extract` in the step input, or use `/` and choose **Extract a value**.

    <Frame>
      <img src="https://mintcdn.com/spur/-kGswOS1KFY-omef/images/Screenshot2026-02-12at2.37.48PM.png?fit=max&auto=format&n=-kGswOS1KFY-omef&q=85&s=d9acc060247edc9f15c975dddf911571" alt="Step menu showing extract a value option" width="652" height="640" data-path="images/Screenshot2026-02-12at2.37.48PM.png" />
    </Frame>
  </Step>

  <Step title="Configure the extraction">
    Enter a **Variable Name** and an **Extraction Instruction** that tells Spur exactly what to capture from the page. You can extract up to 5 variables in a single extract step.

    <Frame>
      <img src="https://mintcdn.com/spur/-kGswOS1KFY-omef/images/Screenshot2026-02-12at2.39.36PM.png?fit=max&auto=format&n=-kGswOS1KFY-omef&q=85&s=dd7d28a972fca30dae21f64376b6842b" alt="Extract configuration with variable name and extraction instruction" width="1080" height="638" data-path="images/Screenshot2026-02-12at2.39.36PM.png" />
    </Frame>
  </Step>

  <Step title="Save the step">
    Click **Save Step**. The step now shows the variable name it will extract.

    <Frame>
      <img src="https://mintcdn.com/spur/-kGswOS1KFY-omef/images/Screenshot2026-02-12at2.41.24PM.png?fit=max&auto=format&n=-kGswOS1KFY-omef&q=85&s=dc2904d727aae5f614bd01972adf852a" alt="Saved extract step" width="1074" height="100" data-path="images/Screenshot2026-02-12at2.41.24PM.png" />
    </Frame>
  </Step>

  <Step title="Use the variable in later steps">
    In any subsequent step, type `{` to open the variable menu and select your extracted variable.

    <Frame>
      <img src="https://mintcdn.com/spur/nNuvmyM4s84IFvTw/images/Extract/file_name_retrieve.png?fit=max&auto=format&n=nNuvmyM4s84IFvTw&q=85&s=0a6fcf83b7fbfde0b0e64f2ab1b499e8" alt="Variable menu showing extracted value" width="1204" height="398" data-path="images/Extract/file_name_retrieve.png" />
    </Frame>
  </Step>
</Steps>

After a test run, you can see the extracted values in the **Environment** tab of the Spur Console.

<Frame>
  <img src="https://mintcdn.com/spur/nNuvmyM4s84IFvTw/images/Extract/extraction_result.png?fit=max&auto=format&n=nNuvmyM4s84IFvTw&q=85&s=58f73fbcc3a380b7c04c17e608daf627" alt="Environment tab showing extracted variable and its value" width="2202" height="386" data-path="images/Extract/extraction_result.png" />
</Frame>

## Example: Validate product data across pages

A common e-commerce test needs to verify that a product's name and price stay consistent from the listing page, through the detail page, and into the cart. Here's how to build that with extract steps:

<Steps>
  <Step title="Extract the product name on the PLP">
    On the product listing page, add an extract step to capture the product name into a variable called `PRODUCT`.
  </Step>

  <Step title="Click into the product">
    Use the extracted variable to click on the correct product: `Click on {PRODUCT}`.
  </Step>

  <Step title="Extract the price on the PDP">
    Now on the product detail page, add another extract step to capture the price into a variable called `PRICE`.
  </Step>

  <Step title="Add to cart and verify">
    Click **Add to cart**, then add a verify step to confirm the cart shows the correct product name and price using your extracted variables.
  </Step>
</Steps>

Here's what this test looks like in Spur:

<Frame>
  <img src="https://mintcdn.com/spur/nNuvmyM4s84IFvTw/images/Extract/e_comm.png?fit=max&auto=format&n=nNuvmyM4s84IFvTw&q=85&s=93d30b3006b482a03189327055bb4d6f" alt="E-commerce test flow showing extract PRODUCT, click product, extract PRICE, add to cart, and verify" width="1042" height="624" data-path="images/Extract/e_comm.png" />
</Frame>

You can extend this pattern to the checkout page by adding more verify steps that reference the same `PRODUCT` and `PRICE` variables — no need to extract again.

## Example: Capture a confirmation number for a dependent test

When your application generates data (like an order confirmation number), you can extract it and pass it to a future step or a dependent test:

1. Complete the flow that generates the data (e.g., place an order).
2. Add an extract step to capture the confirmation number into a variable like `order_id`.
3. In a later step, reference `{order_id}` to look up or verify the order.

If you need this value in a **separate test**, use the extracted variable as a [dependency](/authoring-tests/dependencies) so the downstream test receives it automatically.

## Generating random emails

You can generate random email addresses directly in your test steps using natural language. This is useful for sign-up flows, form submissions, or any scenario that requires a unique email each time.

In a **Type** step, describe the email format you want. For example:

```
Type a random email address using a string of 10 random letters
and a number that always increments by 1 with the domain of @testdomain.com
```

Spur generates a unique email like `abcdefghij1@testdomain.com` on each run. To reuse this email later in your test, add an **Extract** step right after to save it as a variable.

<Tip>
  You can also use the `@` symbol in a step to insert a randomly generated email address inline, without needing a separate extract step.
</Tip>

## Accessing extracted variables in JavaScript

You can access extracted variables in JavaScript steps using the `window.env` or `env` object:

```javascript theme={null}
// Access an extracted variable
window.env.variable_name

// or
env.variable_name
```

For example, if you extracted a value into a variable called `Email_address`, you can reference it in a JavaScript step as `window.env.Email_address` or `env.Email_address`.

## More examples

<AccordionGroup>
  <Accordion title="Form validation — verify error messages">
    Extract an error message into a variable, then verify it matches the expected text. Useful when error wording is dynamic or locale-dependent.

    <Frame>
      <img src="https://mintcdn.com/spur/nNuvmyM4s84IFvTw/images/Extract/form_validation.png?fit=max&auto=format&n=nNuvmyM4s84IFvTw&q=85&s=15f8132ee6be6a086a90dbb06f88637c" alt="Form validation flow extracting ERROR_MESSAGE and verifying it" width="1050" height="274" data-path="images/Extract/form_validation.png" />
    </Frame>
  </Accordion>

  <Accordion title="Dynamic data — capture multiple values at once">
    Extract multiple values (like a count and a timestamp) in a single extract step, then use both in a verify step.

    <Frame>
      <img src="https://mintcdn.com/spur/nNuvmyM4s84IFvTw/images/Extract/data_processing.png?fit=max&auto=format&n=nNuvmyM4s84IFvTw&q=85&s=60af0594d5c966d3125a6ed0eee65e15" alt="Data processing flow extracting COUNT and TIMESTAMP" width="1052" height="318" data-path="images/Extract/data_processing.png" />
    </Frame>
  </Accordion>
</AccordionGroup>
