"Getting Started with Playwright Studio — Record Your First Test in 10 Minutes"

What Is Playwright Studio?

Playwright Studio by AIQEAcademy is a free Chrome DevTools extension that brings a complete test automation workspace into your browser. Instead of writing Playwright code from scratch, you interact with your web application normally — clicking, typing, navigating — and the extension generates the test code for you.

Install it here:
Playwright Studio on Chrome Web Store →

No account required. No credit card. Works immediately after install.

What You Get

Playwright Studio panels:
│
├── ▶ Action Recorder      → records clicks, typing, navigation
├── ✓ Assertion Builder    → generates expect() statements visually
├── ⇄ Network Mock Studio  → intercepts and stubs HTTP requests
├── ▷ In-Browser Runner    → executes tests right in the browser
└── ⌖ Self-Healing Locators → suggests stable alternatives when selectors break

Step 1 — Install the Extension

1. Click this link: chrome.google.com/webstore → Playwright Studio
2. Click "Add to Chrome"
3. Click "Add extension" in the confirmation popup
4. You'll see the Playwright Studio icon appear in your Chrome toolbar

That's all. No configuration, no API keys, nothing to set up.

Step 2 — Open DevTools and Find the Panel

1. Navigate to any website you want to test (e.g. https://the-internet.herokuapp.com/login)
2. Press F12 (Windows/Linux) or Cmd+Option+I (Mac) to open DevTools
3. Click the >> arrow at the right end of the DevTools tab bar
4. You'll see "Playwright Studio" in the dropdown — click it

The Playwright Studio panel opens on the right side of DevTools, split into its five sub-panels.

Step 3 — Record Your First Test

Let's record a login test on the Heroku test application.

Start recording:

1. In the Playwright Studio panel, click the Record button (red circle)
2. The status bar shows: ● Recording — interact with the page

Perform the actions:

1. Click the Username field → type tomsmith
2. Click the Password field → type SuperSecretPassword!
3. Click the Login button

Stop recording:

1. Click Stop in the Playwright Studio panel

You'll immediately see generated code like this:

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

test('recorded test', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/login');
  await page.fill('#username', 'tomsmith');
  await page.fill('#password', 'SuperSecretPassword!');
  await page.click('button[type="submit"]');
});

Step 4 — Add an Assertion

A test without assertions just runs through steps — it doesn't verify anything actually worked. Let's add one.

1. Click the Assertion Builder tab in the panel
2. Click on the green success flash message that appeared after login
3. The panel shows available assertion types — select "Has text"
4. It adds to your code:

await expect(page.locator('#flash')).toContainText('You logged into a secure area!');

Your complete test now looks like:

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

test('login with valid credentials', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/login');
  await page.fill('#username', 'tomsmith');
  await page.fill('#password', 'SuperSecretPassword!');
  await page.click('button[type="submit"]');
  await expect(page.locator('#flash')).toContainText('You logged into a secure area!');
  await expect(page).toHaveURL(/secure/);
});

Step 5 — Copy and Run

1. Click Copy in the Playwright Studio panel
2. Open your Playwright project (or create one with npm init playwright@latest)
3. Paste into tests/login.spec.ts
4. Run:

npx playwright test tests/login.spec.ts

Running 1 test using 1 worker

  ✓  tests/login.spec.ts:3:1 › login with valid credentials (1.2s)

  1 passed (2.1s)

Your recorded test passes on the first run.

What the Recorder Handles Automatically

You don't need to worry about any of these — Playwright Studio deals with them:

// Waits — Playwright Studio uses auto-waiting locators
// NOT this (manual):
await page.waitForSelector('#username');
// But this (generated):
await page.fill('#username', 'tomsmith');  // auto-waits for element

// Dynamic URLs — captures the actual URL navigated to
await page.goto('https://the-internet.herokuapp.com/login');

// SPA routing — detects and records URL changes
await page.click('a[href="/dashboard"]');
await expect(page).toHaveURL('/dashboard');

// Form submissions
await page.press('input[type="email"]', 'Enter');
// or
await page.click('button[type="submit"]');

Common First-Run Questions

Q: I don't see "Playwright Studio" in the DevTools tabs.

It might be hidden. Click the >> overflow arrow at the right end of the DevTools tab bar — it's usually there.

Q: The recorder captured a URL I didn't intend (like a redirect).

This is correct behaviour — the recorder captures the actual URL the page landed on. You can edit the goto URL in the code panel before copying.

Q: My test fails when I run it outside the browser.

Most likely a timing issue. Add an assertion before the action that needs to wait:

// Instead of just clicking, wait for the element to be ready
await expect(page.locator('#submit-btn')).toBeEnabled();
await page.click('#submit-btn');

Next Steps

Now that you have the basics:

• Complete Recorder Guide → — SPAs, shadow DOM, iframes
• Assertion Builder Guide → — all 30+ assertion types
• Network Mock Studio → — stub APIs for reliable tests

Playwright Studio is built and maintained by AIQEAcademy. It's free, open, and runs entirely in your browser — no data ever leaves your machine.