Chrome Extension

The QAID Chrome Extension enables recording user interactions and capturing visual baselines with prerequisite actions.

Overview

The QAID Recorder extension allows you to:

• Record user interactions on your website
• Generate Playwright tests from recordings
• Capture visual baselines with prerequisite actions (Record & Snap)
• Create tests for complex, multi-step flows

Installation

Installing the Extension

Your QAID administrator will provide the QAID Recorder extension along with installation instructions for your environment.

Getting the Extension ID

After installation, you may need the Extension ID for QAID configuration:

1. Open Chrome and go to chrome://extensions
2. Find "QAID Recorder" in the list
3. Copy the Extension ID (long alphanumeric string)
4. Save this ID for configuration in QAID

Configuring QAID

1. In QAID, click your profile avatar in the top-right
2. Find "Extension API Key" in the dropdown
3. Enter your Extension ID
4. Click "Save"

QAID can now communicate with the extension.

Recording User Interactions

Starting a Recording

1. Navigate to your target page in Chrome
2. Click the QAID Recorder extension icon
3. The side panel opens
4. Click "Start Recording"
5. Perform actions on the page

Recordable Actions

The extension captures:

• Clicks: Button clicks, link clicks
• Form Fills: Text input, selections
• Navigation: Page changes
• Keyboard: Key presses, shortcuts
• Scrolling: Scroll actions (optional)

Recording Controls

Viewing Recorded Actions

As you interact, actions appear in the timeline:

• Action type icon
• Target element
• Value (for inputs)
• Timestamp

Editing Actions

While recording or after:

• Reorder: Drag actions to change order
• Delete: Remove unwanted actions
• Edit: Modify action details

Generating Tests from Recordings

Creating a Test

1. Complete your recording
2. Click "Generate Test"
3. Enter a test name
4. QAID generates Playwright code

Generated Code

The extension creates clean Playwright code:

test('user completes signup flow', async ({ page }) => {
  await page.goto('https://example.com/signup');
  await page.getByLabel('Email').fill('user@example.com');
  await page.getByLabel('Password').fill('password123');
  await page.getByRole('button', { name: 'Sign Up' }).click();
  await expect(page.getByText('Welcome')).toBeVisible();
});

Playwright Auto-Wait

Generated code uses Playwright's auto-waiting:

• No manual waits needed
• Actions wait for elements automatically
• More reliable test execution

Record & Snap (Visual Regression)

Record & Snap lets you capture visual baselines that require setup actions.

When to Use Record & Snap

• Pages behind authentication
• Modal dialogs
• Dropdown menus in specific states
• Pages after form submission
• Scrolled positions
• Multi-step flow results

Using Record & Snap

1. In QAID Visual Regression step, click "Record & Snap"
2. Enter your Extension ID if prompted
3. The extension opens in Chrome
4. Record prerequisite actions:
   • Login steps
   • Navigation
   • Clicks to open modals
   • Any setup needed
5. When page is in desired state, click "Capture"
6. Baseline is saved with the recording

Prerequisite Actions

The recording saves all actions performed before the baseline capture. When running a comparison later, QAID replays these actions to reach the same page state before comparing screenshots.

Adding Assertions

Types of Assertions

Adding an Assertion

1. During recording, click "Add Assertion"
2. Select assertion type
3. Click the target element (for element assertions)
4. Enter expected value if needed
5. Assertion is added to timeline

Example Assertions

// Visible assertion
await expect(page.getByRole('heading')).toBeVisible();

// Text assertion
await expect(page.getByRole('alert')).toHaveText('Success!');

// URL assertion
await expect(page).toHaveURL(/.*dashboard.*/);

// Count assertion
await expect(page.getByRole('listitem')).toHaveCount(5);

Extension Settings

Accessing Settings

1. Right-click extension icon
2. Select "Options"

Available Settings

Best Practices

Recording Quality

• Plan your recording before starting
• Keep recordings focused (one goal per recording)
• Avoid unnecessary actions
• Use assertions to verify states

Selector Reliability

• Add data-testid attributes for more reliable selectors
• Review generated selectors for stability

Test Maintenance

• Keep recordings short and focused
• Update recordings when UI changes
• Use descriptive test names

Troubleshooting

Extension Not Connecting

Check:

• Extension ID is correct in QAID settings
• Extension is enabled in Chrome
• Browser allows extension communication

Solutions:

• Re-copy Extension ID
• Reinstall extension
• Check browser security settings

Actions Not Recording

Possible causes:

• Recording not started
• Page in iframe
• Shadow DOM elements
• Extension permissions

Solutions:

• Ensure recording is active
• Check for iframe boundaries
• Grant extension permissions
• Try clicking more specifically

Generated Tests Failing

Common issues:

• Timing problems
• Selector changes
• Dynamic content

Solutions:

• Add explicit waits if needed
• Use more stable selectors
• Handle dynamic content appropriately

Record & Snap Not Working

Requirements:

• Valid Extension ID configured
• Extension has site permissions
• Chrome is the active browser

Check:

• Extension permissions for the target site
• QAID can communicate with extension
• No browser popup blockers

Security Considerations

Extension Permissions

The QAID Recorder requests:

• Access to all websites (for recording)
• Storage (for saving recordings)
• Communication (to connect with QAID)

Data Handling

• Recordings are stored locally
• Sensitive data (passwords) are included in recordings
• Review recordings before sharing
• Clear recordings after use if sensitive

Production Environments

Be cautious when recording on production:

• Avoid recording real user credentials
• Use test accounts when possible
• Don't record sensitive business data

Related Topics

• Visual Regression - Using Record & Snap
• Automated Tests - Alternative for complex flows
• Settings - Configure extension ID