Tests

How to Use the Test Builder

The side panel builder lets you add questions, configure when each one fires (via triggers like button clicks, page navigations, or scroll depth), and preview the participant's view live as you go.

You can also do this with AI. Try it with Testflow MCP

How to open the builder

Go to your project and find your test
Click "Open Builder" or "Edit"
Choose how to launch:
• Launch in New Tab (recommended): Opens your live app with the ProdExam side panel injected via the SDK
• Inline Preview: Renders your app in an iframe with the builder side panel — limited features (some apps block iframe embedding)

Builder Components

Breakpoints

Define when your test should appear (e.g., after clicking a button, visiting a page).

Questions

Add questions that fire on participant actions you define. Supports rating (1–5), NPS, free text, multiple choice, multi-select, yes/no, and pause steps.

Comment Zones

Let users pin comments anywhere on the screen with automatic screenshots.

Conditions

Configure when and how questions appear based on user behavior.

How to add a breakpoint

In the builder, a breakpoint bundles a trigger + a question + an optional delay. To add one:

Navigate to the page or state in your app where you want the question to fire.
In the side panel, click Add Breakpoint.
Pick the trigger type (see below), enter the question, set a delay if needed, and Save.

Available trigger types:

• URL match: Fires when the participant's URL matches a path you specify (e.g., /checkout).

• Button click: Fires when the participant clicks an element matching a CSS selector (e.g., button[type="submit"]).

• Scroll depth: Fires when the participant scrolls past a percentage of the page.

• Time on page: Fires after the participant spends N seconds on a page.

• Custom event: Fires when your app emits a named event (advanced).

• Manual: Won't fire automatically; use window.ProdExam.runner.triggerStep(stepId) from your code.

The participant's side panel always opens on page load with a Welcome screen — breakpoints don't control whether the panel appears, they control which question fires next.

Building your test flow

Open your app in the builder

Click Launch in New Tab from the project page. Your live app loads with the ProdExam side panel injected — your jumping-off point for adding questions.

Add questions and configure each trigger

For each question, write the prompt and pick what makes it fire — usually a URL match or a button click. Reorder by drag, set per-question delays.

Pinned comments

Always on. Participants click the Comments tab to attach a note to any element on the page — useful for visual usability findings.

Preview your test

Test the flow yourself before publishing.

Publish

Make your test live. Every visitor to your app then sees the ProdExam side panel and can run through the session.

Changes are saved automatically as you build. Your test remains in draft until you publish.

Do it with Testflow MCP

MCP

You can also configure tests using ProdExam's MCP integration with AI assistants like Claude, ChatGPT, or Cursor.

Example prompt:

"Add a rating question asking 'How easy was checkout?' to my Checkout Flow test"

How to add questions

How to add comment zones

How to publish a test