Output

Introduction

What is the Output screen?

The Output screen (route /output) is Testver’s built-in file and artifact browser. After your tests run, frameworks like Playwright, Cypress, or your own scripts write files to disk — HTML reports, screenshots, videos, trace files, JSON results, console logs, and more. The Output screen lets you map those folders once and then browse everything inside them with a familiar file-explorer experience: folder tabs across the top, a Back / Forward / Up / Home navigation bar, breadcrumbs, search, sort, filter, grid and list views, and a side-by-side preview panel.

Think of it as Windows File Explorer or macOS Finder, but bolted directly onto your test results. You point it at the folders where your test output lands, and it shows you what is there — letting you click into a screenshot, scrub through a video, read a log, or pretty-print a JSON report without ever leaving the dashboard or hunting through deeply nested directories on disk.

Who this guide is for

This guide is written for the everyday user of the Testver dashboard — QA engineers, developers, and analysts who need to find and review the artifacts a test run produced. No coding is required to use this screen. You will benefit from this guide if you want to:

Open a Playwright or Cypress HTML report and inspect screenshots of failures.
Watch a recorded video of a failing test or scrub a trace.
Read a plain-text or JSON log without opening an external editor.
Quickly locate one specific file across many output folders using search.
Bundle several artifacts into a single ZIP to share with a teammate.
Register a new output folder so Testver knows where your results live.

Key terms (glossary)

A handful of terms appear throughout this screen and this guide. Skim them once and the rest will read easily.

Term	What it means
Artifact	Any file a test run leaves behind: a report, screenshot, video, trace, log, or data file. The Output screen exists to browse artifacts.
Mapped folder	A folder on disk that you have registered with Testver so it appears as a tab. Also called a folder mapping. Removing a mapping never deletes the underlying files.
Folder tab	One mapped folder shown as a tab along the top of the screen. Clicking a tab switches the browser to that folder.
Report	A human-readable results document, usually an HTML file (e.g. Playwright’s index.html) that summarizes a run. Reports open inline in the preview panel.
Screenshot	An image captured during a test (.png, .jpg, etc.), typically of a page state or a failure.
Video	A recording of a test session (.mp4, .webm), playable inline with standard controls.
Trace / Log	Diagnostic text output — a .log, .txt, or structured .json file describing what the test did. Shown in a read-only code viewer.
Framework	An optional label (e.g. Playwright, Cypress) attached to a folder mapping and shown as a small badge on its tab.
Current path	The sub-folder you have navigated into within the active mapped folder. The breadcrumb bar reflects it.
Preview panel	The pane that opens on the right when you select a file, rendering that file according to its type.

How it works

The Output screen reads files directly from disk through Testver’s backend — it does not copy or import them. When you click a folder tab, Testver lists everything inside that mapped folder as a tree. As you navigate, it shows the contents of the current sub-folder. When you select a file, the preview panel fetches just that file (image, video, or text) to display it.

Live on disk. What you see is the real folder contents at the moment of loading. There is no separate database of files to get out of sync.
Auto-refresh on new artifacts. Testver watches your mapped folders. When a new run writes files, the screen receives an output-file-change signal and quietly reloads the affected folder — new artifacts appear without you pressing Refresh.
Cached briefly for speed. Folder listings are cached for a few seconds so switching back and forth is instant; the manual Refresh button forces an immediate reload.
Read-only. You can open, preview, download, and ZIP files, but you cannot rename, move, or delete files from this screen.

Getting Started

Opening the screen and the first-run welcome

Open the Output screen from the main navigation, or go directly to the /output route. What you see depends on whether any folders are mapped yet.

If you have never mapped a folder, you are greeted by the first-run welcome screen — a centered card with the Output Browser heading and the message “Map your test output folders to browse reports, screenshots, videos, logs, and other artifacts right here.” It offers two buttons. To get started:

Click Auto-Detect to have Testver scan for common output folders (Playwright, Cypress, etc.). If it finds any, the Add Output Folder dialog opens with the discovered folders listed for you to pick from.
Or click Add Folder to open the same dialog and enter a folder by hand.
Fill in a Label and a Path (see section 5.3 for full details), then confirm. The folder becomes your first tab.
Once at least one folder is mapped, the welcome screen is replaced by the full file browser and never appears again unless you remove every mapping.

Screen layout

When at least one folder is mapped, the screen is organized into horizontal bands from top to bottom, with the preview panel appearing on the right when a file is selected.

Region	Location	What it contains
Folder tabs	Top bar	One tab per mapped folder, plus an Add button. The active tab shows edit / delete icons on hover.
Navigation bar	Below tabs	Back / Forward / Up / Home buttons, the breadcrumb trail, the search box, sort and filter dropdowns, the grid/list view toggle, and the Refresh button.
File browser	Main area, left/center	The contents of the current folder, shown as a grid of icons or a details list.
Status bar	Bottom of the browser	Item counts and total size on the left; multi-select count and the ZIP action on the right when files are selected.
Preview panel	Right side (when a file is selected)	A resizable pane that renders the selected file with its own header (Open / Download / Close).

At a glance

Switch folders by clicking a tab; the first tab is selected automatically on load.
Double-click (grid) or single-click a file to preview it; click a folder to open it.
Use the navigation bar’s Back / Forward / Up / Home to move around, exactly like a web browser plus a file explorer.
Type at least two characters in Search to find files across all mapped folders.
Click files while a selection is active to build a set, then export them as a ZIP from the status bar.
New artifacts from a fresh run show up automatically — no manual reload needed.

Browsing Files

Folder tabs

Every folder you have mapped appears as a tab along the very top of the screen. The active tab is highlighted in cyan; inactive tabs are dimmed and brighten on hover. If a folder has a framework assigned, a small colored badge (e.g. Playwright) appears next to its label. The row scrolls horizontally when you have more tabs than fit.

Click any tab to make it active — the browser jumps to that folder’s root and resets the breadcrumb, history, and any selection. At the end of the tab row is an Add button (a plus icon) that opens the Add Output Folder dialog.

Editing and deleting from a tab. Hover over the active tab and two small icons fade in to its right:

Icon	Action	Result
Pencil	Edit	Opens the Edit Folder Mapping dialog, pre-filled with this folder’s label and path so you can rename it or re-point it.
Trash	Delete	Opens a confirmation dialog to remove the mapping. The files on disk are never touched (see section 5.4).

Navigation bar and breadcrumbs

Just below the tabs sits the navigation bar. On its left are four navigation buttons that behave like a browser combined with a file manager. To their right is the breadcrumb trail showing exactly where you are inside the active folder.

Button	Icon	What it does	When disabled
Back	Left arrow	Returns to the previous location in your navigation history within this folder.	When there is no earlier location (you are at the start of history).
Forward	Right arrow	Re-advances after you have gone Back.	When you have not gone Back, or are at the newest location.
Up	Corner-up arrow	Moves to the parent sub-folder, one level shallower.	When you are already at the folder’s root (no current path).
Home	House	Jumps straight to the active folder’s root.	Never disabled.

Breadcrumbs. The wide bar in the middle shows your trail, starting with the mapped folder’s label (marked with the output-folder icon) followed by each sub-folder you have entered, separated by chevrons. Every segment is clickable — click any ancestor to jump back to that level instantly. The last segment (your current location) is highlighted in brighter text. The bar scrolls horizontally for deep paths.

The right half of the navigation bar holds the controls that shape what you see: search, sort, filter, view mode, and refresh.

Search

The Search box (with a magnifier icon) searches by file name across all mapped folders, not just the active one. Searching begins once you type at least two characters. Results replace the normal browser view with a grid of matching files, each showing its icon, name, and the label of the folder it lives in, plus a count like “12 results for …”. Click a result to jump to that file’s folder and open it in the preview. Clear the box with the small X (or by deleting the text) to return to normal browsing.

Sort

The Sort dropdown orders the current folder’s contents. Next to it, a direction toggle button switches between ascending (up-arrow icon) and descending (down-arrow icon). Sorting is applied by Testver as it lists the folder.

