# Interactive Demo

Every screenshot below was captured automatically by the ContextQA AI agent during a live execution. Three scenarios — step through each one to see exactly what the agent does.

{% tabs %}
{% tab title="🔐 Login Flow" %}
{% stepper %}
{% step %}

#### Navigate to Login Page

AI agent opens `accounts.contextqa.com/onboard`. The login page loads with **Company Email** and **Password** fields visible.

![ContextQA login page showing Sign In form with Company Email and Password fields, Login button, and robot mascot](https://4255556216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKlyaXxb76z3Dn47TrZkU%2Fuploads%2Fgit-blob-42aaa33083cad405d9c7592b91706a2b605e087b%2Fcreate-tc-step-01-login-page.jpg?alt=media)

{% hint style="info" %}
**AI Agent:** `VERIFY` — URL is `accounts.contextqa.com/onboard` · Company Email and Password fields are visible
{% endhint %}
{% endstep %}

{% step %}

#### Enter Credentials

AI locates the **Company Email** field and types the email address, then finds the **Password** field and enters the password.

{% hint style="info" %}
**AI Agent:** `TYPE` <aryan+103@contextqa.com> → Company Email field

**AI Agent:** `TYPE` credentials → Password field
{% endhint %}
{% endstep %}

{% step %}

#### Click Login & Authenticate

AI clicks the **Login** button. Authentication succeeds, browser redirects to the dashboard.

![ContextQA dashboard after login showing test case metrics, Daily Activity Trends chart, and left sidebar navigation](https://4255556216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKlyaXxb76z3Dn47TrZkU%2Fuploads%2Fgit-blob-4cad5853153a687dc5f662001fcee5ddd3147bf1%2Flogin-flow-step-02-dashboard.jpg?alt=media)

{% hint style="info" %}
**AI Agent:** `CLICK` Login button — form submitted

**AI Agent:** `REDIRECT` Browser → `cqaacademy.contextqa.com/dashboard/overview`
{% endhint %}
{% endstep %}

{% step %}

#### Verify Dashboard Loaded ✓

Dashboard confirmed: left navigation visible, **Total Test Cases**, **Daily Activity Trends**, and project overview all displayed. Execution complete.

![ContextQA dashboard confirming successful authentication with Total Test Cases counter and activity trend panels](https://4255556216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKlyaXxb76z3Dn47TrZkU%2Fuploads%2Fgit-blob-4cad5853153a687dc5f662001fcee5ddd3147bf1%2Flogin-flow-step-02-dashboard.jpg?alt=media)

{% hint style="success" %}
**AI Agent:** `VERIFY` — ContextQA dashboard is open. Left navigation, Total Test Cases, Daily Activity Trends visible.

**AI Agent:** `DONE` — All 5 steps complete — login verified, dashboard confirmed.
{% endhint %}

| Artifact         | Detail                                      |
| ---------------- | ------------------------------------------- |
| 🎬 Session Video | `c19e2297-a24e-4565-b294-20ca9479b6af.webm` |
| 📸 Screenshots   | 2 per-step screenshots captured             |
| ⏱ Duration       | \~18 seconds                                |
| ✅ Result         | PASSED                                      |
| {% endstep %}    |                                             |
| {% endstepper %} |                                             |
| {% endtab %}     |                                             |

{% tab title="➕ Create Test Case" %}
{% stepper %}
{% step %}

#### Login to Dashboard

AI authenticates and lands on the project dashboard — ready to create a new test case.

![ContextQA login page with Company Email and Password fields during AI agent authentication](https://4255556216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKlyaXxb76z3Dn47TrZkU%2Fuploads%2Fgit-blob-42aaa33083cad405d9c7592b91706a2b605e087b%2Fcreate-tc-step-01-login-page.jpg?alt=media)

{% hint style="info" %}
**AI Agent:** `TYPE` credentials → email + password fields

**AI Agent:** `CLICK` Login button → authenticated, dashboard loaded
{% endhint %}
{% endstep %}

{% step %}

#### Click the + Icon

The **+** icon in the top navigation bar is clicked to reveal the test creation options menu.

{% hint style="info" %}
**AI Agent:** `CLICK` + icon in navigation bar → creation menu opened
{% endhint %}
{% endstep %}

{% step %}

#### Select "Start Recording"

**Start Recording** is chosen from the dropdown to enter the test case creation flow.

{% hint style="info" %}
**AI Agent:** `CLICK` 'Start Recording' → recording options dialog appeared
{% endhint %}
{% endstep %}

{% step %}

#### Name the Test Case

**Manually Create Test Case** selected. Name field filled with `ContextQA Documentation Test`. Create button clicked.

![Test case editor showing newly created ContextQA Documentation Test with Test Steps tab and Configuration panel](https://4255556216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKlyaXxb76z3Dn47TrZkU%2Fuploads%2Fgit-blob-5c7909531159b1ac7e2948f5b0eb8b01eca854f6%2Fcreate-tc-step-02-test-created.jpg?alt=media)

{% hint style="info" %}
**AI Agent:** `CLICK` 'Manually Create Test Case'

**AI Agent:** `TYPE` 'ContextQA Documentation Test' → Name field

**AI Agent:** `CLICK` Create button → test case created
{% endhint %}
{% endstep %}

{% step %}

#### Test Case Created ✓

`ContextQA Documentation Test` appears in the test cases list. Ready to add steps, record, or execute.

![ContextQA Documentation Test visible in the test case editor with Ready status confirming successful creation](https://4255556216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKlyaXxb76z3Dn47TrZkU%2Fuploads%2Fgit-blob-5c7909531159b1ac7e2948f5b0eb8b01eca854f6%2Fcreate-tc-step-02-test-created.jpg?alt=media)

{% hint style="success" %}
**AI Agent:** `VERIFY` — Test case 'ContextQA Documentation Test' is visible in the test cases list

**AI Agent:** `DONE` — 8 steps completed successfully
{% endhint %}

| Artifact         | Detail                                      |
| ---------------- | ------------------------------------------- |
| 🎬 Session Video | `8f57f44c-8b63-4c00-9cf6-036193e260e9.webm` |
| 📸 Screenshots   | Per-step screenshots captured               |
| ✅ Result         | PASSED                                      |
| {% endstep %}    |                                             |
| {% endstepper %} |                                             |
| {% endtab %}     |                                             |

{% tab title="🚀 Run & Results" %}
{% stepper %}
{% step %}

#### Select Test to Run

Navigate to the test cases list and open the test case to execute.

![ContextQA Test case selected in the test case editor with Test Steps tab and execution configuration panel](https://4255556216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKlyaXxb76z3Dn47TrZkU%2Fuploads%2Fgit-blob-f73aa1fb3ab96508511f86ca5a2b31184ca50082%2F01-create-test-case-step-02-test-created.jpg?alt=media)

{% hint style="info" %}
**AI Agent:** `CLICK` Test case 'ContextQA Test' in the list
{% endhint %}
{% endstep %}

{% step %}

#### Trigger Execution

Click **Run** to queue the test. ContextQA assigns a Chrome cloud agent and execution begins immediately.

{% hint style="info" %}
**AI Agent:** `CLICK` Run button → execution queued (Run ID: 27065)

**AI Agent:** `VERIFY` Status transitions from QUEUED → RUNNING
{% endhint %}
{% endstep %}

{% step %}

#### Monitor Live Progress

Step-by-step results update in real time as the AI agent completes each action. Screenshots captured after every step.

![Test execution in progress showing real-time step monitoring with per-step screenshot capture enabled](https://4255556216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKlyaXxb76z3Dn47TrZkU%2Fuploads%2Fgit-blob-f73aa1fb3ab96508511f86ca5a2b31184ca50082%2F01-create-test-case-step-02-test-created.jpg?alt=media)

{% hint style="info" %}
**AI Agent:** `RUNNING` — executing in Chrome on cloud infrastructure

**AI Agent:** `SCREENSHOT` — captured automatically after each step
{% endhint %}
{% endstep %}

{% step %}

#### Review Results ✓

100% pass rate. Per-step screenshots, full session video, and Playwright trace all available instantly.

![Completed test execution results showing all steps passed with video recording and trace artifacts available](https://4255556216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKlyaXxb76z3Dn47TrZkU%2Fuploads%2Fgit-blob-f73aa1fb3ab96508511f86ca5a2b31184ca50082%2F01-create-test-case-step-02-test-created.jpg?alt=media)

{% hint style="success" %}
**AI Agent:** `SUCCESS` — All steps passed. Video and trace captured.

**AI Agent:** `VIDEO` — Full session at cqa-media.s3.amazonaws.com

**AI Agent:** `TRACE` — Playwright ZIP with DOM snapshots, network logs, timing
{% endhint %}

| Artifact            | Format | Available             |
| ------------------- | ------ | --------------------- |
| 🎬 Session Video    | WebM   | Immediately after run |
| 📸 Step Screenshots | JPG    | Per step              |
| 🔍 AI Reasoning     | JSON   | Full planner chain    |
| ⏱ Total Duration    | —      | 56 seconds            |
| ✅ Pass Rate         | —      | 100%                  |
| {% endstep %}       |        |                       |
| {% endstepper %}    |        |                       |
| {% endtab %}        |        |                       |
| {% endtabs %}       |        |                       |

***

## What happens under the hood

ContextQA's AI pipeline handles the full execution lifecycle automatically — from interpreting each test step in natural language, to locating elements in the browser, executing actions, capturing evidence, and self-healing when the UI changes. No selectors to write, no scripts to maintain.

***

{% hint style="success" %}
**Try it with your own application**

[🚀 Start Free Trial →](https://app.contextqa.com/signup) · [📖 Creating Test Cases](https://learning.contextqa.com/web-testing/creating-test-cases) · [Book a Demo](https://contextqa.com/book-a-demo/)
{% endhint %}