Your First Automated Test in 10 Minutes

You don't need to understand frameworks, design patterns, or CI/CD to write your first automated test. You just need a browser and a few lines of code.

What We're Building

A test that opens a website, checks the page title, and verifies a link exists. Simple, but it teaches the fundamentals that every automated test shares.

Step 1: Set Up (2 Minutes)

Make sure you have Node.js installed. Then run:

mkdir my-first-test && cd my-first-test
npm init -y
npm install @playwright/test
npx playwright install chromium

Step 2: Write the Test (3 Minutes)

Create a file called example.spec.js:

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

test('homepage has the right title', async ({ page }) => {
  await page.goto('https://playwright.dev');

  // Check the page title
  await expect(page).toHaveTitle(/Playwright/);

  // Find the "Get started" link and check it's visible
  const getStarted = page.getByRole('link', { name: 'Get started' });
  await expect(getStarted).toBeVisible();
});

Step 3: Run It (1 Minute)

npx playwright test

You should see something like:

Running 1 test using 1 worker
  ✓ example.spec.js:3:1 › homepage has the right title (2.1s)
  1 passed (3.2s)

That's it. You just wrote and ran an automated test.

What Just Happened

Let's break down what each line does:

1. page.goto() — Opens a URL in a browser. Like typing an address in Chrome.
2. expect(page).toHaveTitle() — Checks the page title matches a pattern. This is an assertion — the test fails if this isn't true.
3. page.getByRole() — Finds an element by its accessibility role. This is a locator — it's how tests find things on the page.
4. expect(...).toBeVisible() — Another assertion: the element must be visible.

Every automated test follows this pattern: navigate → find → assert. The frameworks differ in syntax, but the shape is always the same.

What to Try Next

Now that you have a working test, try changing it:

• Navigate to a different site
• Check for different text on the page
• Click a link and verify the new page
• Fill in a form field

Each change teaches you something new about how automation works. Break things on purpose — the error messages are part of the learning.

Common First Mistakes

Hardcoding waits. Don't add await page.waitForTimeout(3000). Modern frameworks handle waiting automatically. If your test needs a manual wait, something else is wrong.

Brittle locators. Don't find elements by CSS class names like .btn-primary. Classes change. Use roles, text content, or test IDs instead.

Testing too much at once. One test should check one thing. If your test scrolls through five pages and checks twenty elements, split it up.