Working with snippets

This guide provides an overview of the different ways you can create, import and use snippets in browser tests.

📘

API scripts

JavaScript snippets are only used in browser tests. If you are looking for information on using JavaScript in API tests, click here.

Creating snippets

You can create snippets in two different areas of the application:

• In the mabl Trainer
• On the Snippets page

In the mabl Trainer

To create a new JavaScript snippet step in the Trainer, take the following actions:

1. Click on the plus icon to add a step.
2. Select JavaScript. The Configure snippet menu will appear in the Trainer window.
3. Click on the New button.
4. Write your snippet in the Snippet Editor. You may wish to run the snippet to check that it works as expected.
5. Click Save. You will have the option to save your snippet as a one-time or reusable snippet.
6. Click OK. The snippet will be added as a test step and run in the Trainer.

📘

One-time vs. reusable snippets

One-time snippets are used once in the test and cannot be imported to other tests. Reusable snippets can be used more than once in a test and can be imported into other tests.

It is also possible to create new snippets for variable steps and conditional steps.

The Snippets page

In addition to creating snippets in the mabl Trainer, you may also create snippets outside the Trainer on the Snippets page:

1. Click on Tests from the left-hand navigation.
2. Select the Snippets tab.
3. Click on the + New snippet button.
4. Write your snippet in the Snippet Editor.
5. Click Save.

📘

Note

Keep in mind the following when creating or editing a snippet from the Snippets page:

• Snippets cannot be run outside the mabl Trainer. (The Run button is absent from the Snippet Editor in this mode.)
• Snippets created from the Snippets page are always saved as reusable snippets.

Importing snippets

Using an existing snippet in the Trainer

You can import an existing snippet in your test by taking the following steps:

1. Click on the plus icon to add a step.
2. Select JavaScript. The Configure snippet menu will appear in the Trainer window.
3. Click on the snippet dropdown and select the snippet you wish to use.
4. If there are parameters, update as needed.
5. If you want to ensure the snippet works as expected, click Run.
6. Click OK. The snippet will be added to the test and run in the Trainer.

Creating a new snippet from an existing snippet

If you would like to modify a snippet and keep the original, you can take the following steps:

1. Click on the plus icon to add a step.
2. Select JavaScript. The Configure snippet menu will appear in the Trainer window.
3. Click on the snippet dropdown and select the snippet you would like to modify.
4. Update the snippet in the Snippet Editor.
5. Click on the down arrow next to the Save button and select "Save as new reusable snippet." This creates a new snippet from the existing snippet.

Using snippets

You can use snippets in three different ways in a browser test:

• As a standalone step (also called a JS step)
• To define a variable value
• To evaluate a conditional (IF steps, ELSE IF steps)

Creating a JS step

1. Click on the plus icon to add a step.
2. Select JavaScript. The Configure snippet menu will appear in the Trainer window.
3. Create a new snippet or use an existing snippet.
4. Click OK. The snippet will be added as a test step and run in the Trainer.

Using JavaScript to define a variable

You can create a variable from the output of a JS snippet by taking the following steps:

1. Click on the {x} icon in the bottom of the Trainer window.
2. Click on Create a new variable.
3. Select JavaScript as the source.
4. You can create a new snippet or use an existing snippet.
5. If you want to ensure the snippet works as expected, click Run.
6. Give the variable a name.
7. Click OK. A new variable step will appear in the Trainer window.

Using JavaScript for a conditional step

When a snippet is used in the context of a conditional, the result of the snippet will be evaluated for truthiness to determine whether the condition is met.

• If the result of the snippet is a truthy value, the steps inside the conditional block will run.
• If the result of the snippet is a falsy value, the steps inside the conditional will be skipped.

📘

Truthy and falsy values

For more information, check on the MDN glossary for truthy and falsy values.

Follow these steps to use JavaScript for a conditional step:

1. Click on the plus icon to add a step.
2. Click on Conditionals.
3. Select the conditional statement you'd like to add.
4. Choose JavaScript.
5. Create a new snippet or use an existing snippet.
6. If you want to ensure the snippet works as expected, click Run.
7. Click OK. A new conditional step will appear in the Trainer window.

After recording that step, add the steps that should occur if the conditions of the JavaScript step evaluate to true.