Getting started with browser tests

After setting up your applications and environments in mabl, you can get started with testing your app! This tutorial walks through the basics of browser tests in mabl, from creating a test in the mabl Trainer to adding flows to achieve coverage at scale.

Creating a new browser test

To create a new browser test, click New test and choose Browser test. The browser test creation form includes many options for configuring your test, including descriptions, labels, plans, and credentials.

For your first few browser tests, it is sufficient to give the test a name, select No plan, and associate it with your application.

👍

Naming conventions and labels

With your team, discuss what naming conventions and labels you can use distinguish practice tests from other tests in your workspace. Consider the examples below:

• Naming conventions: "Walkthrough browser test - Your name"
• Labels: "tutorial", "walkthrough", or "practice are good labels for distinguishing your practice tests.

Click Create test to launch the mabl Trainer and start testing! The mabl Trainer loads two windows:

1. A Chrome browser window opened to your application
2. The Trainer window, where you can see the recorded steps and add new steps

Test core functionality

Start interacting with your application. Not sure what to test? Try creating a test that follows a common user journey to validate core functionality in your app, such as:

• Login
• Adding items to a shopping cart
• Updating account settings
• Basic smoke test - verify that the most crucial functionality in the app works as expected

As you record steps, don't forget to add assertions to validate that your application is behaving as expected.

👍

Best practices for assertions

For more information on assertions, check out our guide on Best practices for assertions.

To see your steps in action, click on the Play button to see your test in action.

When you're finished, don't forget to save your test!

Adding flows

If your test includes a common sequence of steps, you can convert those steps into a flow that can be reused in other tests. Login sequences are a great example. You can create a login flow by taking the following steps:

1. In the mabl Trainer, select all of the steps associated with logging in.
2. Click on the bulk action option to create a new flow
3. Give the flow a name
4. Click OK

👍

Training logins

For more information and advice on training logins for your app, see our guide on logging into your app.

Managing flows

When you save the test, mabl saves the flow too. Visit Test > Flows in the app to view details about the flow, including which tests use the flow, whether the flow has parameters, and the steps of the flow.

Importing flows

When you want to reuse that series of steps again, you can import the flow into other tests! To import a flow into another test, open the mabl Trainer and take the following steps:

1. Click the plus sign to add a step
2. Select the "Flows" tab
3. Type in the flow name
4. Select the flow
5. Click on the Import flow button

When you update a flow in one test, the flow updates in every other test in which it is used.

👍

Compare versions

Tests and flows are versioned. For more information on comparing versions of tests and flows, click here.

Next steps

• Check out self-guided lessons at mabl U!
• Learn more about the mabl Trainer
• Learn about best practices for creating browser tests
• Extend your testing beyond browser testing:
  • Getting started with API tests
  • Getting started with data-driven testing
  • Getting started with accessibility testing