Showing posts with label Playwright. Show all posts
Showing posts with label Playwright. Show all posts

Wednesday, August 19, 2026

14 Painful Playwright Mistakes to Avoid


Someone on r/Playwright asked a good question: what painful mistakes should you avoid? Forty-plus engineers answered — people running Playwright against real production, not demos. I read the whole thread and pulled out the mistakes that came up again and again.

None of this is theory. It's scar tissue. Most of these are the difference between a suite that works on your laptop and one that survives CI, real traffic, and a login wall. Here they are, each with the fix the thread landed on.

01 Hard-coded waits everywhere

The most-cited mistake by a mile: waitForTimeout(3000) sprinkled through the suite to "make it stable." It passes locally because your machine is fast, then breaks in CI because the container is slower. You've traded a real fix for a timer that's wrong on both ends — too slow when things are fine, too fast when they aren't.

FIX → Trust Playwright's auto-waiting. Use web-first assertions like expect(locator).toBeVisible() and let the framework wait for actionability.

02 Brittle selectors

Targeting something like div.css-1a2b3c > span:nth-child(3) is asking for pain. That selector encodes your DOM's exact shape and a hashed class name — both change the moment a developer touches the component. Your test breaks, and it isn't even a real bug.

FIX → Use getByRole, getByText, and getByTestId. They describe intent, not structure, so they survive UI refactors.

03 Over-abstracting the Locator API

This one drew a crowd. Playwright's Locator API is already rich, but people wrap it in layers of helpers anyway — defining a locator, then an accessor method, then a method that calls the accessor. One commenter described building a beautiful page-object hierarchy in year one and spending year two deleting it. The worst offenders come from Selenium and bring fifteen years of habits to a framework that already does the work.

FIX → Default to Playwright's built-ins. Delete a wrapper before you add one — earn every layer of abstraction.

04 Trusting storageState naively

A sharp production story: relying on storageState while the app rotates tokens or triggers step-up auth mid-session. Tests pass in staging and fail live, because the real auth flow only kicks in against production. Anything behind a real login is exposed to this.

FIX → Keep saved auth ephemeral, not permanent. Add a cheap validity check — hit an API endpoint and expect a 200 — before the suite leans on it.

05

05 Running the full suite serially in CI

Someone ran their suite serially for nine months to "save resources." The result: 90-minute pipelines, and a 1-in-50 flake dragging average merge time to roughly 2.5 hours. Moving to parallel workers with proper isolation cut it to twelve minutes — and made flakes diagnosable on their own instead of as a cascade.

FIX → Run parallel workers with real test isolation from day one. Serial-to-save-money almost always costs more.

06 Building test data through the UI

Clicking through signup to create a user for every test is slow, flaky, and couples your setup to the very UI you're testing. When it breaks, the whole run cascades and you can't tell setup failures from real ones.

FIX → Pre-create users and state via API, not the UI. Every test gets its own clean data, and failures stay isolated.

07 Screenshot diffs full of noise

A first visual baseline that picked up a relative timestamp ("2 hours ago") and a chart that animated over 800ms. Every diff came back 100% noise, and the team learned to ignore visual failures — which defeats the point of having them.

FIX → Make the page deterministic first. Freeze the clock in beforeEach, set animation-duration: 0, and mask anything backed by a third-party widget.


08 Treating test code as second-class

The most underrated point in the thread: suites die from neglect more often than from any selector strategy. Tests that never get reviewed or refactored rot fast. A test goes red on a Friday, someone adds test.skip() with a comment nobody revisits, and after enough of those the suite is a vibes-only signal.

FIX → Review, own, and prune test code like production code. Discipline beats framework choice every time.

09 Shipping codegen output as-is

Record-and-playback is genuinely useful, but the generated code is a starting point, not a suite. Ship it raw and you inherit brittle selectors and hard waits by default — the exact things at the top of this list.

FIX → Treat codegen as a scaffold. Rewrite the selectors and structure before you commit it.

10 Ignoring production realities

Real traffic brings slower API responses, rate limits, and captcha or MFA challenges that never existed in lower environments. A suite tuned only against a quiet staging box falls over the first time it meets production conditions.

FIX → Simulate production-like load before release, monitor slow endpoints, and plan for the auth challenges you'll actually hit.

11 Wasting type safety in TypeScript

If you're on TypeScript but writing it like untyped JavaScript — any everywhere, no typed page objects, no typed fixtures — you've kept the compile step and thrown away the reason for it.

FIX → Type your fixtures, helpers, and data. Let the compiler catch the mistakes before the test run does.

12 Over-testing

Chasing a coverage number with low-value tests that don't map to real user flows. Each one is a maintenance liability forever, and together they slow the suite and bury the failures that matter.

