Playwright
Automation Testing Tutorial

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',           // Folder where test files live
  timeout: 30000,              // Max time for each test (30 seconds)
  retries: 1,                  // Retry failed tests once before marking fail
  reporter: 'html',           // Generate HTML report after test run

  use: {
    baseURL: 'http://localhost:3000', // Root URL of your app
    headless: true,                  // Run without browser window
    screenshot: 'only-on-failure',   // Capture screenshot when test fails
    video: 'retain-on-failure',     // Record video on failure
    trace: 'on-first-retry',        // Capture trace on first retry
  },

  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
  ],
});

// 1. Import test and expect from Playwright
import { test, expect } from '@playwright/test';

// 2. Declare a test with a descriptive name
test('user can login with valid credentials', async ({ page }) => {

  // 3. Navigate to the login page
  await page.goto('/login');

  // 4. Find the email field and type into it
  await page.getByLabel('Email').fill('priya@example.com');

  // 5. Find the password field and type into it
  await page.getByLabel('Password').fill('Test@123');

  // 6. Click the Login button
  await page.getByRole('button', { name: 'Login' }).click();

  // 7. Verify the dashboard heading is visible after login
  await expect(page.getByRole('heading', { name: 'Dashboard' }))
    .toBeVisible();
});

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

test.describe('Login Page', () => {

  test.beforeEach(async ({ page }) => {
    await page.goto('/login'); // runs before EVERY test in this group
  });

  test('valid login redirects to dashboard', async ({ page }) => {
    await page.getByLabel('Email').fill('priya@example.com');
    await page.getByLabel('Password').fill('Test@123');
    await page.getByRole('button', { name: 'Login' }).click();
    await expect(page).toHaveURL('/dashboard');
  });

  test('wrong password shows error message', async ({ page }) => {
    await page.getByLabel('Email').fill('priya@example.com');
    await page.getByLabel('Password').fill('wrongpass');
    await page.getByRole('button', { name: 'Login' }).click();
    await expect(page.getByText('Invalid credentials')).toBeVisible();
  });

});

// Click a button with visible text "Submit"
await page.getByRole('button', { name: 'Submit' }).click();

// Click a button — case insensitive match using regex
await page.getByRole('button', { name: /submit/i }).click();

// Assert a heading with text "Welcome" is visible
await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();

// Check a checkbox labeled "Accept Terms"
await page.getByRole('checkbox', { name: 'Accept Terms' }).check();

// Click a navigation link
await page.getByRole('link', { name: 'Home' }).click();

// Fill the Email input field
await page.getByLabel('Email').fill('priya@example.com');

// Fill the Password input field
await page.getByLabel('Password').fill('Test@123');

// Fill input that shows placeholder "Search products..."
await page.getByPlaceholder('Search products...').fill('laptop');

// Fill input with placeholder "Enter your email"
await page.getByPlaceholder('Enter your email').fill('test@test.com');

// Assert error message is shown
await expect(page.getByText('Invalid credentials')).toBeVisible();

// Click a menu item by its text
await page.getByText('My Profile').click();

// Exact match — only matches "Log out", not "Log out now"
await page.getByText('Log out', { exact: true }).click();

// HTML: <button data-testid="submit-btn">Submit</button>
await page.getByTestId('submit-btn').click();

// ── CLICK ──────────────────────────────────────
await page.getByRole('button', { name: 'Login' }).click();
await page.getByText('Forgot Password?').click();

// ── FILL (type into input) ──────────────────────
await page.getByLabel('Username').fill('priya123');
// fill() clears existing text first, then types

// ── TYPE (types character by character) ─────────
await page.getByLabel('Search').pressSequentially('laptop');
// Triggers keystroke events — needed for autocomplete

// ── CLEAR ───────────────────────────────────────
await page.getByLabel('Email').clear();

// ── SELECT DROPDOWN ─────────────────────────────
await page.getByRole('combobox').selectOption('India');
await page.getByLabel('Country').selectOption({ value: 'IN' });

