标签：#playwright

Playwright has excellent tooling around browser automation, but most of the ecosystem still treats it as a test framework. For teams running AI coding agents and automated browser workflows, there is a different set of requirements: browser automation ↓ session persistence across runs ↓ debuggable traces when things go wrong ↓ parallel execution across CI shards The Playwright CLI directly addresses these gaps. It ships as a standalone npm package and exposes every browser operation as a CLI command; open, click, type, snapshot - without requiring a Node.js script or test runner. npm package: @playwright/cli GitHub: https://github.com/microsoft/playwright-cli The current implementation focuses on: session persistence with named instances and portable state video and trace recording built into every session CI sharding for parallel execution at scale session persistence The default behaviour keeps browser state in memory. Cookies and localStorage are preserved between CLI calls within the session, but cleared when the browser closes. For repeatable workflows, that breaks down fast — logging into an application before every run wastes time and introduces flakiness. Named sessions let you run multiple browser instances simultaneously and address them by name: playwright-cli -s=admin open https://app.example.com/admin playwright-cli -s=checkout open https://app.example.com/checkout Each session is an isolated browser instance. An agent can orchestrate workflows across multiple authenticated contexts without state leaking between them. The goal is straightforward: the same CLI binary should be able to maintain independent browser contexts for parallel workflows without requiring environment-specific configuration. The critical piece for CI and agent reuse is state persistence: log in once playwright-cli -s=admin open https://app.example.com/login playwright-cli -s=admin fill "#username" "admin" playwright-cli -s=admin fill "#password" "$ADMIN_PASS" playwright-cli -s=admi

I automated my Gumroad product screenshots with Playwright I recently started packaging a few small frontend projects as digital products, and one surprisingly annoying part was preparing product screenshots. Manual screenshots quickly became messy: different browser sizes inconsistent cropping blurry images mobile screenshots were easy to get wrong Gumroad needed a square thumbnail every update meant taking screenshots again So I built a small local screenshot workflow with Next.js and Playwright. The workflow captures: desktop screenshots mobile screenshots square thumbnail images consistent PNG outputs route status checks basic console error reporting basic horizontal overflow checks The basic command flow is: npm run build npm run start npm run screenshots The script reads a simple config file, opens the configured local routes, captures each screenshot with consistent viewport settings, and exports the images into a predictable folder. For example: screenshots/gumroad/ landing.png dashboard.png template-preview.png mobile-preview.png thumbnail.png I found this especially useful when preparing Gumroad product galleries, because I could regenerate all product images after every UI change instead of taking screenshots manually. This is not a hosted screenshot service. It is just a local source-code workflow for people who want to generate product screenshots from their own Next.js pages. I packaged the workflow as a small Gumroad product here: https://remix410.gumroad.com/l/screenshot-automation-kit Curious how other developers handle product screenshots. Do you take them manually, use Playwright/Puppeteer, or use a design tool workflow?

In Chapter 2 we wrote our first tests and hit two bugs. Before we add more, we need the one skill everything else rests on: finding elements reliably . Get this right and your tests survive redesigns; get it wrong and they break every sprint. Code for this chapter is tagged ch-03 in the repo: https://github.com/aktibaba/playwright-qa-course — see src/tests/ui/locators.spec.ts . Locate the way a user perceives The brittle instinct is to grab elements by their structure — CSS classes, nth-child , XPath. All of that changes the moment a developer touches the markup. Playwright's recommended locators instead target what a user (and a screen reader) perceives: the role, the label, the visible text. Use them in this order of preference: getByRole — the role + accessible name (covers the vast majority of cases) getByLabel — form fields by their <label> getByPlaceholder — inputs without a label getByText — non-interactive content getByTestId — a deliberate data-testid , only when nothing semantic fits Here's the top of the priority list, live against Inkwell's home page: import { test , expect } from " @playwright/test " ; test ( " prefer role-based locators over CSS " , async ({ page }) => { await page . goto ( " / " ); await expect ( page . getByRole ( " button " , { name : " Global Feed " })). toBeVisible (); await expect ( page . getByRole ( " link " , { name : " Sign up " })). toBeVisible (); await expect ( page . getByRole ( " heading " , { name : " inkwell " })). toBeVisible (); }); getByRole("button", { name: "Global Feed" }) asserts two things at once — that an element with the button role exists and that its accessible name is "Global Feed". If a dev swaps the <div class="feed-btn"> for a real <button> , this locator keeps working; a CSS selector wouldn't. Strict mode is your friend Playwright locators are strict : if a locator matches more than one element, the action throws instead of silently picking the first. That catches ambiguous tests before they pick the

In Chapter 1 we argued that automation fails from a lack of structure , not a lack of tooling — and we met Inkwell , the dockerized app we test against. Now we install Playwright + TypeScript and write our first UI and API tests, deliberately simple. We'll also hit two real bugs along the way. I'm leaving them in on purpose — they're the exact problems the framework we build later is designed to prevent. Code for this chapter is tagged ch-02 in the repo: https://github.com/aktibaba/playwright-qa-course Before you start Make sure Inkwell is running (from Chapter 1): cd sut docker compose up -d --build --wait # web :3000, api :3001/api Install Playwright + TypeScript From the repo root: npm install -D @playwright/test typescript @types/node npx playwright install chromium That's it — Playwright bundles its own test runner, assertion library, and TypeScript support. No extra config to make .ts test files work. A minimal config — not a framework yet Two small files keep us honest from day one. First, never hard-code URLs in tests — put them in one place: // src/utils/env.ts export const env = { /** Inkwell SPA (nginx) — the UI base URL. */ webURL : process . env . WEB_URL ?? " http://localhost:3000 " , /** Inkwell API base, including the /api prefix. */ apiURL : process . env . API_URL ?? " http://localhost:3001/api " , } as const ; Then the Playwright config. We split tests into two projects — a fast api project and a Chromium ui project — because API tests need no browser and should run in milliseconds: // playwright.config.ts import { defineConfig , devices } from " @playwright/test " ; import { env } from " ./src/utils/env " ; export default defineConfig ({ testDir : " ./src/tests " , fullyParallel : true , reporter : " list " , use : { trace : " on-first-retry " , screenshot : " only-on-failure " }, projects : [ { name : " api " , testDir : " ./src/tests/api " , use : { baseURL : env . apiURL } }, { name : " ui " , testDir : " ./src/tests/ui " , use : { baseURL : e

