LogoLogo
BugBug HomepageContact SupportLoginSign up free
  • Documentation
  • Tutorial for beginners
  • Best practices
  • BugBug App FAQ
  • Quick Start
    • What is test automation?
    • Start for free
    • Create your first project
    • Install Chrome extension
    • Create and run the tests
  • Creating Tests
    • Your first test
    • Independent tests
    • Duplicating tests
    • New test from here
  • Recording tests steps
    • BugBug overlay
    • Recording clicks
    • Recording hover
    • Recording keyboard typing
    • Recording assertions
    • Recording drag & drop
    • Record from here
    • Re-recording steps
    • Recording pop-up window actions
    • Using keyboard shortcuts
  • Editing tests
    • Grouping steps
    • Components
    • Manually editing steps
    • Actions
    • Assertions
    • Tabs & iframes
    • Variables
    • Local variables
    • Profiles
    • Custom JavaScript actions
  • Running tests
    • Running the tests
    • Statuses
    • Run (locally)
    • Run and pause here
    • Run in cloud
    • Schedules
    • Parallel runs
    • Running via API
    • Test your local build or protected web page using ngrok
  • Preventing failed tests
    • Waiting conditions
    • Smart click
    • Smart scroll
    • Selectors
    • Timeout
    • Delay / Sleep
    • Project settings
  • Debugging Tests
    • Runs history
    • Screenshots
    • Debug in Chrome
    • Breakpoint (run step-by-step)
  • Organizing tests
    • Naming your tests
    • Searching tests
    • Suites
    • Components
    • Projects
  • Workflow Tips
    • Edit & Rewind
    • Changing the test screen size
    • Multiple environments
    • Testing registration & login
    • Integrating with build systems
    • Mobile version testing
  • Collaboration
    • Organizations
    • Inviting team members
    • Alerts
      • Sending email notification
      • Sending webhook
      • Sending Slack message
      • Sending Teams message
  • Integrations
    • CLI
    • Zapier
    • Slack
    • GitHub
    • Bitbucket
    • Gitlab
    • Trello
    • Jira
  • Your account
    • Account settings
    • Edit your name and email
    • Forgot password
    • Manage Subscriptions
    • Account FAQ
  • Troubleshooting
    • Prohibited behaviors
    • Updating Chrome extension
    • Clear cookies and site data for BugBug
    • Testing basic auth password protected websites
    • Common selectors issues
    • CAPTCHA in automation testing
    • Cloud tests sometimes failing
    • IPs list of cloud runners
    • VPN or a Firewall
    • A/B tests
    • Report a bug
  • IN-DEPTH GUIDES
    • Beginners tutorial to automation testing
    • XPath Selectors without coding
    • Tech Leader's Guide to Automation Testing
    • Test automation guides
  • FREE TOOLS
    • BugBug Testing Inbox
    • Example SaaS App
    • No-code XPath Selector Builder
  • Other links
    • BugBug Homepage
    • Pricing
    • Terms & conditions
    • Privacy Policy
Powered by GitBook
On this page
  • What are components?
  • Why use components?
  • Where are the components?
  • Components list
  • How to make a reusable component?
  • Insert an existing component
  • Unlinking components
  • Splitting components
  • Removing components from a test
  • Changing back the component to a regular group
  • Edit components
  • Additional actions on single component
  • Additional bulk actions on components

Was this helpful?

  1. Editing tests

Components

PreviousGrouping stepsNextManually editing steps

Last updated 1 year ago

Was this helpful?

What are components?

Components are groups of steps that are shared across multiple tests. So basically, if you don't want to repeat the most often-used steps, such as visiting the main page and logging in using valid credentials, you create a new component that will contain all those steps and use it easily, and fast across all your tests that will require this action.

Why use components?

Once you create a new component, remember that when you change something inside that group it will be changed in all tests where you used that group.

To save time! This can save you time when you want to work with test automation for complex products. With components, you can change your test only once, instead of hundreds of times or manually copy-pasting them between tests.

How many components do you need? It's better to have more than less. It's not a problem if all your groups are components.