FIX → Cover the flows that matter and skip the vanity ones. Fewer, meaningful tests beat a wall of green noise.

13

Blindly relying on AI-generated code

AI writes Playwright fast, and that's exactly the trap. The output looks plausible, so it lands without a second read — and quietly ships the brittle selectors and hard waits from the top of this list. When an agent generates your suite and nobody reviews it, you don't have tests, you have a pile of guesses that happened to pass once. The thread's take was blunt: the discipline that keeps production code clean matters more than whatever tool wrote it.

FIX → Treat AI output like a junior dev's pull request. Read every line, prune it, and make sure you understand it before it lands.

14

Not learning Playwright properly in the first place

You can absolutely piece this together from Reddit threads, docs, and trial-and-error in CI. It works — slowly, and usually after you've made most of the thirteen mistakes above yourself. The faster path is a structured one that covers the whole picture: end-to-end, API testing, and the AI and MCP side of modern automation, in the order that actually builds on itself.

FIX → Learn it in one structured path — my Playwright TypeScript Automation Testing: E2E, API, AI, MCP course.

The one that split the room

Page objects: discipline or dead weight?

The thread agreed on almost everything above. On one topic it went to war: the Page Object Model. Half the room called skipping POM the cardinal sin. The other half argued that fixating on OOP layers rots suites just as fast — factory functions are simpler, and heavy class hierarchies fight you when the app changes constantly.

The most interesting version of the argument tied it to AI: when an agent is generating your test code and your pages change weekly, deep abstraction becomes a liability, not an asset. There's no settled answer here — which is exactly why it's worth thinking through for your own suite instead of copying a template. Where do you land?

If there's a thread running through all twelve, it's this: the framework isn't your problem. Determinism, isolation, and treating tests like real code are. Get those right and most of this list never happens to you.

I go deep on the right way to do this — auto-waiting, resilient locators, API-driven setup, and CI — in my Playwright with TypeScript course, including the AI and MCP side of modern test automation. If this list was useful, the course is the structured version of it. Check it out here.

Friday, August 14, 2026

How to Install Claude Code (CLI + VS Code Extension) for Playwright MCP

Before You Start: Installing Claude Code

The lectures in this section use Claude Code to drive the Playwright MCP server. Before the next video, take five minutes to install it and sign in. Everything else in this section builds on these steps.

Read this first

Course URL playwright.testautomationtv.com

Claude Code requires a paid Anthropic account — a Pro, Max, Team, or Enterprise Claude subscription, or a Claude Console (API) account. The free Claude.ai plan does not include Claude Code access.

I am telling you this up front so it is not a surprise halfway through an install. If you would rather not subscribe, read the section "If you are using a different AI tool" at the bottom of this article — the Playwright MCP is an open protocol and it is not tied to Claude.

You already installed Node.js in Section 1. If you skipped that lecture, install the Node.js LTS version now — the npm install option below needs Node.js 22 or later.

Step 1 — Install the Claude Code CLI

Open a terminal and run the command for your operating system.

macOS, Linux, or WSL:

curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell:

irm https://claude.ai/install.ps1 | iex

If you are in PowerShell, your prompt starts with PS C:\. If it starts with C:\ without the PS, you are in the older Command Prompt — open PowerShell instead and run the command above.

If you prefer npm (any operating system, Node.js 22 or later):

npm install -g @anthropic-ai/claude-code

Do not put sudo in front of the npm command. It causes permission problems later.

Step 2 — Confirm the install worked

claude --version

You should see a version number printed back, something like 2.1.211 (Claude Code). If you see command not found, close the terminal, open a new one, and try again — the installer adds Claude Code to your PATH, and an already-open terminal will not have picked that up.

If it still fails, run this command, which prints a diagnostic report:

claude doctor

Step 3 — Sign in

From your project folder, start Claude Code:

claude

The first run opens your browser and asks you to authorise the account. Complete that, return to the terminal, and you are logged in. You only do this once per machine.

Step 4 — Install the VS Code extension

Claude Code VS Code Extension


You need VS Code 1.94.0 or higher.

  1. In Visual Studio Code, press Ctrl+Shift+X on Windows and Linux, or Cmd+Shift+X on Mac, to open the Extensions view.

  2. Search for Claude Code.

  3. Click Install on the extension published by Anthropic.

  4. If the extension does not appear afterwards, restart VS Code, or open the Command Palette and run Developer: Reload Window.

Open the panel by clicking the Claude Code icon in the Activity Bar on the left, or by clicking Claude Code in the status bar at the bottom right. Sign in when prompted — same account as Step 3.

An important point about the extension

