Skip to main content

Web Recorder

The Web Recorder is a powerful feature in PostQode's Web Agent that allows you to record your browser interactions and automatically generate automation scripts. Instead of manually writing automation code, you can simply perform actions in the browser, and PostQode will capture and convert them into reusable test scripts.

What is Web Recorder?​

Web Recorder captures your real-time browser interactions including:

  • Page navigation
  • Button clicks
  • Form inputs
  • Dropdown selections
  • Scroll actions
  • Mouse movements
  • Keyboard inputs

These recorded actions are then converted into automation scripts in your preferred framework (Playwright, Selenium, Cypress, etc.).

See It in Action​

Watch the Web Recorder capture a login flow and generate a Playwright test in seconds:

Prerequisites​

Before using Web Recorder, ensure you have:

How to Use Web Recorder​

Step 1: Activate Web Agent Mode​

  1. Open the PostQode chat interface in VS Code
  2. Click on the mode dropdown at the top of the chat panel
  3. Select "Web Agent" from the available modes
  4. Verify that your browser connection is active (green indicator)

Step 2: Start Recording​

There are two ways to start recording:

Method 1: Using the Recorder Button​

  1. Look for the Recorder button in the Web Agent toolbar
  2. Click the "Start Recording" button (usually a red circle icon)
  3. The recorder will activate, indicated by a recording status indicator

Method 2: Using Natural Language Command​

Start recording my browser actions

or

Enable web recorder and navigate to https://example.com

Step 3: Perform Your Actions​

Once recording is active:

  1. Navigate to your target website
  2. Interact with elements (click, type, select, etc.)
  3. Complete your workflow or test scenario
  4. All actions are automatically captured in real-time

Example Workflow:

1. Navigate to https://example-shop.com
2. Click on "Products" menu
3. Search for "laptop"
4. Click on the first product
5. Add to cart
6. Proceed to checkout

Step 4: Stop Recording​

When you've completed your actions:

Method 1: Using the Recorder Button​

  1. Click the "Stop Recording" button (usually a square icon)
  2. The recording will stop and be processed

Method 2: Using Natural Language Command​

Stop recording and generate the script

Step 5: Review and Generate Script​

After stopping the recording:

  1. PostQode will display a summary of recorded actions
  2. You can review each step that was captured
  3. Request script generation in your preferred framework

Example:

Generate a Playwright script from the recorded actions

or

Convert the recording to Selenium Python code

Recording Features​

Automatic Element Detection​

Web Recorder intelligently identifies web elements using:

  • ID attributes (highest priority)
  • CSS selectors
  • XPath expressions
  • Text content
  • ARIA labels
  • Data attributes

This ensures your generated scripts are robust and maintainable.

Smart Wait Handling​

The recorder automatically detects and includes:

  • Page load waits
  • Element visibility waits
  • Network request completions
  • Dynamic content loading

Action Annotations​

Each recorded action includes:

  • Timestamp of when it occurred
  • Element selector used
  • Action type (click, type, select, etc.)
  • Input values (for form fields)
  • Screenshot of the page state

Advanced Recording Options​

Selective Recording​

You can pause and resume recording to capture only specific interactions:

Pause recording

Perform actions you don't want to record...

Resume recording

Recording with Assertions​

Add verification steps during recording:

Record this workflow and add an assertion that the page title contains "Success"

Recording Multiple Scenarios​

Record different test scenarios in sequence:

Start recording scenario 1: User login

Perform login actions...

Stop recording and start recording scenario 2: Add product to cart

Generated Script Formats​

Web Recorder can generate scripts in multiple formats:

Playwright (TypeScript)​

import { test, expect } from '@playwright/test';

test('recorded workflow', async ({ page }) => {
  await page.goto('https://example.com');
  await page.click('button:has-text("Sign In")');
  await page.fill('input[name="email"]', '[email protected]');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button[type="submit"]');
  await expect(page).toHaveURL(/.*dashboard/);
});

Playwright (JavaScript)​

const { test, expect } = require('@playwright/test');

test('recorded workflow', async ({ page }) => {
  await page.goto('https://example.com');
  // ... rest of the script
});

Selenium (Python)​

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait

driver = webdriver.Chrome()
driver.get('https://example.com')
driver.find_element(By.CSS_SELECTOR, 'button.sign-in').click()
# ... rest of the script

Cypress​