Welcome to the first chapter of a hands-on course where we build a production-grade Playwright + TypeScript automation framework — covering both API and UI testing — against a real, dockerized web app you run on your own machine. This isn't a "here are 5 Playwright tips" post. By the end of the series you'll have a framework with the same shape a real QA team ships: layered, parallel-safe, authenticating once and reusing the session, seeding data through the API and verifying it in the UI, and running sharded in CI. We build it one chapter at a time, and every line of code is in a public repo you can clone and run. Who this is for You can read basic JavaScript (variables, functions, async/await ). That's it. No Playwright or TypeScript experience required — we introduce both from zero. You've maybe written a few UI tests before and felt them turn into a tangle. This course is about the structure that prevents that. How the course works Each chapter is one post in this series, in order. Read them top to bottom. There's a companion GitHub repo — the single source of truth for all code: 👉 https://github.com/aktibaba/playwright-qa-course The repo carries one git tag per chapter ( ch-01 , ch-02 , …) so you can check out the exact state of the code at any point and compare it to what you have. Every chapter ends with what changed, so you can either build along or just read the diff. Get the code and run the app We don't test toy pages. The course runs against Inkwell — a small but real React + Express + PostgreSQL blogging app (articles, comments, tags, follow/favorite, JWT auth). It lives in the same repo under sut/ ("system under test") and ships as a one-command Docker stack with deterministic reset / seed endpoints, so your tests never race startup or fight flaky data. You'll need Node.js 18+ and Docker . # 1. Clone the course repo git clone https://github.com/aktibaba/playwright-qa-course.git cd playwright-qa-course # 2. Start the app (db + API + web), wait until eve

The test hung for 30 seconds. The response had already fired. One moved line fixed it. The test hung for 30 seconds, then timed out. The browser had received the response. The page had loaded. The data was there. The test was still waiting. The wizard I was writing a helper to walk through a 4-step booking wizard. After clicking "Next" on step 1, the page does a full navigation — window.location.href to step 2. Step 2 immediately loads doctor data from the API. The helper looked like this: await Promise . all ([ page . waitForURL ( /step=2/ ), step1Next . click ()]); await page . waitForResponse ( r => r . url (). includes ( ' /doctors ' )); Standard pattern: wait for navigation, then wait for the data request. Timeout. Every time. What I checked first The URL pattern. Maybe /doctors wasn't matching. Opened the network tab. The request was there: GET /api/v1/doctors , 200, 47ms. Correct URL, correct response. The page looked fine. The data was rendered. The test said it was waiting for a response that had already happened. Added waitForLoadState . Still hung. Added an explicit waitForSelector for an element that was clearly on the page. That passed. Then waitForResponse hung again. The response existed. The test couldn't see it. What was actually happening page.waitForResponse() is not a query. It doesn't look at what happened. It registers a listener — from that exact moment forward — and waits for the next matching response. The sequence in my code: Promise.all resolves when the URL changes to step=2 By the time the URL changed, step 2 had already loaded Step 2 had already sent and received /api/v1/doctors Then waitForResponse registered its listener Now it's waiting for the next /doctors response Which never comes Playwright doesn't buffer missed events. If the response fired before the listener was registered — it's gone. The fix await Promise . all ([ page . waitForURL ( /step=2/ ), page . waitForResponse ( r => r . url (). includes ( ' /doctors ' )), step1Next

There is a specific failure mode in AI-assisted QA work that most tooling discussions skip entirely, and it shows up earliest when you are working solo on a real engagement. Every new chat session is stateless. You paste the ticket, describe the feature, explain your severity logic, set up the context, and by the time the AI is actually useful, you have rebuilt your methodology from scratch for the third time that week. That is not a workflow problem you fix with better prompts. It is an architecture problem, and the fix is a skill file. QAJourney has a full breakdown of this system at qajourney.net/ai-qa-workflow-for-real-projects, including the actual skill files as free downloads. The short version: a skill file is a context document you load as a system prompt. It carries your test surface tiers, your three-path testing framework, your bug report format, your severity and priority logic, your Playwright conventions, and an explicit definition of what the AI does and does not get to call. Load it once per session. The AI operates inside your methodology from the first message instead of a blank slate. The local LLM layer solves a different problem. On a freelance or retainer engagement, tickets contain real product logic and real client data. Sending that to a cloud API on every session is a data exposure question whether or not it rises to a compliance issue. Running Ollama locally with the same skill file as system context keeps the engagement data on the machine. For the output quality required on QA tasks, current 7B to 14B models are sufficient. The cost at zero marginal per token makes it infrastructure rather than a service you pay by the session. The three-role setup in the workflow: engineer as judgment layer, cloud AI loaded with the skill file for complex reasoning and active session output, local LLM for lightweight tasks and client data work. The skill file is the constant across all three. The part that took time to internalize: AI dev teams already