Debugging Using Trace Logs

This page explains how to use the Playwright Trace Viewer to analyze and debug tests using the debug trace logs obtained from Autify Nexus.

To use the Trace Viewer, you must first download a debug trace (.zip file) from an Autify Nexus test result page. This file can be obtained from test results after enabling the "Debug trace" setting.

What is the Playwright Trace Viewer?

Playwright Trace Viewer is a tool provided by Playwright that lets you inspect test runs step by step. Since Autify Nexus uses Playwright under the hood, you can use this viewer to analyze the debug trace logs generated by Autify Nexus.

The Trace Viewer provides a complete visual timeline, network logs, console messages, and DOM snapshots for each action, helping you identify the root cause of a failure.

How to open the Trace Viewer

There are two ways to open the trace file: directly in your web browser or by running a command on your local computer.

How to open in a browser

This is the easiest method.

Navigate to https://trace.playwright.dev/ in your web browser.
Drag and drop the debug trace .zip file onto the page, or select it using the file dialog.
The viewer will launch in your browser, and you can begin analyzing the trace.

The trace file contains all information displayed on the screen and any data entered during the test.
When using trace.playwright.dev, the file is processed only within your browser and is never uploaded to a server. However, if you are analyzing a trace that contains sensitive information, we recommend opening the trace file locally as described below.

How to open locally

This method uses a command-line interface (such as Terminal on macOS, or Command Prompt/PowerShell on Windows).

You must have Node.js (which includes npx) installed on your computer.

To launch the viewer locally, follow these steps:

Open your computer's terminal application.
Navigate to the directory where you saved the .zip debug trace file.
Run the following command, replacing [your-file-name].zip with the actual name of your trace file:
```
npx playwright show-trace [your-file-name].zip
```

Running the command above will download the necessary components (or use local ones) and open the Trace Viewer in a new browser window.

Understanding the Trace Viewer interface

The viewer is divided into several key sections.

The features and content described below may differ from the actual screen.

Snapshot (Center Panel)

This is the main visual component, and shows what the browser would have looked like during test execution.

Action: The default view, showing a snapshot of the page with the action's target element highlighted.
Before: A snapshot of the page before the action was executed. This is useful for checking if the element was present or in the correct state.
After: A snapshot of the page after the action was completed.
Pick Locator: An interactive tool that lets you click on the snapshot to see the Playwright locator for any element.
Open Snapshot: Click the button in the upper-right corner of the panel to open the snapshot in a new tab. In the new tab, you can use your browser's developer tools to inspect the DOM structure and state.

Actions Timeline (Left Panel)

This panel lists every action performed during the test, such as clicks, text input, and page navigations.

Failed actions are highlighted in red.
Click actions to see the corresponding snapshot for that step.
Double-click actions to highlight the corresponding section in the timeline. The Details panel (Console, Network, etc.) will also be filtered to show information related only to that action.

Timeline (Top Panel)

This panel shows the timeline for the entire test execution.

Click anywhere on the timeline to see the snapshot corresponding to that moment.
Select a range on the timeline to display the Actions Timeline for that range. The Details panel (Log, Network, etc.) below will also be filtered to show information related only to that range.

Details (Bottom Panel)

This panel displays detailed technical information about the selected action or timeline range.

Call: Shows the internal Playwright command that was executed.
Log: Shows the processes Playwright performed in the background during the action.
- For example, waiting for element to be visible, waiting for element to be enabled, waiting for element to be stable, etc.
Errors: Displays errors that occurred during the selected action.
Console: Displays browser console messages (console.log, errors, warnings).
Network: Displays network requests (XHR, Fetch). You can click a request to inspect its headers, request body, and response.

How to investigate a test failure

When a test fails, you can investigate the cause using the following steps.

Check the failed action and Snapshot

First, visually confirm what happened.

Select the failed action: In the Actions panel on the left, click the step highlighted in red.
Check the snapshot: In the center panel, examine the snapshot around the selected action to see if the operation occurred on the intended screen. Check if it's a different page than expected, an unexpected pop-up has appeared, or it's stuck on a loading screen.
Check the target element: The snapshot highlights the target element or click location. Verify that the action was correctly performed on the intended element.
Also, use the Pick Locator tab to confirm that the locator for the highlighted element matches what you expected in the test.

Drill down into the details

If you cannot identify the cause from the snapshot, you can look for it in the Details panel.

Investigate application errors:
- Open the Console tab and check if an application error occurred just before the failed action.
Check Playwright's internal operations:
- Open the Log tab to check if the element's status (interactability, visibility) prevented the action.
Investigate network issues:
- Open the Network tab to check if any API requests failed (status 4xx or 5xx) or if there was a response delay. You can click a request to investigate the specific response from the server.
Investigate the DOM structure:
- If the target element is not as expected, click the Open Snapshot button in the upper-right corner of the center panel.
- The snapshot will open in a new tab, allowing you to launch your browser's developer tools and investigate the DOM structure in detail.