Playwright Test Structure in Details -Session-02

🎥 Playwright: test.only, Hooks & Grouping with test.describe Explained

Let’s go step-by-step, showing how to build from a single test, to using beforeEach/afterEach, and then organizing things with test.describe.

---

✅ Step 1: Basic Single Test with test.only

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

test.only('🚀 Basic test - check title', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example Domain/);
});

test.only ensures only this test runs — great for debugging.

---

✅ Step 2: Add beforeEach and afterEach

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

test.beforeEach(async ({ page }) => {
  console.log('🔄 Setting up before each test');
  await page.goto('https://example.com');
});

test.afterEach(async ({ page }, testInfo) => {
  console.log(`📦 Finished test: ${testInfo.title}`);
});

test.only('Check heading text', async ({ page }) => {
  const heading = await page.locator('h1');
  await expect(heading).toHaveText('Example Domain');
});

---

✅ Step 3: Use test.describe to Group Tests

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

test.describe('🌐 Example.com Homepage Tests', () => {
  
  test('Test 1 - Check title', async ({ page }) => {
    await page.goto('https://example.com');
    await expect(page).toHaveTitle(/Example Domain/);
  });

  test('Test 2 - Check heading', async ({ page }) => {
    await page.goto('https://example.com');
    const heading = await page.locator('h1');
    await expect(heading).toHaveText('Example Domain');
  });

});

Now both tests are grouped logically under one label.

---

✅ Step 4: test.describe with beforeEach and afterEach

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

test.describe('🧪 Grouped tests with setup/teardown', () => {

  test.beforeEach(async ({ page }) => {
    console.log('🔧 Running beforeEach in describe block');
    await page.goto('https://example.com');
  });

  test.afterEach(async ({ page }, testInfo) => {
    console.log(`✅ Completed: ${testInfo.title}`);
  });

  test('Test A - Page title', async ({ page }) => {
    await expect(page).toHaveTitle(/Example Domain/);
  });

  test('Test B - Heading check', async ({ page }) => {
    const heading = await page.locator('h1');
    await expect(heading).toHaveText('Example Domain');
  });

});

---

✅ Summary Chart:

Step	What’s Shown	Key Feature
1	test.only()	Run single test
2	beforeEach & afterEach globally	Setup/teardown
3	test.describe()	Group related tests
4	describe + beforeEach + afterEach	Reusable logic within group