describe('Recorded Workflow', () => {
  it('should complete user journey', () => {
    cy.visit('https://example.com');
    cy.get('button').contains('Sign In').click();
    cy.get('input[name="email"]').type('[email protected]');
    // ... rest of the script
  });
});

Best Practices​

1. Plan Your Recording​

Before starting:

  • ✅ Know the complete workflow you want to record
  • ✅ Have test data ready (usernames, emails, etc.)
  • ✅ Ensure the website is accessible and stable
  • ✅ Close unnecessary browser tabs

2. Perform Actions Deliberately​

During recording:

  • ✅ Wait for pages to fully load before interacting
  • ✅ Perform actions at a natural pace
  • ✅ Avoid unnecessary clicks or navigation
  • ✅ Use clear, identifiable form inputs

3. Keep Recordings Focused​

  • ✅ Record one logical workflow per session
  • ✅ Break complex scenarios into smaller recordings
  • ✅ Avoid recording exploratory browsing
  • ✅ Stop recording when the workflow is complete

4. Review Before Generating​

  • ✅ Check the recorded action summary
  • ✅ Verify all critical steps were captured
  • ✅ Remove any unwanted actions if possible
  • ✅ Add assertions for important verifications

5. Optimize Generated Scripts​

After generation:

  • ✅ Review the generated code for accuracy
  • ✅ Add meaningful test names and descriptions
  • ✅ Include proper error handling
  • ✅ Add comments for complex interactions
  • ✅ Parameterize test data for reusability

Common Use Cases​

1. User Registration Flow​

Start recording
Navigate to https://app.example.com/signup
Fill registration form
Submit and verify success message
Stop recording
Generate Playwright script

2. E-commerce Checkout​

Record the complete checkout process from product selection to order confirmation

3. Form Validation Testing​

Record form submission with invalid data and verify error messages

4. Multi-Step Wizards​

Record navigation through a multi-step form wizard with data entry at each step

5. Search and Filter Operations​

Record search functionality with various filters and sorting options

Troubleshooting​

Recording Not Starting​

Symptoms:

  • Recorder button doesn't respond
  • No recording indicator appears

Solutions:

  1. Verify browser connection is active (green indicator)
  2. Refresh the browser connection in settings
  3. Restart VS Code and reconnect
  4. Check that Web Agent mode is properly activated

Actions Not Being Captured​

Symptoms:

  • Some clicks or inputs are missing from the recording
  • Incomplete action sequence

Solutions:

  1. Perform actions more slowly to ensure capture
  2. Wait for page elements to fully load before interacting
  3. Avoid rapid consecutive actions
  4. Check if elements are in iframes (may require special handling)

Generated Script Has Errors​

Symptoms:

  • Script fails to run
  • Selectors not found
  • Timing issues

Solutions:

  1. Review and update element selectors
  2. Add explicit waits for dynamic content
  3. Verify the website structure hasn't changed
  4. Test the script in isolation to identify issues

Recording Contains Unwanted Actions​

Symptoms:

  • Extra clicks or navigation recorded
  • Exploratory actions included

Solutions:

  1. Use pause/resume to control what gets recorded
  2. Plan your workflow before starting
  3. Re-record the specific section if needed
  4. Manually edit the generated script to remove unwanted steps

Tips for Better Recordings​

Use Stable Selectors​

When possible, interact with elements that have:

  • Unique IDs
  • Stable CSS classes
  • Data-testid attributes
  • Meaningful ARIA labels

Add Context with Comments​

During recording, you can add comments:

Add a comment: "This step verifies the user is logged in"

Handle Dynamic Content​

For dynamic content:

Record this workflow and wait for the loading spinner to disappear before each action

Test Data Management​

Use consistent test data:

Record using test user: [email protected] with password: Test123!

Integration with Other Features​

Combine with Inspect Tool​

Use the Inspect tool to:

  • Identify optimal selectors before recording
  • Verify element properties during recording
  • Debug selector issues in generated scripts

Export to Test Suites​

Generated scripts can be:

  • Added to your existing test suite
  • Integrated with CI/CD pipelines
  • Shared with team members
  • Version controlled in your repository

Enhance with AI​

After recording:

Enhance this recorded script with better error handling and assertions

or

Optimize the generated script for better performance and maintainability

Next Steps​

Additional Resources​

Need Help? If you encounter issues with Web Recorder, visit our troubleshooting guide or reach out on Discord.

Is this documentation incorrect or incomplete? Report an issue on GitHub