Playwright Automation Tutorial 2026: Build a Real Test Suite

playwright-automation-tutorial/
├── pages/
│   ├── LoginPage.js           // Page Object: login screen
│   ├── InventoryPage.js       // Page Object: product list
│   └── CheckoutPage.js        // Page Object: checkout steps
├── tests/
│   ├── auth.setup.js          // Logs in once, saves session
│   ├── login.spec.js          // Login tests (logged out)
│   └── checkout.spec.js       // Cart, sort and checkout tests
├── playwright/.auth/          // Saved session (git-ignored)
├── playwright.config.js
└── .github/workflows/playwright.yml

mkdir playwright-automation-tutorial
cd playwright-automation-tutorial
npm init playwright@latest

# Answer the prompts:
# ✔ TypeScript or JavaScript? → JavaScript
# ✔ Where to put your end-to-end tests? → tests
# ✔ Add a GitHub Actions workflow? → true
# ✔ Install Playwright browsers? → true

rm -rf tests/example.spec.js tests-examples
mkdir pages
echo "playwright/.auth" >> .gitignore

// @ts-check
const { defineConfig, devices } = require('@playwright/test');

module.exports = defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  reporter: 'html',
  use: {
    baseURL: 'https://www.saucedemo.com',
    testIdAttribute: 'data-test',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    // Runs first: logs in and saves the session
    { name: 'setup', testMatch: /.*\.setup\.js/ },
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], storageState: 'playwright/.auth/user.json' },
      dependencies: ['setup'],
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'], storageState: 'playwright/.auth/user.json' },
      dependencies: ['setup'],
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'], storageState: 'playwright/.auth/user.json' },
      dependencies: ['setup'],
    },
  ],
});

class LoginPage {
  constructor(page) {
    this.page = page;
    this.username = page.getByPlaceholder('Username');
    this.password = page.getByPlaceholder('Password');
    this.loginButton = page.getByRole('button', { name: 'Login' });
    this.error = page.getByTestId('error');
  }

  async goto() {
    await this.page.goto('/');
  }

  async login(username, password) {
    await this.username.fill(username);
    await this.password.fill(password);
    await this.loginButton.click();
  }
}

module.exports = { LoginPage };

class InventoryPage {
  constructor(page) {
    this.page = page;
    this.title = page.getByTestId('title');
    this.cartBadge = page.getByTestId('shopping-cart-badge');
    this.cartLink = page.getByTestId('shopping-cart-link');
    this.sortSelect = page.getByTestId('product-sort-container');
    this.prices = page.getByTestId('inventory-item-price');
  }

  async goto() {
    await this.page.goto('/inventory.html');
  }

  async addToCart(productName) {
    const card = this.page.getByTestId('inventory-item').filter({ hasText: productName });
    await card.getByRole('button', { name: 'Add to cart' }).click();
  }

  async sortBy(label) {
    await this.sortSelect.selectOption({ label });
  }

  async getPrices() {
    const texts = await this.prices.allTextContents();
    return texts.map((t) => parseFloat(t.replace('$', '')));
  }
}

module.exports = { InventoryPage };

class CheckoutPage {
  constructor(page) {
    this.page = page;
    this.checkoutButton = page.getByRole('button', { name: 'Checkout' });
    this.firstName = page.getByPlaceholder('First Name');
    this.lastName = page.getByPlaceholder('Last Name');
    this.postalCode = page.getByPlaceholder('Zip/Postal Code');
    this.continueButton = page.getByRole('button', { name: 'Continue' });
    this.finishButton = page.getByRole('button', { name: 'Finish' });
    this.completeHeader = page.getByTestId('complete-header');
  }

  async fillShipping(first, last, zip) {
    await this.firstName.fill(first);
    await this.lastName.fill(last);
    await this.postalCode.fill(zip);
    await this.continueButton.click();
  }
}

module.exports = { CheckoutPage };

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

// These tests need a logged-OUT browser, so clear the saved session
test.use({ storageState: { cookies: [], origins: [] } });

test('valid user lands on the Products page', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login('standard_user', 'secret_sauce');

  await expect(page).toHaveURL(/inventory\.html/);
  await expect(page.getByTestId('title')).toHaveText('Products');
});

const badLogins = [
  { user: 'locked_out_user', pass: 'secret_sauce', error: 'Sorry, this user has been locked out.' },
  { user: 'standard_user', pass: 'wrong_password', error: 'Username and password do not match' },
  { user: '', pass: 'secret_sauce', error: 'Username is required' },
  { user: 'standard_user', pass: '', error: 'Password is required' },
];

for (const { user, pass, error } of badLogins) {
  test(`login fails for "${user || 'empty user'}" / "${pass || 'empty password'}"`, async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login(user, pass);

    await expect(loginPage.error).toContainText(error);
    await expect(page).not.toHaveURL(/inventory/);
  });
}

const { test: setup, expect } = require('@playwright/test');
const { LoginPage } = require('../pages/LoginPage');

const authFile = 'playwright/.auth/user.json';

setup('log in once and save session', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login('standard_user', 'secret_sauce');
  await expect(page).toHaveURL(/inventory/);

  await page.context().storageState({ path: authFile });
});

const { test, expect } = require('@playwright/test');
const { InventoryPage } = require('../pages/InventoryPage');
const { CheckoutPage } = require('../pages/CheckoutPage');

test('user can buy two products end to end', async ({ page }) => {
  const inventory = new InventoryPage(page);
  const checkout = new CheckoutPage(page);

  await inventory.goto();
  await inventory.addToCart('Sauce Labs Backpack');
  await inventory.addToCart('Sauce Labs Bike Light');
  await expect(inventory.cartBadge).toHaveText('2');

  await inventory.cartLink.click();
  await expect(page.getByTestId('inventory-item')).toHaveCount(2);

  await checkout.checkoutButton.click();
  await checkout.fillShipping('Asim', 'Noaman', '54000');

  // Overview page: item total = 29.99 + 9.99
  await expect(page.getByTestId('subtotal-label')).toContainText('$39.98');

  await checkout.finishButton.click();
  await expect(checkout.completeHeader).toHaveText('Thank you for your order!');
});

test('sorting by price low to high orders the products', async ({ page }) => {
  const inventory = new InventoryPage(page);
  await inventory.goto();
  await inventory.sortBy('Price (low to high)');

  const prices = await inventory.getPrices();
  const sorted = [...prices].sort((a, b) => a - b);
  expect(prices).toEqual(sorted);
});

npx playwright test --reporter=list

# One browser only (fastest feedback while writing tests)
npx playwright test --project=chromium

# One file, or tests whose name matches a phrase
npx playwright test tests/checkout.spec.js
npx playwright test -g "locked_out"

# Watch the browser while tests run
npx playwright test --headed --project=chromium

# Open the HTML report from the last run
npx playwright show-report

# UI mode: time-travel through every step, with DOM snapshots
npx playwright test --ui

# Record a full trace, then open it
npx playwright test --trace on --project=chromium
npx playwright show-report

name: Playwright Tests
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: lts/*
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: ${{ !cancelled() }}
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

Open https://www.saucedemo.com and log in as standard_user.
Add the cheapest product to the cart, check out, and write a
Playwright JavaScript test for this flow. Reuse my existing
page objects in pages/ and add any methods that are missing.