Browser test output

Step timeline

The step line shows the relative time it took for each test step to complete, and it can be a helpful tool for investigating test steps that took a long time to execute. For more details on optimizing test run time, click here.

Hovering over a step in the step timeline

Screenshots

Screenshots show the state of the UI before mabl executed a given step.

Tests that run in a plan compare screenshots to screenshots from previous runs. See visual change detection for browser tests for more details.

Comparing the current screenshot to a baseline

Logs

Logs provide more granular detail on the activity during each step and are helpful for troubleshooting failed tests:

• mabl activity
• Network
• DOM
• Performance
• Variables
• Console logs
• Accessibility

mabl activity

The mabl Activity tab logs mabl's interactions with the application. If the step targets a specific element, the mabl Activity logs include the element history.

Reviewing mabl activity in the logs

Network

The Network tab shows what network calls were made while executing the current step. This data is useful when trying to debug network errors that occur during test runs.

DOM

DOM stands for Document Object Model, and it is the programming interface for HTML. The contents of the DOM tab represent the webpage as a node tree and help identify what elements existed on the page during the step execution.

Performance

The Performance tab measures how users are to perceive the performance or the load speed of your application UI. See the guide on speed index for more details.

Variables

If the step used variables, the Variables tab shows which were used in the step and their values.

Console logs

For Chrome runs, the Console logs tab displays messages from the following log statements:

• console.log()
• console.warn()
• console.info()
• console.error()

Accessibility

Detailed output from accessibility checks appears in the Accessibility tab.

Downloadable artifacts

The ACTIONS menu for each step contains additional step-level run artifacts that you can download:

• Screenshot
• Step trace - Chrome and Edge only
• DOM snapshot
• HTTP archive (HAR) file
• Console logs - Chrome only
• Accessibility check results

Opening up the ACTIONS menu

Step trace

Step trace is a JSON file that captures a timeline of the step as mabl records it. You can use step trace during debugging to determine what happened during a particular step.

After downloading the step trace for a step, you can take the following actions to review it:

1. Open Chrome DevTools: right click > Inspect.
2. Click on the Performance tab in Chrome DevTools.
3. Drag and drop the downloaded step trace JSON file.
4. Hover your mouse over the timeline to review the step timeline.

Reviewing step trace in Chrome DevTools

HTTP archive (HAR)

The HTTP archive or HAR file consists of an ordered list of HTTP requests made by the application under test during the current step. Each entry contains a request, a response, an IP address, a timestamp, and a set of timing information for various components of the request.