Playwright / Puppeteer Script Generator
Stack browser-automation actions visually and instantly emit a complete, runnable Playwright or Puppeteer script in JavaScript or Python.
Generated Script
Professional Insights & Guide
How the visual action list maps to Playwright/Puppeteer API calls, and the failure points to expect.
Action → API Mapping
Every action in the builder maps to a real framework call: Go
to URL emits
page.goto(), Click
emits
page.click(selector),
Type emits
page.fill(selector, text)
(Playwright) or
page.type()
(Puppeteer), Wait emits a timeout, Assert reads the body text
and throws if the expected string is missing, Screenshot
writes a PNG, and Press Key sends a keyboard event. The
generator also adds launch boilerplate — Playwright's
chromium.launch() or
Puppeteer's
puppeteer.launch() —
plus browser.close() so
the emitted file runs end-to-end.
Troubleshooting & Edge-Case Failure Points
- Escaping: single quotes inside text values are escaped so generated strings never break the output file.
- Assertions that match text appearing in an iframe will fail — body text excludes iframe documents.
- Puppeteer has no official Python binding, so Python output always targets Playwright's sync API.
- Empty selectors or missing values produce an inline warning instead of silently emitting broken code.
Detailed Step-by-Step Instructions
- Choose JavaScript or Python, then pick Playwright or Puppeteer for JS output.
- Build the flow: add actions, select a type, fill the selectors, text, URLs, wait times, or keys.
- Reorder with the up/down arrows and delete mistakes with the remove button — the script regenerates live.
-
Copy the highlighted output into a file, run
npm install playwright(orpip install playwright), and execute it.
Informative Guides & Helper Articles
How to Use the Playwright Script Generator
Generates robust Playwright scripts from described flows - role-based selectors and auto-waiting baked in.
- Describe the flow in steps (open, fill, click, expect).
- Generate the script with best-practice selectors and waits.
- Run; adjust selectors against your real DOM.
Why Selectors and Waits Decide Stability
Flaky suites trace to two sins: bad selectors (nth-child chains that break on redesign - prefer getByRole, getByLabel) and manual sleeps (the anti-pattern; auto-waiting plus waitForResponse express intent). Structure that scales: page objects past 3 flows, context isolation over shared sessions, and locator assertions which auto-retry. Trace failures with --trace on - the trace viewer answers most "works locally" mysteries in one timeline.
Playwright Script Generator FAQ
Why are my tests flaky?
Usually sleeps racing slow responses or brittle CSS. Auto-waiting assertions plus role-based selectors remove the races.
Which selector should I prefer?
getByRole and getByLabel first - they test accessibility too. testid when text is volatile. Avoid nth-child chains.
CSS or Playwright locators?
Playwright locators auto-wait and survive refactors; raw CSS is the fallback, not the default.