Visual test setup

Creating a visual test

To create a new visual test, click on the home icon in the top-right corner. Then follow these steps:

1. Click on the New button.
2. Select Visual test from the dropdown to load the visual test creation form.

3. Give your test a name in the Test name field.
4. Defining the application URL is required. There are three ways to do this:
   • Add to plan: When you add the test to an existing plan, the test uses the application, environment, and application URL associated with the plan.
   • Associate with an application: When you associate the test with an application, the test uses the associated application URL. For applications with multiple environments or application URLs, you must further specify which environment or application URL you want to use for training.
   • Start with a new URL: To test a URL that isn't associated with any application or plan in your workspace, check the box "Enter a starting URL to use to train your test" and enter the URL.
5. Enter up to 50 page URLs in the Top pages field.
6. If the URLs listed in the Top pages field require a logged-in status, add an auto-login flow:
   • Expand Optional configurations
   • Select credentials if the test isn't associated with a plan.
   • Check "Use auto-login flow".
7. Click on the Create test button.

After creating the test, the app loads the test details page with a list of pages to visit and a mabl-generated flow called "Visual Smoke Test."

Test Details page for a visual test

Using variables in URLs

When composing the list of pages to visit, you can use the following variables:

• {{@web.defaults.url}}: This variable is automatically assigned the application URL from the plan.
• Environment variables

For example, if you are running a visual test in staging and production environments, you can write the URL as follows: {{@web.defaults.url}}/product.

• In the staging environment, the URL becomes https://staging.mabl.com/product.
• In the production environment, the URL becomes https://mabl.com/product.

Editing visual tests

The following properties can be edited in visual tests:

List of URLs

Click on the pencil icon next to "Pages to visit."

Test metadata

Click on the pencil icon in the top-left corner to update test name, description, and labels.