How to Create a Visual Editor Test

Learn how to create, edit, and preview a test without writing any code.

Overview

Creating a Rainforest test with the Visual EditorVisual Editor - A tool that allows you to write tests using precise browser interactions with a live preview. Tests created with the Visual Editor (VE) run using either the Automation Service or Tester Community. is easy and doesn’t require any coding. A Visual Editor (VE) test is composed of steps. Each step has an action such as Click and Navigate. These steps tell the application how to interact with the page. For a complete list of actions and how they work, see the Visual Editor Test Actions Glossary.

This video provides a short overview on how to write and update a Visual Editor test.

Creating a Test

  1. Navigate to the All Tests page (paper icon) and click Tests.
  2. Click the Create Test button in the upper right-hand corner.
    The Create Test modal displays. By default, it is set to the Use an Existing Site tab.
  3. Select a site from the Site Name dropdown.
    Note that you can include additional path information in the base URL. If your site doesn’t appear in the dropdown, select the Add a New Site tab and key in the new URL.
  4. Select “Quickly capture UI elements with screenshots” from *How do you want to compose this test?
    Note: “Native mobile app” is not supported for the quick capture option.
  5. Click the Create Test button.
The Create Test modal.The Create Test modal.

The Create Test modal.

Editing Your Test

  1. The Virtual Machine (VM) loads and navigates to the starting URL.
    It loads the default platform and the URL selected in the Create Test modal. Update the URL by selecting it in the first step and changing the site.
    Note: You can add a Navigate step with a new URL as needed.
  2. Name the test.
    Click Untitled Test in the upper left-hand corner of the screen and update the test name. Click Save changes anytime.
  3. Add your test steps.
    Click “Select action or embed a test.” For a list of actions and how to embed tests, see the Visual Editor Test Actions Glossary.
  4. Continue adding steps until the test is complete.
Editing a test.Editing a test.

Editing a test.

Capturing and Naming the Element

Each step is composed of an action and an element. The element is the item the action interacts with, such as clicking a button. These elements can be anything but are commonly buttons, input fields, text, labels, and images.

  1. Click the element in the test step.
  2. Select an area within the VM to capture by clicking and dragging.
  3. Recapture the element if needed by clicking Recapture Element and trying again.
  4. Provide an element name to easily identify what was captured.

See our Text Matching article for information on how to increase the stability of element matching.

Naming an element.Naming an element.

Naming an element.

Adding a Value

Some actions require a value, such as a URL or other text. For a complete list of these actions, see the Visual Editor Test Actions Glossary.

  1. Select the field and provide the information.
  2. Use test data by selecting “Insert Test Data” from the dropdown. For more information, see Using Test Data.
  3. To change a value, reselect the field and update.

Note: You can use dynamic and static data together. For example, if you require a random first name and static last name, enter it as {{random.first_name}} Jones.

Adding test data to the step.Adding test data to the step.

Adding test data to the step.

Adding, Deleting, and Moving a Step

Adding Steps

To insert a step:

  1. Click the plus sign (+) between the actions.
  2. Choose between “Select Action” or “Embed a Test” and add a step.

To add a step at the end:

  1. Choose between “Select Action” or “Embed a Test” and add a step.
  2. Enter the information for the new action.

Deleting a Step

  1. Select the step to delete by clicking the step number.
  2. Click Delete at top of the Actions list.

Moving Steps

  1. Click the equal sign (=) to the right of the step.
  2. Drag the step up or down to the desired location.
    Note: You cannot move steps above the “Start at” step.

🚧

Save Your Work Often

Saving is not automatic. If you close the window or navigate to a different page, anything that wasn’t saved is lost. If this happens, reload the page to display the most recently saved version.

Preview Actions

Preview Actions plays back the test steps in real-time in the VM on the page’s right-hand side. You can preview the entire test or individual steps.

  • If everything behaves as expected, continue adding more actions and previewing them to validate. If not, update the steps as needed.
  • If no actions are selected, Preview Actions plays back the entire test.
  • To play a few actions, click the number to the left of the step and select “Preview Actions.”
Use Preview Actions to validate test steps.Use Preview Actions to validate test steps.

Use Preview Actions to validate test steps.

Using Draft Mode to Validate the Test

After writing your test, the next step is to validate it. Set the test to Draft; the results are stored separately from the production runs. Note that, although the test doesn’t run, the entire team can see its progress.

  1. Click the Settings icon (gear) in the navigation bar to open the test settings.
  2. Toggle “Set this test to draft” to On and close Settings.
  3. Click Run Draft in the upper right-hand corner of the screen.
  4. Set How this run will be executed to “Automation Service,” or set it to “Change” to run your test using the Tester Community.
  5. Ensure Platform matches the platform you used to create the test.
  6. Click Start Draft Run.
  7. Review the results on the Draft Runs tab on the Results page.

For more information on how the Test Writing Interface works, and how to run and review test results, see the following articles:


If you have any questions, reach out to us at [email protected] or via the chat bubble below.

Updated 27 days ago



How to Create a Visual Editor Test


Learn how to create, edit, and preview a test without writing any code.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.