// ── CHECKBOX ────────────────────────────────────
await page.getByRole('checkbox', { name: 'Accept Terms' }).check();
await page.getByRole('checkbox', { name: 'Subscribe' }).uncheck();

// ── HOVER ───────────────────────────────────────
await page.getByText('Account').hover();
// Use to open dropdown menus that appear on hover

// ── NAVIGATE ────────────────────────────────────
await page.goto('/login');          // relative URL (uses baseURL)
await page.goto('https://example.com'); // absolute URL
await page.goBack();                  // browser back button
await page.reload();                  // refresh the page

// ── KEYBOARD KEYS ───────────────────────────────
await page.getByLabel('Search').press('Enter');
await page.keyboard.press('Escape');   // close modal

// ── SCREENSHOT ──────────────────────────────────
await page.screenshot({ path: 'screenshot.png' });

// ── VISIBILITY ──────────────────────────────────
await expect(page.getByText('Welcome, Priya!')).toBeVisible();
await expect(page.getByText('Error')).not.toBeVisible();

// ── URL ─────────────────────────────────────────
await expect(page).toHaveURL('/dashboard');
await expect(page).toHaveURL(/dashboard/); // regex match

// ── PAGE TITLE ──────────────────────────────────
await expect(page).toHaveTitle('My App - Dashboard');

// ── ELEMENT TEXT ────────────────────────────────
await expect(page.getByRole('heading')).toHaveText('Dashboard');
await expect(page.getByTestId('cart-count')).toContainText('3');

// ── INPUT VALUE ─────────────────────────────────
await expect(page.getByLabel('Email')).toHaveValue('priya@example.com');

// ── CHECKBOX STATE ──────────────────────────────
await expect(page.getByRole('checkbox', { name: 'Terms' })).toBeChecked();

// ── BUTTON/INPUT STATE ──────────────────────────
await expect(page.getByRole('button', { name: 'Submit' })).toBeEnabled();
await expect(page.getByRole('button', { name: 'Submit' })).toBeDisabled();

// ── COUNT (number of items in a list) ───────────
await expect(page.getByRole('listitem')).toHaveCount(5);

test('valid login shows dashboard', async ({ page }) => {
  await page.goto('/login');

  await page.getByLabel('Email').fill('priya@example.com');
  await page.getByLabel('Password').fill('Test@123');
  await page.getByRole('button', { name: 'Login' }).click();

  // Assert URL changed to dashboard
  await expect(page).toHaveURL('/dashboard');

  // Assert heading is visible
  await expect(page.getByRole('heading', { name: 'Dashboard' }))
    .toBeVisible();

  // Assert user name appears in the header
  await expect(page.getByText('Welcome, Priya')).toBeVisible();
});

// ✅ PLAYWRIGHT WAY — clean, no manual waits
test('add item to cart', async ({ page }) => {
  await page.goto('/products');

  // Playwright waits for button to appear and be clickable
  await page.getByRole('button', { name: 'Add to Cart' }).click();

  // Playwright waits for toast/confirmation to become visible
  await expect(page.getByText('Added to cart!')).toBeVisible();
});

// ❌ OLD WAY (Selenium-style) — messy, error-prone
// await page.waitForSelector('button');  // Don't need this
// await page.waitForTimeout(2000);       // Never use this

// Override timeout for one specific test
test('slow report generation', async ({ page }) => {
  test.setTimeout(60000); // give this test 60 seconds
  await page.getByRole('button', { name: 'Generate Report' }).click();
  await expect(page.getByText('Report Ready'))
    .toBeVisible({ timeout: 50000 }); // wait up to 50s for this element
});

// Auto-generated by Playwright Codegen
import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('https://your-app.com/login');
  await page.getByLabel('Email').click();
  await page.getByLabel('Email').fill('priya@example.com');
  await page.getByLabel('Password').fill('Test@123');
  await page.getByRole('button', { name: 'Login' }).click();

  // ← Add your assertions here manually after recording:
  await expect(page).toHaveURL('/dashboard');
  await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
});