Browser Plugin Recording

The TrueAssert browser plugin allows you to create automated tests by simply recording your interactions with a website. This is the fastest and most intuitive way to create tests.

Overview

When you record actions using the browser plugin:

  • Your clicks, form inputs, and navigation are automatically captured

  • XPath selectors are generated automatically for each element

  • The test is created with status REVIEW (ready for review and execution)

  • All steps are saved to TrueAssert immediately

Prerequisites

Before recording, ensure you have:

  • ✅ Browser plugin installed (Installation Guide)

  • ✅ Plugin authenticated with API key

  • ✅ Target website open in a browser tab

Recording Workflow

Step 1: Open the Plugin

  1. Click the TrueAssert extension icon in your Chrome toolbar

  2. The plugin popup will open

  3. If not authenticated, you'll see the "Connect to your account" screen

Step 2: Start Recording

  1. Once authenticated, you'll see the "Ready to Record" state with a large "Record" button

  2. Navigate to the website you want to test (if not already there)

  3. Click the "Record" button in the plugin popup

  4. A red recording indicator will appear on the webpage

  5. The plugin state changes to "Recording..." with a live step counter

Step 3: Perform Actions

Simply use the website as you normally would:

  • Click buttons - Automatically recorded as CLICK actions

  • Fill form fields - Automatically recorded as FILL actions with values

  • Navigate between pages - Automatically recorded as GOTO actions

  • Submit forms - Automatically recorded

What Gets Captured:

  • Action type (CLICK, FILL, GOTO, WAIT)

  • XPath selector (automatically generated)

  • Value (for form inputs)

  • Description (auto-generated based on action)

Real-time Feedback:

  • Step count updates in the extension badge (e.g., "12" in red)

  • Step count displays in the plugin popup

  • Visual recording indicator on the page

Step 4: Stop Recording

You have two options:

Option A: Stop and Save Immediately

  1. Click "Stop and Save" button

  2. Test is saved immediately with a default name

  3. You're taken to the "Test Saved!" state

Option B: Stop and Review

  1. Click "Stop" button

  2. Recording pauses but data is retained

  3. You can review steps before saving

  4. Click "Save" to save, or "Erase" to discard

Step 5: Save Your Test

  1. Enter a test name (e.g., "Login Flow Test")

  2. Click "Save" to create the test in TrueAssert

  3. The test is created with status REVIEW

  4. Click "View Test" to open the test in your TrueAssert dashboard

How Recording Works

Content Script Injection

When you start recording:

  1. The plugin injects a content script into the active tab

  2. The content script listens for DOM events:

    • click events → CLICK actions

    • keyup and input events → FILL actions

    • submit events → Form submissions

  3. Each event is captured and sent to the service worker

XPath Selector Generation

For each captured action, the plugin automatically generates an XPath selector:

  1. Selector Algorithm: Uses the robust XPath generation algorithm from selector.js

  2. Priority System:

    • ID selectors (penalty: 0) - Best

    • data-testid (penalty: 1)

    • ARIA attributes (penalty: 5)

    • Form attributes (penalty: 10)

    • Text content (penalty: 20)

    • CSS classes (penalty: 50)

    • Structural positioning (penalty: 1000+) - Last resort

  3. Uniqueness Verification: Ensures selector matches exactly one element

  4. Alternative Selectors: Multiple selector options may be generated

Step Creation

Each recorded action becomes a TestStep with:

  • Order: Sequential number (0, 1, 2, ...)

  • Action Type: CLICK, FILL, GOTO, WAIT

  • Selector: XPath expression (e.g., //button[@id='submit'])

  • Selector Type: XPATH (default) or CSS

  • Value: Input value (for FILL actions)

  • Description: Human-readable description (auto-generated)

Test Creation

When you save the recording:

  1. Plugin sends data to TrueAssert via Connect-ES (CreateTestFromRecording RPC)

  2. Backend validates API key and gets organization/project

  3. Test is created with:

    • Name: Your provided name or auto-generated

    • Status: REVIEW (ready for review)

    • Target URL: Starting URL from recording

    • Project: First project in your organization

  4. All steps are created and linked to the test

  5. Test version is set to 1

Plugin States

The plugin has several states you'll encounter:

1. Authentication State (auth-state)

  • When: Plugin not connected to TrueAssert

  • Action: Enter API key and click "Connect"

  • Next: Ready to Record state

2. Ready to Record State (ready-state)

  • When: Authenticated and not recording

  • Action: Click "Record" to start

  • Features: Shows organization name, project info

3. Recording State (recording-state)

  • When: Actively recording actions

  • Features:

    • Live step counter

    • "Stop and Save" button

    • "Stop" button

    • Red recording indicator on page

4. Stopped State (stopped-state)

  • When: Recording paused but not saved

  • Actions:

    • "Save" - Save the test

    • "Erase" - Discard recording and start over

5. Saved State (saved-state)

  • When: Test successfully saved

  • Action: "View Test" - Opens test in TrueAssert dashboard

6. Settings State (settings-state)

  • When: Accessing plugin settings

  • Features:

    • View/update API key

    • Configure server host (for local development)

Advanced Features

Session Capture

The plugin can capture browser session data (cookies, localStorage, sessionStorage):

  1. Click "Session" button in ready state

  2. Plugin captures current session data

  3. Click "Save Session" to send to TrueAssert

  4. Session data is stored for the project's domain

Element Selector

Get XPath selector for any element:

  1. Click "Selector" button in ready state

  2. Click any element on the page

  3. XPath selector is generated and displayed

  4. Click "Copy" to copy selector to clipboard

Best Practices

Recording Tips

  1. Start on the Target Page: Navigate to your starting page before clicking Record

  2. Use Clear Actions: Click buttons directly, don't rely on keyboard shortcuts

  3. Complete Flows: Record complete user flows, not partial actions

  4. Test Immediately: After saving, review and run the test to verify it works

Selector Quality

  • Prefer Stable Elements: Elements with IDs or data-testid attributes produce better selectors

  • Avoid Dynamic Content: Elements with frequently changing classes may produce brittle selectors

  • Review Generated Selectors: Check the test detail page to see generated XPath selectors

Common Issues

Recording Not Starting:

  • Ensure you're on a valid webpage (not chrome:// or extension pages)

  • Check that content script is loaded (refresh the page)

  • Verify plugin is authenticated

Steps Not Captured:

  • Some JavaScript frameworks may prevent event capture

  • Try clicking elements directly instead of using keyboard

  • Check browser console for errors

Selectors Not Working:

  • Review generated selectors in test detail page

  • Use alternative selectors if available

  • Manually edit selectors if needed

What Happens After Recording

  1. Test Created: Test appears in your TrueAssert dashboard with REVIEW status

  2. Steps Ready: All recorded steps are visible and editable

  3. Ready to Execute: Test can be run immediately (no AI generation needed)

  4. Can Be Edited: Steps can be modified, added, or deleted manually

Related Topics

← Back to Documentation | Next: AI Test Generation →

PreviousGuidesNextAI Test Generation

Last updated