Playwright in 30 Minutes: Your First Test Without the Fluff

Introduction

In my previous blog, I shared why I’m learning Playwright in 2026 and why I believe it’s one of the most exciting tools in modern test automation.

Now it’s time to get our hands dirty.

If you’re completely new to Playwright, don’t worry. This guide is designed to help you get from zero to your first successful test in about 30 minutes.

No framework architecture.

No advanced concepts.

No “let’s build an enterprise automation framework” discussions.

Just one goal:

Write your first Playwright test and see it pass.

What is Playwright?

Playwright is an open-source end-to-end testing framework created by the team at Microsoft Playwright.

It allows testers and developers to automate modern web applications across multiple browsers including:

• Chromium (Chrome, Edge etc.)
• Firefox
• WebKit (Safari)

Some reasons Playwright has become so popular:

• Built-in auto-waiting
• Fast execution
• Cross-browser support
• Powerful debugging tools
• Easy setup compared to older automation frameworks

Most importantly, it helps reduce one of the biggest frustrations in automation:

Flaky tests.

Before We Begin: What You’ll Need

To follow this tutorial, you’ll need:

• A laptop running Windows, macOS, or Linux
• Basic command-line knowledge (copy-paste is enough!)
• Node.js installed
• VS Code

Don’t worry if you’ve never installed Node.js before. Let’s do that first.

What is Node.js and npm?

Playwright runs on top of JavaScript and TypeScript.

To use it, you’ll need Node.js.

Think of Node.js as the engine that allows JavaScript to run outside the browser.

When Node.js is installed, you also get npm (Node Package Manager), which helps install libraries and tools such as Playwright.

Installing Node.js

Visit: Node.js Official Website

Download the latest LTS (Long-Term Support) version and complete the installation.

Once installed, open a terminal or command prompt and run:

node --version

You should see something like:

v22.x.x

Next verify npm:

npm --version

Example output:

10.x.x

If both commands return version numbers, you’re ready to go.

 

Installing VS Code

Visit: VS Code Official Website

 

Step 1: Create Your First Playwright Project

Create a folder for your project in your preferred location. And open the folder in VS Code.

 

It’s totally empty right? Chill, we can do lot of stuff in a jiffy!

Now open a terminal and run this command:

npm init playwright@latest

Playwright will ask a few questions, Move the down arrow and select “JavaScript”, we are going to use JS.

 

You’ll see something similar to:

For other questions, keep the default.

Within a minute, you’ll have a fully configured Playwright project.

What Just Happened?

Playwright created:

playwright.config.js
tests/
package.json

Think of these files as your starter kit.

You don’t need to understand every file yet.

For now:

package.json

Contains project dependencies.

tests folder

Stores your test scripts. you can already see an example file inside (example.spec.js)

playwright.config.js

Controls how Playwright runs your tests.

Understanding the Configuration File

Open:

playwright.config.js

You’ll notice settings such as:

use: {
  trace: 'on-first-retry',
}

and browser configurations.

For beginners, remember only one thing: This file controls global Playwright behaviour. We can change or remove based on our needs 🙂

We will explore it in future blogs. For now, leave it alone.

Step 2: Write Your First Test

Let’s automate a simple Todo application.

Create a new file under “tests” folder:

tests/todo.spec.js

and add:

const { test, expect } = require('@playwright/test');

test('add a todo item', async ({ page }) => {
  await page.goto('https://todomvc.com/examples/react/');

  const todoInput = page.locator('.new-todo');

  await todoInput.fill('Learn Playwright');

  await todoInput.press('Enter');

  await expect(
    page.locator('.todo-list li')
  ).toHaveText('Learn Playwright');
});

For now you can delete the example test file present there:

 

Understanding the Test

Let’s break it down.

Navigate

await page.goto(...)

Open the application.

Locate

page.locator(...)

Find an element.

Interact

fill()
press()

Perform actions.

Verify

expect(...)

Confirm expected behaviour.

Congratulations.

You have already covered the four building blocks of most UI automation tests.

Step 3: Run the Test

Execute:

npx playwright test

You should see output similar to:

3 passed

It’s one test, but ran in three different browsers.

Step 4: View the HTML Report

One of Playwright’s best features is its reporting.

Run:

npx playwright show-report

A browser window opens showing:

• Test results
• Execution details
• Screenshots
• Traces
• Debug information

When a test fails, this report becomes your best friend.

Helpful Resources for Beginners

Official Documentation

Playwright Documentation

The official docs are surprisingly beginner-friendly.

YouTube

Playwright Beginner Tutorials

Practice Sites

For learning automation safely:

• TodoMVC
• Sauce Demo
• The Internet by Herokuapp

These sites are commonly used for automation practice and experimentation.

 

Final Thoughts

Many people believe they need to understand an entire automation framework before writing tests.

You don’t. You only need enough knowledge to create your first successful test.

Everything else comes through practice, curiosity, and repetition.

Today, you’ve installed Playwright, created a project, written a test, and viewed a report.

That’s a pretty good start for 30 minutes.

You don’t need to understand everything to write your first useful test.

Let’s explore and keep learning… Watchout this space 🙂