Example: make a component from click action on your "Sign up" button. All your tests that can now use such a component and if you change the "Sign up" button in the future you can do it only once.

Where are the components?

The "Components" module can be found under the same name in the main navigation. For starters, the list is empty, but this will change as soon as new components are added.

Components list

When new components are added, they will be displayed on the list, where those that are used in the most tests are displayed at the top.

How to make a reusable component?

Firstly you need to have a group of steps that are repeatable and useful in many tests.

  1. Make a component from this group

To create a component go to test view and choose the group of steps that will become your one component. Then click on the MAKE COMPONENT button on their group name.

From now on, every change you make in this component will also apply to other tests that have this component.

Insert an existing component

You can also add an existing component to an existing test:

This can be also done when creating a completely new test:

You can browse all your components here and search for a specific one that you want to add:

Important! You can only add one instance of a specific component per test. We are aware of this limitation and we are working to improve it in the future.

Unlinking components

When you unlink a component, it will convert it to a regular group and append a "duplicate" to the group name. This will only unlink it in this specific test! Use it for making a small modification that is not required in any other test.

Splitting components

This works exactly the same as splitting a group. You will get two new components after splitting a component and you can immediately rename them. All instances of this component in all tests will also be split.

Removing components from a test

You can remove the component from a specific test.

  • "Remove from this test" - This will only remove it from this test, but not from other tests.

Important! When you remove the last instance of a component, it is not removed from your project and will still appear in the "Components" and be available through "Insert an existing component".

Changing back the component to a regular group

You can always change your group back to being a regular one and not a component anymore, simply by clicking on the yellow label with "Component" text:

Important! This won't delete the created component, so you can still preview it on the "Components" page, and use it in your tests.

Edit components

You can edit a component in the context of a specific test. However, remember that this will affect other tests that use it.

Edit is located within the test, and there are two ways to get there - by navigating to the test via the "Tests" page, or by searching for the component in the "Components" page, and then through the list of tests that use it.

Here on its details page click on the "Edit component" button:

Next, click on the linked test from the list to enter the edit mode. On this screen, you will see a list of all the tests in which this component has been used, and you can choose one that best suits you when editing the component.

Editing a component won't be possible if it's not linked with any test. To enable editing link it first to any of your tests.

Preview steps that are within a component

When you are in the details of the component, you can see a preview of each step by clicking on it. This is done in the read-only view.

Additional actions on single component

Being on the list of all components or on a view of a single component you can perform additional actions by clicking on the more menu, such as:

  • Duplicate - This will duplicate the selected component by adding - duplicate prefix in its name. Also, please remember that by default the duplicated item won't be connected to any test.

  • Rename - This will let you change the name of the selected component, which will apply to all tests that use it. Furthermore, the name must be unique.

  • Show related tests - This will show you a preview of all related tests with that component. They can be previewed by clicking on any of them in the list (which will open in a new tab). If there are a lot of them, you may also find the search box useful.

    This is accessible in the details of the component:

Also from the "Actions" menu:

If a component isn't linked to any test, this field will be disabled:

  • Delete - This allows you to delete components you no longer need, to keep the list tidy. Please note that deleting a component will permanently delete all instances of that component and cannot be undone.

Yet to not do it accidentally we distinguish two scenarios.

  1. Deleting a component when it's not linked to any test. A confirmation modal will show up:

  1. Deleting a component when it's linked to a test you need to additionally confirm this action by typing the safe word on the confirmation modal:

Additional bulk actions on components

For now, you can select multiple components from the list on the Components page and perform bulk actions such as:

  • Delete - This will delete all selected components from the list

  • Deselect all - This will remove the selection

Tip: Use "" to quickly work with tests that use components.

Group test steps
new test from here
re-recording the steps
selector
test user registration
Components page
Components list
Insert a component to a new test
List of existing components when adding to a new test
Unlink a component from a test
Removing a component from a test
Component's details page
List of connected tests
Edit mode of a component used in a test
Show related tests
Show related tests
List of related tests with a component
No related tests with a component
Deleting a component without any connected test
Deleting a component with multiple connected tests
Delete in bulk