Sort option	Orders by
Name	Alphabetical file/folder name (the default).
Date	Last-modified time.
Size	File size.
Type	File extension / kind.

Filter by category

The Filter dropdown narrows the listing to a category of file types. It defaults to All (no filtering). Choosing a category shows only files whose extension falls in that group.

Filter choice	Shows files with extension
All	Everything (no filter).
Images	png, jpg, jpeg, gif, webp, svg
Videos	mp4, webm
HTML	html, htm
JSON	json
Logs	txt, log
PDF	pdf

View toggle

A two-button segmented control switches between Grid view (the layout-grid icon) and List view (the list icon). The active mode is highlighted. See 3.4 and 3.5 for what each looks like.

Refresh

The Refresh button (circular-arrows icon) forces an immediate reload of the current folder’s contents from disk. You normally do not need it — new artifacts appear automatically — but it is handy if you want to be certain you are seeing the latest state right now.

Grid view

Grid view (the default) lays out the folder’s contents as a dense grid of icon tiles that reflows to fit the available width. Each tile shows:

A large type-specific icon — a blue folder for sub-folders, or a colored file icon keyed to the extension (purple for images, pink for video, yellow for JSON, red for PDF, orange for HTML, blue for code, gray for text/logs).
The item’s name on up to two lines (long names are clamped, full name on hover).
On hover, a small footnote: the file’s size for files, or the number of items for folders. Interactions in grid view:

Single-click a folder tile to open it (navigate inside).
Single-click a file tile to focus it; it gains a cyan highlight ring.
Double-click a file tile to open it in the preview panel.
The currently previewed file is tinted in the brand color; the keyboard-focused tile is ringed in cyan.

List view

List view shows the same contents as a detailed, single-column table with a sticky header row. It is ideal when names, dates, and sizes matter more than thumbnails.

Column	Contents
Name	Type icon followed by the file or folder name.
Date Modified	The last-modified date and time, formatted as e.g. Jun 14, 2026, 03:42 PM.
Type	The file extension in upper case, or Folder for directories (a dash if unknown).
Size	Human-readable size (B / KB / MB / GB) for files; blank for folders.

Click a row to open a folder or focus/preview a file. As in grid view, the focused row is marked with a cyan left-border highlight and the previewed file is tinted in the brand color.

The file browser supports arrow-key navigation so you can sweep through artifacts without the mouse. Keys are ignored while you are typing in the search box, a dropdown, or any text field, so they never interfere with typing.

Key	Action
Arrow Right	Move focus to the next item.
Arrow Left	Move focus to the previous item.
Arrow Down	Move focus down one row (down a full row of columns in grid view; the next item in list view).
Arrow Up	Move focus up one row.
Enter	Open the focused item — enter the folder, or preview the file.
Backspace	Go up one level to the parent folder.

The Preview Panel

Selecting a file opens the preview panel on the right side of the screen, splitting the layout between the file browser and the rendered file. The panel renders each file according to its type, so a screenshot shows as an image, a video plays, and a log appears in a code viewer.

Resizing the panel

A thin vertical handle sits between the browser and the preview. Drag it left or right to change how much space the preview takes. The split is constrained to a sensible range (roughly 30%–70% of the width) so neither side ever collapses. The handle highlights in the brand color while you hover or drag.

Preview header buttons

The top of the preview panel shows the file’s icon, its name, and its size, with action buttons on the right:

Button	Appears for	What it does
Open	HTML files only	Opens the HTML file in a new browser tab so you can view a full report at full size.
Download	Every file	Downloads the file to your computer.
Close (X)	Every file	Closes the preview panel and returns the browser to full width.

How each file type previews

The panel chooses a renderer based on the file’s extension.

