> ## Documentation Index
> Fetch the complete documentation index at: https://qodex.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# UI testing

> Qodex tests web apps in a real Chromium browser, then turns user goals into reusable UI scenarios.

# UI testing

Qodex tests web apps the way a user would: it opens your app in a real Chromium browser, explores pages, creates test scenarios from plain-English goals, and records the artifacts you need to understand every pass or failure.

You do not need to write Playwright selectors by hand to start. Describe the flow you care about, such as "test signup" or "make sure a user can update billing details," and Qodex drives the browser, records the intent of each step, and saves the scenario so it can run again later.

## How UI testing works

The UI testing flow has four parts:

* **Discover pages** by crawling your app and building a Pages catalog with screenshots across desktop, tablet, and mobile widths.
* **Create scenarios** from natural-language goals, with Qodex resolving each step against the live page.
* **Replay scenarios** using cached browser actions so repeat runs do not need an LLM call for every step.
* **Capture artifacts** such as screenshots, DOM snapshots, console logs, network logs, and optional video so failures are easy to debug.

## What you can start with

<CardGroup cols={2}>
  <Card title="Crawling and the Pages catalog" icon="map" href="/ui-testing-crawling">
    Let Qodex discover your app's pages and capture responsive screenshots for each one.
  </Card>

  <Card title="Intent-driven UI scenarios" icon="wand-sparkles" href="/ui-testing-intent-driven-scenarios">
    Create UI tests from user goals instead of brittle selector scripts.
  </Card>

  <Card title="Replay cache and self-healing" icon="recycle" href="/ui-testing-replay-cache">
    Re-run saved scenarios cheaply, with recovery when the UI changes.
  </Card>

  <Card title="Per-step artifacts" icon="camera" href="/ui-testing-artifacts">
    Review screenshots and failure evidence for every important browser step.
  </Card>
</CardGroup>

## Chrome recorder

The Qodex Chrome recorder turns a browser session into a draft UI scenario. Use it when you already know the flow and want to capture the real clicks, typing, navigation, and intent from your own browser.

Install the extension from the Chrome Web Store: [Qodex - AI QA & Security Engineer](https://chromewebstore.google.com/detail/qodex-ai-qa-security-engi/gnhoedmgmepgeibnjkganjadamgblemk).

The recorder can:

* Save the captured flow as a draft scenario.
* Generate a readable scenario name from the recorded steps.
* Reuse a UI auth profile or an existing login scenario when the flow should start signed in.
* Tokenize recorded origins against project environments so scenarios stay portable between staging, preview, and production-like targets.
* Send Playground requests to localhost from the browser when the hosted runner cannot reach a local service directly.

### Record a manual test

Use this flow when you want to manually perform a browser test once and save it as a reusable Qodex scenario:

1. Install the Chrome extension and sign in to Qodex.
2. Open the Qodex app, choose the project where the scenario should be saved, and connect the extension from the Chrome extension settings surface.
3. Open the web app you want to test in Chrome.
4. Start recording from the Qodex extension.
5. Perform the flow exactly as a user would: navigate, click, type, submit forms, and confirm the result you care about.
6. Stop the recording and save it to Qodex.
7. Review the draft scenario in Qodex, edit the name or steps if needed, then promote it when it is ready to run automatically.

For authenticated flows, start from the signed-in state you want to test, or attach a UI auth profile so replay can start with the right session.

## Why repeat runs stay cheaper

Most AI testing tools ask a model to inspect the page on every replay. Qodex uses the model when a UI step is first authored or when a cached action stops working. In the normal replay path, the saved Playwright action runs directly in Chromium.

That means nightly regression runs, scheduled checks, and CI runs scale mostly with browser execution cost. The LLM comes back only when the page has drifted enough that Qodex needs to re-resolve an intent.

## What you can do today

* Crawl your app and build a Pages catalog with screenshots at desktop, tablet, and mobile widths.
* Author scenarios from chat while Qodex drives a real browser end to end.
* Re-run scenarios with cached selectors so stable flows do not require an LLM call.
* Recover from UI drift when a cached selector no longer matches the page.
* Capture per-step screenshots, and capture DOM, console, and network logs when a step fails.
* Reuse logged-in browser state so authenticated tests do not repeat the login flow on every run.
* Record known flows from Chrome and save them as draft UI scenarios.

## Where to go next

<CardGroup cols={2}>
  <Card title="Crawling and the Pages catalog" icon="map" href="/ui-testing-crawling">
    See how Qodex discovers pages before it creates tests.
  </Card>

  <Card title="Intent-driven UI scenarios" icon="wand-sparkles" href="/ui-testing-intent-driven-scenarios">
    Learn how plain-English steps become browser actions.
  </Card>

  <Card title="Replay cache and self-healing" icon="recycle" href="/ui-testing-replay-cache">
    Understand how saved scenarios keep working as the UI changes.
  </Card>

  <Card title="Per-step artifacts" icon="camera" href="/ui-testing-artifacts">
    Learn what Qodex captures when a UI test runs.
  </Card>
</CardGroup>

## On the roadmap

<Tip>
  Visual regression diffing will compare step screenshots across runs and surface meaningful image changes. The deterministic UI replay runner will reduce recovery-time LLM usage further by re-deriving actions from captured trajectories.
</Tip>