The VS Code extension and the command-line tool are two separate things. The extension gives you the chat panel inside the editor. It does not give you the claude command in your terminal.

In the next lecture we register the Playwright MCP server by running a terminal command that starts with claude. That command comes from the CLI you installed in Step 1, so please do not skip Step 1 and install only the extension.

Your checklist before the next lecture

  • claude --version prints a version number

  • Running claude in a terminal opens an interactive session

  • The Claude Code panel opens inside VS Code and shows you as signed in

If all three are true, you are ready.

One thing that will save you time later

When you register an MCP server, an already-open Claude session will not always see it. If claude mcp list shows the server as connected but your assistant cannot reach it, close the session and start a new one. This comes up again later in the section, and it is almost always the explanation.

If you are using a different AI tool

The Model Context Protocol is an open standard, and Playwright's MCP server is not tied to Claude. Other agentic coding tools support MCP as well — some register a server with a single command like the one you will see in the next lecture, and others expect you to edit a configuration file directly.

The concepts in this section — what the MCP server does, how it reads the accessibility tree, how to turn an exploration into a real test file — apply the same way regardless of which assistant you use. The commands on screen are the Claude Code versions, so check your own tool's documentation for its equivalent registration step.

Official documentation

Installation steps change from time to time. If a command in this article does not work, the current instructions are always here:

See you in the next lecture.

Naeem Malik — Course URL playwright.testautomationtv.com

Saturday, August 8, 2026

Playwright + TypeScript, from Zero to AI-Powered E2E Testing

Playwright with Typescript Udemy Course Overview


I just launched a new Udemy course, "Playwright with TypeScript – Automation Testing, E2E, API & AI/MCP," and I wanted to write a bit about why I built it, what's inside, and where you can grab the code that goes along with every lecture.

🚀 Enroll in the course on Udemy  |  💻 Get the companion code on GitHub

Why Playwright, and why now?

Playwright has quietly become one of the most reliable tools for end-to-end testing — fast, resilient to flakiness, and genuinely pleasant to write tests in once you get past the first few locators. But most tutorials stop at "click a button, assert some text." Real test suites need to survive real applications: dialogs, iframes, drag-and-drop, shopping carts, custom fixtures, and CI pipelines that don't fall over every time the UI shifts a pixel.

This course is built around that gap. It starts from the fundamentals and works all the way up to using AI — specifically the Playwright MCP server and Claude Code — to generate and even self-heal failing tests inside GitHub Actions.

What you'll learn

  • Writing reliable E2E tests with Playwright + TypeScript, from locators to assertions
  • Handling real-world UI patterns: checkboxes, radios, drag-and-drop, dialogs, iframes
  • Building maintainable test suites with custom fixtures and the Page Object pattern
  • Testing a full shopping cart flow end-to-end
  • Debugging with traces, the HTML reporter, and soft assertions
  • Generating and healing tests with AI, using the Playwright MCP server and Claude Code
  • Wiring up a self-healing CI workflow so failing tests fix themselves via GitHub Actions

The companion repo

Every lecture has real, working code behind it, all in one place:

github.com/naeemakram/playwright-typescript-e2e-ai

tests/
  cart/            # Full shopping cart E2E test suite
  *.spec.ts        # Section-by-section lecture exercises
specs/             # AI-generated test plans (used with the Playwright MCP planner)
.github/workflows/ # CI, including an AI-powered self-healing test workflow
playwright.config.ts  # Base URL, projects, tracing, and reporter setup
.mcp.json          # Playwright MCP server config used for AI test generation

Commits roughly track the course section-by-section, so you can check out the history and watch each feature get built incrementally rather than just staring at a finished pile of code. Clone it, follow along, and — most importantly — break things and fix them. That's still the fastest way to actually learn a testing tool.

Getting started with the code

npm install
npx playwright install
npx playwright test

And once a run finishes, open the HTML report to see exactly what happened:

npx playwright show-report

Who this is for

If you've never written an automated test before, you'll be fine — the course starts at the very beginning. If you already know Playwright but haven't touched fixtures, Page Objects, or CI, there's a lot here for you too. And if you're curious how AI tooling like MCP and Claude Code fits into a real test workflow rather than just being a novelty, the later sections are built specifically for that.

Let's go

Enroll in the course on Udemy and pair it with the GitHub repo as you go. If you find it useful, a rating or review genuinely helps other learners find it — thank you in advance! ⭐⭐⭐⭐⭐

Friday, July 24, 2026

How to Migrate Auto Web Tests from TestComplete to Playwright (Complete ROI & Strategy Guide)

Executive Summary: Planning a TestComplete to Playwright migration? Moving web test automation off expensive, legacy commercial software to modern open-source testing frameworks like Playwright is one of the highest-ROI technical initiatives a QA organization can execute. This guide outlines the financial ROI argument, licensing cost savings, and four actionable technical migration strategies.

