From Description to Playwright: How Testoro Generates Tests — Testoro Blog

Ever wondered what happens between typing "test that users can log in" and getting a complete Playwright .spec.ts file? This article walks through Testoro's generation pipeline step by step.

The Pipeline

Testoro's test generation follows a four-stage pipeline:

**Input Parsing** — Understand the user's intent

**DOM Crawling** — Capture the target page's structure

**Prompt Construction** — Build context-rich prompts for the AI

**Code Generation** — Generate and validate Playwright code

Let's dive into each stage.

Stage 1: Input Parsing

Users provide test descriptions in one of two formats:

Natural language description:

"Navigate to the login page, enter valid credentials, submit the form, and verify the dashboard loads."

Structured steps:

Navigate to /login

Fill email field with "user@example.com"

Fill password field with "password123"

Click the "Sign in" button

Assert that the URL contains "/dashboard"

Both formats are normalized into a structured representation that the AI can work with. Natural language is parsed for action verbs (navigate, click, fill, assert) and target descriptions.

Stage 2: DOM Crawling

This is where Testoro differs from generic AI code generators. Instead of guessing at your page structure, we actually crawl it.

Using a headless Chromium browser (via Playwright), Testoro:

**Navigates to your target URL** — loads the actual page

**Extracts interactive elements** — buttons, links, inputs, forms, with their attributes

**Captures semantic information** — ARIA roles, labels, placeholder text, data-testid attributes

**Builds a DOM map** — a structured representation of the page's interactive surface

This DOM context is critical. It means the generated selectors are based on your real page, not AI hallucinations.

Stage 3: Prompt Construction

The AI prompt combines three pieces of context:

**The user's test description** — what the test should do

**The DOM context** — what elements are available on the page

**Playwright best practices** — selector strategies, assertion patterns, async handling

The prompt instructs the AI to:

Use Playwright's recommended locator strategies (getByRole, getByText, getByTestId)

Include proper async/await patterns

Add meaningful assertions

Handle common edge cases (loading states, animations)

Follow the Arrange-Act-Assert pattern

Stage 4: Code Generation

The AI model generates a complete .spec.ts file including:

Test setup — imports, test.describe blocks

Navigation — page.goto with the target URL

Actions — clicks, fills, selects based on the test steps

Assertions — expect() statements validating the expected outcomes

Cleanup — any necessary teardown

The generated code is then validated for syntax correctness and returned to the user with a list of assertions and the model used.

Model Tiering

Different plan tiers use different AI models, optimizing for speed vs. quality:

| Plan | Model | Best For |

|------|-------|----------|

| Free | GPT-4.1 Nano | Quick, simple tests |

| Standard | GPT-4o Mini | Balanced quality and speed |

| Pro | GPT-4.1 | Complex, production-grade tests |

Higher-tier models produce more nuanced code — better error handling, more resilient selectors, and smarter assertion strategies.

What Makes This Different

Most AI coding tools generate tests in a vacuum — they don't know what your actual page looks like. Testoro's DOM crawling stage changes this fundamentally. The AI sees your real elements, real attributes, and real structure. The result is tests that work on the first run, not tests that need manual fixing.

This is the difference between "AI-assisted" and "AI-powered" test generation. Testoro doesn't just help you write tests faster — it writes tests that actually work.