My Experience Using Playwright for E2E Testing

I’d heard about testing tools before. Selenium, Cypress, the usual suspects. But Playwright? That name only popped up on my radar in early 2025, and its GitHub popularity was exploding.

When I started working on my final project, I went with Cypress first. It has a solid reputation in software quality assurance, and everyone seemed to recommend it. Cypress has this feature called Cypress Studio that lets you record tests interactively. You click buttons, fill forms, navigate pages, and boom, it generates test code automatically.

Sounds perfect, right?

Why I moved away from Cypress

Not quite. Cypress Studio felt overwhelming. The UI threw too much at me at once. Menus I didn’t understand. Options I didn’t need. Plus, Cypress installed a separate testing application that ate up disk space, even though I only needed basic E2E testing features.

I started looking for alternatives. Spent time on Reddit threads, watched YouTube reviews, and eventually landed on Playwright.

What makes Playwright different

Playwright has a similar feature to Cypress Studio called Codegen. But here’s the thing: Codegen actually works the way you’d expect it to. It’s mature, not experimental. I watched one short tutorial and immediately understood how to use it.

The best part? Playwright integrates directly with VS Code. No separate application. No context switching. You test in the same environment where you write code. That integration feels seamless in a way Cypress never did.

How Codegen works

Using Codegen is straightforward. You run this command:

npx playwright codegen http://localhost:3000

Playwright opens a browser and watches everything you do. Click a button? It records that. Type in a field? Recorded. Scroll down the page? Yep, recorded too. As you interact with your app, it generates test code in real time.

Here’s what the output typically looks like:

import { test, expect } from '@playwright/test';

test('basic test', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await page.getByRole('button', { name: 'Login' }).click();
  await page.getByPlaceholder('Email').fill('test@example.com');
  await page.getByPlaceholder('Password').fill('yourpassword');
  await page.getByRole('button', { name: 'Submit' }).click();
});

You copy this into a .spec.ts file and run it:

npx playwright test

That’s it. Your test runs.

Final thoughts

Finding Playwright felt like a relief. Codegen particularly impressed me because it doesn’t try to do too much. It focuses on the core task and executes it well. No intimidating UI. No overwhelming feature set.

I hope more tools adopt this philosophy. Make the essential features accessible. Keep the learning curve gentle. Let people get work done without feeling lost.

Playwright does exactly that.