​
Introduction

Components are reusable sequences of test steps that can be shared across multiple tests. Think of them as building blocks that encapsulate common workflows like login sequences, navigation patterns, or complex user interactions. By creating components, you can:
  • Reduce duplication across your test suite
  • Improve maintainability by updating logic in one place
  • Ensure consistency in how common workflows are executed
  • Speed up test creation by reusing pre-built sequences
Components are particularly powerful for frequently used workflows like authentication, setup procedures, or common user journeys that appear across multiple test scenarios.

​
Creating Components

You can create components from existing test steps in any test. Once created, components become available across your entire workspace for reuse in other tests.

​
From Existing Test Steps

1

Select the steps to componentize

In your test editor, select all the steps that you want to turn into a reusable component. You can select multiple consecutive steps by clicking on the first step, then holding Shift and clicking on the last step.
Selecting multiple test steps to create a component
2

Create the component

With your steps selected, click “Create Component” from the action menu. This will open the component creation dialog.
Creating a component from selected steps
3

Name and describe your component

Give your component a clear, descriptive name that reflects its purpose. Good examples include: - “Login with Admin Account” - “Navigate to User Profile” - “Complete Checkout Process” - “Setup Test Data” Optionally, add a description that explains what the component does and when to use it.
4

Save the component

Click “Create” to save your component. Stably will automatically replace the selected steps in your current test with a component call.
Component Parameters: Components can accept parameters to make them more flexible. If your component uses variables, those variables will be accessible when the component is called.

​
Using Components in Tests

Once created, components can be easily added to any test in your workspace through the step menu.

​
Adding Components to New Tests

1

Open the Add Step menu

In your test editor, click “Add Step” at the position where you want to insert the component.
2

Find your component

Scroll down or use the search functionality to find your component. Components are typically listed under their own section in the step menu.
Finding components in the Add Step menu
3

Add the component

Click on your component to add it to the test. The entire sequence of steps from the component will be inserted into your test.
Component successfully added to test

​
Configuring Component Parameters

The component parameters dialog provides an interface for configuring your component’s inputs. You can open the component parameters dialog by clicking the Gear Icon on the component action.
Component parameters dialog
Parameter Configuration Options:
  1. Input Parameters Section: Lists all parameters that the component expects, showing their names and any default values
  2. Parameter Management:
    • Add new parameters using the ”+ Add Parameter” button
    • Remove unnecessary parameters with the trash icon
Once configured, click “Save Parameters” to insert the component into your test with the specified parameter values. You can then call the component with the specified parameter values in your test.

​
Configuring Component Output Parameters

Components can return data to the test level through output parameters. This allows components to pass processed data, extracted values, or computed results back to the test level. It will be treated the same as test variables.
Component output parameters configuration dialog showing the Outputs tab
Common mistake: Variables created within the component but not defined as output parameters will remain internal to the component and are not accessible at the test level.

​
Using Variables in Components

Variables are essential for making components flexible and reusable. Components can access and use variables from different scopes to create dynamic, adaptable workflows.

​
Variable Types in Components

Test Variables:
  • Variables defined within the current test
  • Accessible to all components used in that test
  • Perfect for test-specific data and is not shared with other tests
Project Variables:
  • Include environment variables and shared configuration
  • Global variables available across all tests in the project
  • Ideal for application URLs, API keys, or common test data
Component Parameters:
  • Variables passed specifically to a component when it’s called
  • Provide component-specific customization
  • Allow the same component to work with different data sets
Component Output Variables:
  • Variables that components can return to the test level after execution
  • Defined in the component’s output parameters configuration
  • Created using the Define Variable action within component actions
  • Only variables explicitly defined as output parameters are returned to the test
See how parameters are configured in the Configuring Component Parameters section.

​
Variable Syntax and Usage

Accessing Variables: 
VARS.variable_name          # Test or project variable
VARS.parameter_name         # Component parameter
VARS.nested_object.field    # Nested object properties
Example Variable Usage in Components:
Component showing variable usage in login actions with VARS.testAccount.email and VARS.testAccount.password
This example demonstrates how variables are used within a login component:
  • The component parameter testAccount is configured with VARS.USER_STAGING_ACCOUNT_3
  • Email field uses VARS.testAccount.email to dynamically fill the email
  • Password field uses VARS.testAccount.password to securely provide credentials

