Playwright Basics: Your First Test with Page, Test Structure, and Codegen

autonekoqa — Tue, 12 May 2026 14:21:59 +0000

If you are starting with Playwright, the first real hurdle is not syntax.

It is understanding three things clearly:

what the page object actually represents
how a test file should be structured so it stays readable
how to use Codegen without blindly trusting generated code

I wrote a longer version on Auto Neko here:

Playwright Basics — Your First Test: Page, Test File Structure & Codegen

This DEV version is the shorter, practical walkthrough.

What `page` really is

In Playwright, page is the browser tab you control in code.

That means when you write:

await page.goto("https://coffee.autoneko.com/");
await page.getByRole("link", { name: /login/i }).click();

you are telling Playwright:

open a real page
wait until it is actionable
perform the interaction like a user would

That mental model matters because a lot of beginner confusion comes from treating Playwright as "just a list of commands" instead of "a model of browser interaction".

A clean first test

Here is a simple first example:

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

test("open homepage and verify title", async ({ page }) => {
  await page.goto("https://coffee.autoneko.com/");
  await expect(page).toHaveTitle(/Neko Coffee/i);
});

This already teaches four important habits:

keep one clear scenario per test
always await browser actions
prefer Playwright assertions like toHaveTitle()
verify behavior, not just "the page opened"

A better structure than one giant script

Beginners often write long, flat test scripts.

A better pattern is:

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

test("user can open login page", async ({ page }) => {
  await test.step("Go to homepage", async () => {
    await page.goto("https://coffee.autoneko.com/");
  });

  await test.step("Open login page", async () => {
    await page.getByRole("link", { name: /login/i }).click();
  });

  await test.step("Verify login form is visible", async () => {
    await expect(page.getByRole("heading", { name: /login/i })).toBeVisible();
  });
});

Why this helps:

reports are easier to read
failures tell you which step broke
future you will hate the test less

Codegen is useful, but not sacred

Playwright Codegen is great for:

discovering selectors
recording rough flows
learning the API quickly

Run it with:

npx playwright codegen https://coffee.autoneko.com/

But after recording, clean the output.

Typical cleanup:

replace fragile selectors with getByRole() or getByLabel()
remove extra clicks
add assertions
rename the test so it describes user intent

Codegen should give you a draft, not the final version.

Common beginner mistakes

These are the ones I see most often:

putting everything into one test
using weak selectors when better accessible locators exist
copying Codegen output without refactoring
verifying too little
treating failures as "Playwright is flaky" when the real issue is poor test design

A good first practice path

If you want a sensible order for learning Playwright, I would go like this:

first test with page
locator basics
auto-waiting and actionability
web-first assertions
cleaner test data and reusable structure

The full step-by-step article, with examples and a more detailed breakdown, is here:

Read the full tutorial on Auto Neko

If this helps, the next article to read is:

Playwright Basics — Lesson 2: Auto-waiting, Actionability Checks, and Web-First Assertions

DEV Community: autonekoqa