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.

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.

👍

Pro Tip

Preview a Test in a Different Environment
The Preview feature runs your test using the default environment. Sometimes, however, you might want to use a different environment. For example, your test is written for Staging, but you want to preview it using Production. Here’s how to do it:

  1. In a new browser tab, go to Settings > Sites.
  2. Hover over the Environment you want to test and copy the Environment ID code.
  3. Return to your test.
  4. Append ?envId=nnnnn (where nnnnn is the Environment ID) to the page URL.
    Note: envId is case sensitive.

Example:
https://app.rainforestqa.com/tests/279538 is updated to
https://app.rainforestqa.com/tests/279538?envId=22312

The Start at URL updates to the URL of the environment you specified.

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.
  5. Confirm Allow Text Matching if available.
    Note: Text matching increases test stability by additionally doing a text match for the element. See Text Matching for more information on how this works and how you can improve element matching results.
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.
  • To play actions, select the checkboxes to the left of the step and click the Preview Actions button.
  • If there are problems matching an element while previewing, a warning is shown in the upper right-hand corner of the screen. You should update the test to increase the stability of the step to ensure passing. If Preview can’t match an element, an error message is shown to help resolve the issue.
  • A 2-second delay is automatically added between actions to increase test stability. See the Visual Editor Test Settings Glossary to change this setting.
Using Preview Actions to validate test steps.Using Preview Actions to validate test steps.

Using 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.


Did this page help you?