File type	Extensions	How it previews
Image	png, jpg, jpeg, gif, webp, svg, bmp	Shown as an image, scaled to fit the panel while preserving aspect ratio.
Video	mp4, webm, ogg	Played inline with standard playback controls (play, scrub, volume, fullscreen).
PDF	pdf	Embedded as a PDF viewer filling the panel.
HTML report	html, htm	Rendered in a sandboxed in-panel frame; use the Open button to view it full-size in a new tab.
Structured / text data	json, xml, txt, log, csv, md, yaml, yml, feature	Loaded into a read-only code viewer. JSON is automatically pretty-printed (re-indented); invalid JSON is shown as-is.
Source code	js, ts, jsx, tsx, py, java, rb, go, css	Shown in the same read-only code viewer with syntax highlighting for the language.
Anything else	all other extensions	No inline preview. The panel shows a “Preview not available for .ext files” message with a Download File button.

The read-only code/log viewer

Logs, JSON, XML, CSV, Markdown, YAML, and source files open in an embedded code editor configured for reading, not editing. It provides:

Line numbers, syntax highlighting matched to the file type, and word wrap so long lines stay visible.
Code folding, bracket-pair highlighting, and indentation guides.
Automatic pretty-printing of JSON (valid JSON is re-indented for readability).
A theme that matches your dashboard’s light/dark setting.

Status Bar, ZIP & Folder Mappings

The status bar

A slim status bar runs along the bottom of the file browser. On the left it summarizes the current folder — the number of sub-folders and files it contains, followed by the mapped folder’s total size (e.g. “3 folders, 18 files — 42.6 MB”). On the right, when you have files selected, it shows the selection count alongside the ZIP and clear-selection actions.

Multi-select and ZIP export

When one or more files are part of a selection, the status bar’s right side shows “N selected” together with a ZIP button (archive icon) and an X to clear the selection. Click ZIP to have Testver bundle the selected files from the active folder into a single downloadable archive — ideal for handing a set of artifacts to a teammate or attaching to a bug report. The X clears the selection without downloading anything.

Adding an output folder

Open the Add Output Folder dialog from the Add button on the tab row (or from the first-run welcome screen). The dialog lets you discover folders automatically or enter one manually.

Click Auto-Detect Output Folders to scan for known output locations. Discovered folders are listed below the button, each with its label, path, an optional framework badge, and an exists / not found status (green when present on disk).
Click any detected entry to fill the form with its label and path — or skip detection and type your own.
Enter a Label — a friendly name for the tab (e.g. “Playwright Reports”).
Enter a Path — the folder location. Relative paths (e.g. playwright-report) are resolved inside your project.
Tick Absolute path (outside project directory) if the folder lives somewhere outside the project and you supplied a full system path.
Click Add Folder to save. The button stays disabled until both Label and Path are filled. The new folder appears as a tab.

Editing and deleting mappings

Editing. Hover the active tab and click the pencil to open the Edit Folder Mapping dialog. It is the same dialog as adding, pre-filled with the current label and path; Auto-Detect is hidden in edit mode. Change the Label or Path and click Save Changes.

Deleting. Click the trash icon on the active tab to open the Delete Folder Mapping confirmation. It restates the folder’s label and path and asks you to confirm. Click Delete to remove the mapping (the tab disappears) or Cancel to back out. If you delete the folder you were viewing, the browser returns to no active folder.

Loading, missing, and empty states

The browser communicates its state clearly so you are never left guessing.

State	What you see	What it means / what to do
No folders mapped	The centered Output Browser welcome card with Add Folder and Auto-Detect.	You have not registered any output folders yet — add one to begin.
Loading	A centered spinner.	Testver is reading the folder’s contents from disk; it resolves on its own.
Folder missing	An amber warning icon with “Folder does not exist on disk” and the path beneath it.	The mapped path is gone or moved. Edit the mapping to fix the path, or delete it.
Empty folder	A folder icon with “This folder is empty”.	The location is valid but contains nothing here yet — e.g. before any run has written artifacts.
No search results	A “0 results” header in the search grid.	No file names matched your query across mapped folders — refine the term.

Common Tasks (How Do I…?)

