> For the complete documentation index, see [llms.txt](https://learning.contextqa.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learning.contextqa.com/web-testing/recording-tutorial.md).

# Tutorial: Record Your First Test

## Quick answer

Install the ContextQA Recorder, capture a real browser workflow as test steps, and run the recorded test — building a complete web test case without writing code or describing a single step. Follow the documented prerequisites and steps, then verify the expected result before using the workflow in a shared or production process.

## What this page covers

{% hint style="info" %}
**Who is this for?** New users and testers who want to create their first web test by clicking through their application. You install the ContextQA Recorder, record a live browser workflow, and run the test — no code and no written steps required.
{% endhint %}

Recording is the fastest way to turn an existing workflow into an automated test. You interact with your application the way a user would — signing in, navigating, filling forms — and the ContextQA Recorder captures every click, text entry, and navigation as an editable test step. This is ideal for click-heavy flows where describing each step would take longer than performing it.

In this tutorial you will:

1. Install the ContextQA Recorder Chrome extension
2. Start a recording session against a live URL
3. Capture a real workflow as test steps
4. Save the recorded test and run it

**End result:** A complete web test case, built entirely from your recorded browser actions, that runs against a real browser and captures screenshots, video, and network logs on every execution.

[Watch the Record & Play walkthrough](https://drive.google.com/file/d/13Gab4J-oTb7XZVNxAZJNpDvXme-nE-iX/preview).

## Prerequisites

* A ContextQA account with at least one workspace ([sign up](https://accounts.contextqa.com/onboard))
* A plan with the Record & Play feature enabled (recording requires a paid plan)
* Google Chrome or Microsoft Edge
* The URL of a web application you can interact with, and one workflow to record (for example, signing in or running a search)
* Familiarity with [core concepts](/getting-started/core-concepts.md) — specifically test cases and steps

{% hint style="info" %}
Recording works for **web** applications only. To automate mobile apps, see [Creating mobile tests](/mobile-testing/creating-mobile-tests.md). To create web tests by describing them in plain English instead, see the [Quickstart guide](/getting-started/quickstart.md).
{% endhint %}

***

## Step 1: Install the ContextQA Recorder

The recorder runs as a Chrome extension that captures your browser actions and streams them into ContextQA as test steps.

1. In the left sidebar, select **Test Cases**.
2. Click the **+** button and select **Record & Play**.
3. If the extension is not installed, the panel shows a **ContextQA Chrome Extension Required** card. Click **Install ContextQA Extension** to open the [ContextQA Test Automation extension](https://chromewebstore.google.com/detail/context-qa/akmoahgeffemjioncblbogjnmjeeiplg) in the Chrome Web Store.
4. On the Chrome Web Store page, click **Add to Chrome**, then confirm the installation.
5. Enable the extension in incognito mode so it can capture actions in private windows. Open `chrome://extensions`, find **ContextQA Test Automation**, click **Details**, and turn on **Allow in Incognito**.
6. Return to ContextQA and select **I already have the extension installed →** to recheck for the extension.

**Verify it worked:** The Record & Play panel shows a green **ContextQA Extension detected** banner with the message "You're ready to start recording test actions." If you still see the installation card, close and reopen the creation panel to trigger a fresh detection.

{% hint style="info" %}
The extension is free, installs in seconds, and works with both Chrome and Microsoft Edge (Edge uses the same Chrome Web Store listing).
{% endhint %}

***

## Step 2: Configure the recording session

With the extension detected, tell ContextQA which page to open and what must happen before recording starts.

1. In the **Target URL** field, enter the starting URL for your workflow. For example:

```
https://app.example.com/login
```

2. (Optional) Under **Prerequisites**, select one or more existing test cases that must run before this one — for example, a test that puts the application into a logged-in state. Leave this empty if your recording starts from a clean session.
3. Review the **What happens next** note. It confirms that clicking **Start Recording** opens your URL in a new tab with the recorder active.

**Verify it worked:** The **Target URL** field shows a valid URL with no error message, and the **Start Recording** button is enabled. If the button stays disabled, check that the URL starts with `http://` or `https://`.

***

## Step 3: Record your workflow

Now capture the actual workflow. Every interaction you perform in the new tab becomes a test step.

1. Click **Start Recording**. ContextQA opens your target URL in a new browser tab with the recorder active.
2. Interact with your application exactly as a user would. For a login flow, for example:
   * Enter an email address in the email field.
   * Enter a password in the password field.
   * Click the **Sign in** button.
   * Wait for the dashboard or landing page to load.
3. Continue through the rest of the workflow you want to test. The recorder captures each click, text entry, and navigation as a discrete step in real time.
4. When you finish the workflow, click the **ContextQA Recorder** icon in your browser toolbar and select **Stop** to end the session and save.

**Verify it worked:** ContextQA closes the recording tab and returns you to the test case, where each action you performed appears as a numbered step in the [Test Steps Editor](/web-testing/test-steps-editor.md).

{% hint style="warning" %}
**Record deliberate actions.** The recorder captures everything you do, including accidental clicks and dead-end navigations. Move through the workflow at a steady pace and avoid clicking outside your intended flow. You can delete or reorder any captured step afterward in the Test Steps Editor.
{% endhint %}

***

## Step 4: Review, name, and run the test

Recorded steps are ordinary ContextQA steps — you can edit them, add assertions, and run the test like any other.

1. Give the test case a descriptive name, such as `Sign in — recorded`.
2. Review the captured steps in order. Each step shows the action performed and the element it targeted.
3. Add a verification step to confirm the workflow succeeded. Click **Add Step**, then describe what to check — for example, "Verify the dashboard heading is visible".
4. Remove any accidental steps by selecting the step and clicking the delete icon.
5. Click **Run** in the top toolbar, select an execution environment, and click **Run** again.

When execution finishes, click **View Detailed Report** to review the results.

**Verify it worked:** The execution report shows each step with a pass or fail indicator, a screenshot, and captured network and console logs. A passing run confirms your recorded workflow is now a repeatable automated test.

| Result                      | What it means                                                                                                          |
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| All steps pass              | The recorded workflow runs cleanly end to end                                                                          |
| A navigation step fails     | The starting URL or a link changed — update the step's target                                                          |
| A click or input step fails | The element moved or was renamed — [AI self-healing](/web-testing/self-healing.md) repairs most of these automatically |

***

## Summary

You built a web test case entirely from recorded browser actions:

1. **Installed the ContextQA Recorder** Chrome extension and confirmed ContextQA detected it
2. **Configured a recording session** with a target URL and optional prerequisites
3. **Recorded a live workflow**, capturing each interaction as an editable test step
4. **Named, reviewed, and ran** the test, then inspected the per-step evidence

Recording gives you a working test in the time it takes to click through a flow once — a strong starting point you can refine with assertions, data, and reusable steps.

## Next steps

* **Add assertions:** Strengthen the test by verifying outcomes at key points. See the [Test Steps Editor](/web-testing/test-steps-editor.md).
* **Make the test data-driven:** Run the same recorded flow across many input sets. See [Tutorial: Data-driven testing](/web-testing/data-driven-testing-tutorial.md).
* **Extract reusable steps:** Turn the recorded sign-in sequence into a step group you can share across tests. See [Tutorial: Creating and reusing step groups](/web-testing/step-groups-tutorial.md).
* **Handle tricky flows:** Configure a [knowledge base](/ai-features/knowledge-base.md) so the test agent can dismiss cookie banners or handle multi-factor authentication during recording and playback.
* **Run in CI/CD:** Add the test to a plan and trigger it from your pipeline. See [GitHub Actions](/integrations/github-actions.md).

## Related pages

* [Creating test cases](/web-testing/creating-test-cases.md) — all four authoring methods, including Record & Play, AI assistance, import, and manual creation
* [Test Steps Editor](/web-testing/test-steps-editor.md) — edit, reorder, and enrich recorded steps
* [Debugging test cases](/web-testing/debugging-test-cases.md) — diagnose and fix steps that fail on playback
* [AI self-healing](/web-testing/self-healing.md) — how ContextQA repairs recorded steps when the UI changes
* [Running tests](/execution/running-tests.md) — execution options for test cases, suites, and plans

{% hint style="info" %}
**Record your first test in minutes — no code required.** [**Book a Demo →**](https://contextqa.com/book-a-demo/) to see recording with your own application.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://learning.contextqa.com/web-testing/recording-tutorial.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.