Udemy Course: Playwright TypeScript Automation Testing

The Hidden Costs & Technical Debt of TestComplete Web Automation

Poorly structured test automation code in legacy engines like SmartBear TestComplete creates severe technical debt. Because commercial testing tools tightly couple script execution, node configurations, dynamic object recognition maps, and license keys, unrefactored web test suites quickly cause continuous integration (CI) bottlenecks:

  • Name Mapping Bloat: Deeply nested dynamic object paths and missing wildcard locators cause cascading test failures across regression suites whenever UI components change.
  • Flaky Test Execution & Synchronization Bottlenecks: Hardcoded static delays (aqUtils.Delay) inflate test runtimes and waste expensive execution runner nodes. Missing dynamic wait hooks lead to persistent flaky test runs.
  • Resource & Memory Leaks in CI/CD Pipelines: Unreleased COM/OLE objects or unmanaged target application processes degrade continuous testing nodes during large parallel test runs.
  • Expensive Licensing Constraints: Node-locked and floating license keys restrict how many parallel runners your CI/CD pipeline can run simultaneously without ballooning software budgets.

TestComplete vs Playwright: ROI & Licensing Cost Comparison

Replacing TestComplete with Playwright drastically improves your test automation ROI by eliminating recurring license fees and shifting test ownership directly into modern developer workflows:

Evaluation Criteria SmartBear TestComplete (Legacy) Microsoft Playwright (Modern Open-Source)
Software Licensing Cost $5,000–$10,000+ / seat / year 100% Free Open-Source (Apache 2.0)
CI/CD Parallelization Paid execution licenses required per pipeline node Uncapped parallel runs in Docker & GitHub Actions
Developer Adoption & IDE Support Siloed inside proprietary IDE / dedicated QA seats Native TypeScript, C#, and Python in VS Code
Test Synchronization Strategy Manual aqUtils.Delay & explicit wait methods Built-in web-first auto-waiting assertions

4 Strategies to Migrate from TestComplete to Playwright

1. The Strangler Fig Migration Pattern (Recommended)

Avoid high-risk "big bang" rewrites by running both test automation frameworks side-by-side inside your continuous deployment pipeline:

[ Continuous Integration Pipeline ]
       │
       ├──► TestComplete (Legacy Regression Suites - Frozen)
       │
       └──► Playwright   (New End-to-End Tests - Growing)
  • Freeze Legacy Scripting: Enforce an explicit team policy: No new web automation tests are written in TestComplete. All new feature testing is built in Playwright.
  • Page Object Model (POM) Refactoring: Translate legacy XML-based NameMapping repositories into modular Playwright Page Objects using resilient, user-centric locators (e.g., page.getByRole()).
  • Phased License Sunset: Progressively shift smoke test suites and critical user journeys over to Playwright until TestComplete renewal dates arrive.

2. AI-Assisted Code & Locator Conversion

If your team has existing JavaScript/JScript test scripts in TestComplete, use AI coding tools (such as ChatGPT, Claude, or GitHub Copilot) to convert legacy code into clean TypeScript Playwright scripts:

// ❌ Legacy TestComplete JScript (Brittle dynamic object aliases & hardcoded delays)
Aliases.pageApp.formLogin.btnSubmit.Click();
aqUtils.Delay(5000);

// ✅ Modern Playwright TypeScript (Auto-waiting & accessibility locators)
await page.getByRole('button', { name: 'Submit' }).click();

3. Playwright Codegen for Keyword Test Suites

For teams relying on TestComplete visual Keyword Tests, direct code translation isn't an option. Use Playwright’s built-in code generator to re-record user flows into modern code fast:

npx playwright codegen https://your-app-url.com

4. Optimizing Test Setup with Playwright API Contexts

Legacy E2E tests waste time navigating multi-step UI forms just to prepare test data. Playwright allows you to handle state setup via lightweight API requests:

  • Bypass UI-driven login steps by sending authentication calls through Playwright's native request context.
  • Inject session tokens and cookies straight into browser storage using browserContext.addCookies().
  • Reduce test execution times by 60–80% compared to traditional TestComplete UI workflows.

Summary: Modernizing Your QA Pipeline

Replacing TestComplete with Playwright isn't just about saving thousands of dollars in licensing fees—it's about building a fast, scalable, open-source test automation strategy that developers and QA engineers love working with.

Ready to Master Playwright Automation?

Master the transition from legacy automation tools to production-ready Playwright frameworks. Learn real-world Page Object Models, parallel CI/CD integration, and advanced locator strategies.

🚀 Explore the Complete Playwright Course