From Zero to Playwright. A Friendly Guide to Testing Your Web Apps

Intro to Playwright

The official site says: “Playwright enables reliable end-to-end testing for modern web apps.” I’ll be honest — testing frameworks weren’t exactly my best friends in past projects. Tight budgets and tight deadlines meant a lot of manual testing (and a love–hate relationship with Browserstack). So when I first heard about Playwright, I wasn’t sure if it would actually make testing easier — or just add another layer of things to worry about.

Real-world example and case use

Imagine you’ve just built a login page for your app. Normally, you’d open the browser, type a username and password, click “Login,” and check if it works — again and again after every update. With Playwright, you can automate that whole process.

You write a small script that launches a browser, goes to your site, fills out the form, clicks the button, and checks whether the dashboard loads correctly. Every time you make a change in your app, Playwright can re-run those steps automatically.

It’s not just about saving time — it’s also about consistency and catching bugs early. For example, if a CSS change accidentally hides the “Login” button or your backend suddenly returns an error, Playwright will spot it before your users do.

In larger projects, this means your app’s critical user flows — sign-up, checkout, navigation — stay stable even after refactors or updates.

Okay, Playwright — you win. Why didn’t I start testing earlier? I could’ve dodged hundreds of 404s and 500s by now. Not sure if it was a mix of intimidation, laziness, or just plain boring… but not anymore!

Why Playwright

You’ve probably heard of other testing frameworks — Cypress, Selenium, Puppeteer, Vitest, or Jest. So what makes Playwright stand out?

• 1. True cross-browser support: Playwright works with Chromium, Firefox, and WebKit (Safari) out of the box
• 2. Handles modern web features like a pro: Pop-ups, iframes, file uploads, and multi-tab scenarios
• 3. Built for reliability: It automatically waits for elements to be ready before acting.
• 4. Fast: You can run tests across multiple browsers and devices in parallel, making your test suite super fast even with dozens of test files.
• 5. Developer experience: UI test recorder, trace viewer, and VS Code integration
• 6. Multi-language support: JavaScript, TypeScript, Python, Java, or .NET

How & where to use it?

Playwright runs outside your main app. Think of it like this: Your app is the stage. Playwright is the actor who opens the browser, clicks buttons, fills forms, and checks if the show goes smoothly.

For modern frontend apps (Vue, React, Nuxt, Next, ...)

You can install Playwright in your project folder, but it runs separately from your app’s build. You can install it with:

npm install -D @playwright/test
npx playwright install

Then you can create tests inside a tests/ or e2e/ folder, for example, I do have an animation in my H1 which starts with opacity 0, and then animates to opacity 1. If for any reason, the animation fails, my site would not display a visible heading to visitors. This test helps me make sure that, no matter what I update or break, the title is always visible.

// e2e/animation.spec.js
import { test, expect } from '@playwright/test';

test('heading is visible and fully opaque', async ({ page }) => {
  await page.goto('http://localhost:3000');
  const heading = page.locator('h1');
  await expect(heading).toBeVisible();
});

Run the test

You just need your local dev server running (like npm run dev), and Playwright will visit it just like a user would.

// server running
npm run dev

// runnig the test
npx playwright test

For backend-driven sites (WordPress, Craft CMS, Laravel, ...)

Same idea — Playwright doesn’t care how the site is built. As long as your website can run in a browser (localhost or staging URL), Playwright can test it. For example:

• You can run your local Laravel server (php artisan serve)
• Or your Craft CMS site on DDEV (ddev start)
• Then point Playwright to http://localhost:8080 (or whatever your local URL is)

🚀 CI/CD: Running Playwright Tests Automatically

Once your tests are ready, you don’t need to run them manually every time you push code. You can set up GitHub Actions to run Playwright tests automatically on every push, pull request, or even on a schedule.

// in the command line
mkdir -p .github/workflows

touch .github/workflows/e2e-tests.yml

Inside workflows/, create a file called e2e-tests.yml (the name can be anything, .yml or .yaml).

Here’s a simple example workflow for GitHub Actions:

// e2e-tests.yml
name: E2E Tests

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 22

      - run: npm install

      - run: npx playwright install --with-deps

      - run: npm run build

      - run: npm run preview &

      # 7. Run Playwright tests
      - run: npx playwright test

More: What Else Playwright Can Do?

Playwright isn’t just for checking if buttons and headings are visible. It’s a powerful automation tool that can do much more, even without writing tests manually — you can use Playwright’s codegen to record your actions and generate tests automatically as you interact with your site.

• Screenshots & Visual Testing:
  Capture screenshots during tests to compare against previous versions and catch UI regressions.
• PDF Generation:
  Save pages or reports as PDFs automatically.
• Form Submissions & File Uploads:
  Automate filling out forms, uploading files, and verifying responses.
• Network Interception & Mocking:
  Simulate API responses or block certain requests to test error states without touching real servers.
• Multi-Browser & Device Testing:
  Test across Chromium, Firefox, and WebKit, and even emulate mobile devices.
• Recording & Debugging:
  Use Playwright’s codegen to generate tests automatically while you interact with the site, then tweak them for production use.

What to learn next?

This was a basic guide to get you started with testing using Playwright. Next, I would definetly be playing with Playwright’s codegen and all the other things Playwright can do.

• Agents, Annotations, command line, configuration, emulation, fixtures, retries, and more

Official documentation: Playwright Docs

TL;DR

• You install Playwright as a dev dependency in a separate testing environment or in your main repo.
• It runs outside your app — not bundled or built into it.
• It can test any website, regardless of framework: Vue, React, Nuxt, Next, Laravel, WordPress, Craft CMS… you name it.
• It’s like having an automated user that checks if your site behaves as expected.