​
Component Variable Scope

Components follow a hierarchical variable scope pattern, similar to how functions work in programming languages. Understanding this scope is crucial for effective component design and variable management.

​
Variable Access Hierarchy

Top-Level Components:
  • Have access to all test variables from the current test
  • Have access to all project variables (environment variables)
  • Cannot access variables defined within lower-level components
Nested Components:
  • Can access all variables from their parent component
  • Can access all test and project variables
  • Cannot access variables from sibling components or components at the same level

​
Scope Rules

Test Variables + Project Variables
    ↓
Top-Level Component
    ↓
Nested Component A
    ↓
Nested Component B
Access Pattern:
  • Downward Access: Components can access variables from their parent scope
  • No Upward Access: Components cannot access variables from child components
  • No Sibling Access: Components at the same level cannot access each other’s variables
Project Variables: For more information about project variables and environment configuration, see the Project Variables documentation.
—

​
Managing Components

​
Viewing and Editing Components

Components can be managed from the component library in your workspace:
1

Access Component Library

Navigate to the component management section in your project. Found in the left sidebar under Components.
2

View Component Details

  • View the component name and description
  • View the list of actions contained in the component
  • View the parameter definitions
  • View the usage statistics across tests
3

Edit Component

You can modify components by:
  • Updating the component name
  • Modifying parameter definitions
  • [Coming soon] Adding or removing actions

​
Component Versioning and Updates

When you update a component, all tests using that component will inherit the changes:
  • Automatic Updates: Tests using the component will automatically use the latest modified data.
Breaking Changes: Be careful when modifying components, as changes affect all tests that use them.

​
Archiving Components

Components can be archived when they’re no longer needed. Archiving is the recommended approach for managing components that are no longer actively used:
Component archiving dialog showing impact analysis and deletion strategy options
Archive Benefits:
  1. Archive Status: Archived components remain in existing tests but can’t be edited or added to new tests
  2. Visual Indicators: Archived components are clearly marked in the UI with a special badge
  3. Preserves Test Integrity: Existing test versions maintain their functionality
  4. Reversible Action: Components can be unarchived if needed later
  5. Historical Integrity: Maintains the complete history of test executions
When to Archive Components:
  • Components that are no longer needed for new tests
  • Legacy components that are being replaced by newer versions
  • Components that are temporarily out of use but may be needed later
For components that need to be permanently removed, Stably provides a comprehensive deletion process with impact analysis: Deletion Process:
  1. Impact Analysis: Before deletion, Stably analyzes the component’s usage across your project
  2. Reference Review: Shows all tests that currently reference the component
  3. Deletion Strategy Selection: Choose between archiving (recommended) or permanent deletion
Permanent Deletion Warning: Permanent deletion is irreversible and will remove all historical references to the component. Only use this option when you’re absolutely certain the component will never be needed again.

​
Examples and Use Cases

​
Authentication Components

Component: "Login with Admin User"
Actions:
1. Navigate to login page
2. Fill email field with VARS.admin_email
3. Fill password field with VARS.admin_password
4. Click "Sign In" button
5. Wait for dashboard to load

​
E-commerce Components

Component: "Checkout with Credit Card"
Parameters: checkoutInfo
Actions:
1. Navigate to checkout page
2. Fill name field with VARS.checkoutInfo.name
3. Fill email field with VARS.checkoutInfo.email
4. Fill phone field with VARS.checkoutInfo.phone
5. Fill address field with VARS.checkoutInfo.address
6. Fill city field with VARS.checkoutInfo.city
7. Fill state field with VARS.checkoutInfo.state
8. Fill zip code field with VARS.checkoutInfo.zip
9. Fill country field with VARS.checkoutInfo.country
10. Choose payment method: Credit Card
11. Fill card number field with VARS.checkoutInfo.cardNumber
12. Fill card expiration field with VARS.checkoutInfo.cardExpiration
13. Fill card CVV field with VARS.checkoutInfo.cardCVV
11. Click "Place Order" button
12. Verify order confirmation