Libretto vs Playwright codegen: workflow compiler vs browser recorder.
Playwright is the standard for fast, deterministic browser automation, and codegen is a useful way to bootstrap tests. Libretto is for teams that want a coding agent to turn a real website workflow into a maintained script, including direct API-call shortcuts when the browser reveals them.
- Use Playwright directly when your team wants full control over browser tests or scripts and is ready to write the reliable parts by hand.
- Use Playwright codegen for simple apps and straightforward frontend tests where a recorded flow is close to the final test.
- Use Libretto when you are building browser automations that need to keep working, especially against third-party or legacy sites where naive recorded UI steps tend to break.
Playwright codegen records browser interactions
Playwright is a mature open-source framework for browser automation and end-to-end testing. It supports Chromium, Firefox, and WebKit, has first-class TypeScript and JavaScript support, and also provides official Python, .NET, and Java bindings.
Playwright codegen opens a browser and the Playwright Inspector. As you click, type, and add assertions, it emits Playwright code. The generated locators follow Playwright's philosophy: prefer user-facing roles, text, labels, placeholders, and test IDs over brittle CSS or XPath when possible.
That output is plain code, which is a major strength. But codegen is still a recorder, and recorded browser flows are often not reliable automations by themselves. It does not know the business intent of the workflow, decide which network requests are the real abstraction, or design your fixtures, auth, data setup, cleanup, and retry strategy.
Libretto uses Playwright, but builds a workflow artifact
Libretto is not anti-Playwright. It uses Playwright where the browser is the right layer. The difference is that Libretto is built for browser automations, not just recorded frontend tests. It gives coding agents a purpose-built CLI for inspecting a live site, recording the workflow, observing network calls, and turning the path into a deterministic script.
The generated script can keep UI actions when they are necessary and replace slow or fragile UI sequences with direct in-session API calls when the portal exposes a cleaner request. That is the core wedge: Libretto is not just recording clicks; it is trying to produce automation code that survives real-world portal behavior.
What the difference looks like in code
A codegen test often mirrors the visible UI path. That can be fine for a simple frontend test, but it is a weak foundation for many operational automations. A Libretto workflow may start from the same path, then replace fragile steps with direct requests discovered during the browser session.
import { test, expect } from "@playwright/test";
test("authorization status", async ({ page }) => {
await page.goto("https://portal.example.com/authorizations");
await page.getByRole("textbox", { name: "Authorization ID" }).fill("A-123");
await page.getByRole("button", { name: "Search" }).click();
await page.getByRole("link", { name: "A-123" }).click();
await expect(page.getByText("Approved")).toBeVisible();
});import { workflow } from "libretto";
import { z } from "zod";
export default workflow("readAuthorizationStatus", {
input: z.object({ authorizationId: z.string() }),
output: z.object({ memberName: z.string(), status: z.string() }),
async handler({ page }, input) {
await page.goto("https://portal.example.com/authorizations");
const response = await page.request.post(
"https://portal.example.com/api/authorizations/detail",
{ data: { id: input.authorizationId } },
);
const authorization = await response.json();
return {
memberName: authorization.member.name,
status: authorization.status,
};
},
});Comparison table
| Dimension | Playwright codegen | Libretto |
|---|---|---|
| Core model | ✓ A mature browser automation framework plus a recorder that generates Playwright test code from browser interactions. | ✓ An open-source CLI for coding agents that turns website workflows into deterministic automation scripts. |
| Generated artifact | — A Playwright test skeleton built from recorded clicks, fills, assertions, and locators; often needs cleanup before it is reliable. | ✓ A workflow script that can combine Playwright actions with direct in-session API calls captured from the browser. |
| Workflow understanding | — Codegen records what you do; the developer still supplies intent, data setup, cleanup, and maintainable structure. | ✓ A coding agent inspects the site, records the workflow, and helps turn the observed path into maintained automation code. |
| Selectors and locators | — Tries to choose resilient role, text, and test-id locators, but recorded flows can still become brittle selector soup on real apps. | ✓ Uses Playwright locators where UI automation is right, but can avoid some UI fragility by replacing steps with API calls. |
| Network/API shortcuts | — Playwright has excellent network and API APIs, but codegen is documented around UI actions, assertions, and locators. | ✓ Designed to capture useful in-session requests and turn slow UI sequences into direct calls when appropriate. |
| Debugging | ✓ Best-in-class developer tooling: Inspector, UI Mode, Trace Viewer, action logs, screenshots, console, and network tabs. | ✓ Debugs generated workflow code with browser/session context, action logs, network observations, and normal Playwright failures. |
| Runtime determinism | ✓ Fast and deterministic when the test code, state, data, and locators are well maintained. | ✓ Also fast and deterministic, with the additional goal of moving known workflow work out of UI steps when possible. |
| Maintenance burden | — Your team owns fixtures, data setup, auth, abstractions, retries, CI, and repair when generated code breaks. | ✓ The agent-assisted CLI is built around exploring, generating, validating, and repairing reusable workflow scripts. |
| Best fit | ✓ Simple frontend tests and teams that want a quick starting point before hand-maintaining the Playwright code. | ✓ Teams building reliable browser automations, especially against portals or third-party apps without clean APIs. |
When to use Playwright codegen instead
Use Playwright codegen when you are writing simple tests for an app your team controls and want a quick starting point. It is useful for discovering locators, recording a happy path, and producing code you can immediately edit in your repo.
Use Playwright directly when you need precise control over test structure, browser contexts, cross-browser coverage, API mocking, CI sharding, and debug artifacts. Playwright's Inspector, Trace Viewer, UI Mode, network tooling, and VS Code extension are hard to beat.
If the job is normal frontend testing and your engineers are comfortable rewriting the generated output into reliable tests, Playwright may be all you need.
When Libretto is the better choice
Libretto is the better fit when you are building browser automations, especially against a third-party portal, legacy web app, or workflow your team does not fully control. In those cases, the hard part is often not writing one Playwright locator; it is discovering the stable path, understanding the hidden requests, and keeping the workflow working over time.
It is also useful when the workflow is operational rather than test-oriented. If you need to run the same portal task thousands of times, direct API-call shortcuts, typed inputs and outputs, deployment, and agent-assisted repair become more important than a recorded test skeleton.
Playwright gives you the low-level power. Libretto packages that power into an agent workflow for producing and maintaining deterministic scripts.
Short FAQ
+Is Libretto replacing Playwright?
No. Libretto uses Playwright where browser automation is the right layer. The difference is workflow construction: Libretto gives coding agents a CLI for discovering, recording, validating, and maintaining scripts, and it can use direct in-session API calls when the browser reveals a better path.
+Is Playwright codegen bad?
No. Playwright codegen is a useful recorder and locator generator, especially for simple frontend tests. The problem is using raw generated output as a reliable browser automation. Engineers usually still need to add intent, assertions, fixtures, data handling, better waits, and long-term structure.
+Can Libretto output normal TypeScript?
Yes. Libretto workflows are plain code that teams can read, inspect, debug, version, and deploy.
+Does Playwright codegen capture API calls?
Playwright itself has strong network monitoring, request mocking, and API testing APIs. But the official codegen workflow is documented as recording browser actions, assertions, and locators, not as automatically converting observed network traffic into API-level workflow steps.
+When should I just use Playwright directly?
Use Playwright directly when your team already knows the app, controls the environment, and wants hand-authored browser tests or scripts. Use Libretto when the hard part is building and maintaining a reliable automation against a third-party or legacy website.
Try Libretto on a workflow codegen cannot simplify.
Pick a workflow with logins, fragile UI state, or hidden network calls, then record it with Libretto and inspect the generated script.