I want to…	Do this
Open a test report	Click the folder tab, find the report (e.g. index.html), click it; for full size click Open in the preview header.
See a failure screenshot	Navigate to the screenshots folder and click the image — it renders in the preview panel.
Watch a test video	Click an .mp4 or .webm file; play it with the inline video controls.
Read a log file	Click a .log or .txt file to open it in the read-only code viewer.
Pretty-print a JSON result	Click the .json file — it is auto-formatted in the viewer.
Find one specific file fast	Type at least two characters in the Search box; click a result to jump to it.
Show only images (or videos, logs…)	Pick the matching category from the Filter dropdown.
Sort newest first	Set Sort to Date and toggle the direction to descending.
Go back to a parent folder	Click an ancestor in the breadcrumbs, or use Up, Back, or press Backspace.
Download a single file	Open it in the preview and click Download.
Send several files to a teammate	Select the files, then click ZIP in the status bar to download an archive.
Register a new output folder	Click Add on the tab row, use Auto-Detect or enter a Label + Path, then Add Folder.
Rename or re-point a folder	Hover the active tab, click the pencil, edit, then Save Changes.
Stop showing a folder	Hover the active tab, click the trash, then Delete (files on disk are kept).
Make the preview bigger	Drag the vertical handle between the browser and the preview to the left.

Tips & Best Practices

Let Auto-Detect do the setup. It recognizes common framework output folders, so you rarely need to type paths by hand.
Use clear labels. A tab named “Playwright Reports” is far easier to scan than a raw path. Assign frameworks so the badges help you tell folders apart.
Search reaches everywhere. Because search spans all mapped folders, it is the quickest way to find a file when you are not sure which folder it landed in.
Combine filter + sort. Filter to Images then sort by Date descending to review the latest screenshots first.
Trust auto-refresh. New artifacts appear on their own after a run — reach for the Refresh button only when you want to be doubly sure.
Fly with the keyboard. Arrow through a folder of screenshots and let the preview follow your focus; press Backspace to pop up a level.
ZIP before you share. Bundling a handful of artifacts into one archive is tidier than sending files one at a time.
Deleting a mapping is safe. Removing a tab never touches your files — re-add the folder anytime.

Troubleshooting & FAQ

My folder tab says “Folder does not exist on disk.”

The mapped path has moved, been renamed, or been deleted. Hover the active tab, click the pencil, and correct the Path — or delete the mapping if the folder is gone for good. The path shown under the warning tells you where Testver looked.

A folder shows “This folder is empty” but I expected files.

The location is valid but currently has nothing in it. The most common cause is that no run has written artifacts there yet. Run your tests, then watch for the files to appear automatically, or press Refresh.

New artifacts from my latest run aren’t showing.

They normally appear on their own thanks to auto-refresh. If they don’t, click the Refresh button (circular arrows) to force a reload. Confirm you are on the correct folder tab — a run may have written to a different mapped folder than the one you are viewing.

Search isn’t returning anything.

Search needs at least two characters before it runs, and it matches file names. Check your spelling and try a shorter or partial term. Remember it searches across all mapped folders, so a misspelled name simply won’t match.

A file shows “Preview not available.”

The file’s type is not one the panel can render inline (it isn’t an image, video, PDF, HTML, or a recognized text/code format). Use the Download File button to open it in an appropriate application on your computer.

My HTML report looks cramped in the panel.

Full reports are best viewed at full size. Click Open in the preview header to open the HTML in a new browser tab, or drag the resize handle left to give the panel more room.

If I delete a folder mapping, do I lose my files?

No. Deleting a mapping only removes the folder from the Output screen. Your files stay exactly where they are on disk — the confirmation dialog says so explicitly. You can re-map the folder at any time to browse it again.

Can I edit a file from here?

No. The Output screen is a read-only browser. The code/log viewer lets you read and copy content but not change it. Edit files at their source on disk.

What’s the difference between this and a live test console?

The Output screen browses files that were saved to disk after (or during) a run — it is an artifact viewer. It is not a live, streaming console of a test in progress. For watching a run as it happens, use Testver’s live run views; come here afterward to inspect the reports, screenshots, videos, and logs it produced.

Results — run-scoped artifact view.
Runner — produces these artifacts.
Project Explorer — the source-side file browser.