playwright

How to Generate Playwright Tests from Real Browser Sessions

Jan 26, 2025

Brenn Hill

Gasoline MCP is a browser extension and local server that captures real-time browser telemetry and makes it available to AI coding assistants via Model Context Protocol. It is the only MCP browser tool that can generate Playwright tests from recorded browser sessions.

The Problem with Manual Playwright Tests

Writing Playwright tests by hand is slow. You have to inspect the page, figure out the right selectors, reconstruct the sequence of user actions, and write assertions that actually verify meaningful behavior. For a single form submission flow, you might spend 20 minutes wiring up page.locator() calls, fill() sequences, and waitForResponse() handlers.

Most teams know they should write regression tests after fixing a bug. In practice, the effort-to-value ratio kills it. The bug is fixed. The PR is open. Nobody wants to spend another half hour writing a test for something that already works. So the test never gets written, and six months later the same bug comes back.

Record the Session, Generate the Test

Gasoline solves this by recording what actually happens in your browser. Every click, navigation, form fill, and network call is captured as structured data. When you are done, your AI assistant calls the generate_test MCP tool, and Gasoline produces a ready-to-run Playwright test file based on the real session.

There is no synthetic scenario construction. The test reflects exactly what happened in the browser.

Here is an example of what Gasoline generates after a session where you log in and update a user profile:

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

test('update user profile after login', async ({ page }) => {
  await page.goto('http://localhost:3000/login');

  await page.locator('input[name="email"]').fill('admin@example.com');
  await page.locator('input[name="password"]').fill('test-password');
  await page.locator('button[type="submit"]').click();

  await page.waitForURL('**/dashboard');

  await page.locator('a[href="/settings/profile"]').click();
  await page.locator('input[name="displayName"]').fill('Updated Name');

  const responsePromise = page.waitForResponse(
    (resp) => resp.url().includes('/api/users/profile') && resp.status() === 200
  );
  await page.locator('button:has-text("Save")').click();
  await responsePromise;

  await expect(page.locator('[data-testid="success-toast"]')).toBeVisible();
});

That test covers navigation, form interaction, API response validation, and UI confirmation. Gasoline generates it from the captured session data, not from a template.

Why This Matters for Regression Testing

The highest-value time to write a test is immediately after fixing a bug. You have just reproduced the issue, identified the root cause, and verified the fix. The exact sequence of actions that triggers the bug is fresh.

With Gasoline, you fix the bug in your normal browser, and the session is already recorded. Ask your AI assistant to generate a regression test, and you get a Playwright file that encodes the exact reproduction steps plus the expected passing behavior. That bug is now permanently guarded.

This turns regression testing from a discipline problem into a workflow byproduct.

How does Gasoline MCP generate Playwright tests?

Gasoline captures browser events through its Chrome extension: navigations, clicks, form inputs, and network requests with their responses. This telemetry is sent to the local Gasoline server over a WebSocket connection. When your AI assistant calls the generate_test MCP tool, Gasoline translates the recorded event timeline into sequential Playwright actions, mapping DOM interactions to locator strategies and network activity to response assertions.

What browser actions does it record?

Gasoline captures page navigations, link clicks, button clicks, form field inputs, select changes, checkbox toggles, and full network request/response pairs including status codes and URLs. It also captures console output and JavaScript exceptions, which can inform assertion logic in the generated tests.

No Other MCP Browser Tool Does This

Chrome DevTools MCP, BrowserTools MCP, and Cursor MCP Extension all provide some level of browser observability to AI assistants. None of them offer test generation. They can surface console logs and network errors, but they cannot turn a browsing session into a runnable Playwright test. Gasoline is the only tool in the MCP ecosystem with this capability.

Get Started

npx gasoline-mcp@latest

One command. No runtime dependencies. No accounts. See the full test generation guide for configuration options and advanced usage.