claude-skills-reference/engineering-team/playwright-pro/templates/crud/read.md

Read Entity Template

Tests viewing entity details and list view with correct data display.

Prerequisites

• Authenticated session via {{authStorageStatePath}}
• Seeded entity with ID {{entityId}} and name {{entityName}}
• App running at {{baseUrl}}

---

TypeScript

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

test.describe('Read {{entityName}}', () => {
  test.use({ storageState: '{{authStorageStatePath}}' });

  // Happy path: detail page
  test('displays entity details correctly', async ({ page }) => {
    await page.goto('{{baseUrl}}/{{entityName}}s/{{entityId}}');
    await expect(page.getByRole('heading', { name: '{{expectedTitle}}' })).toBeVisible();
    await expect(page.getByText('{{expectedField}}')).toBeVisible();
    await expect(page.getByText('{{expectedCategory}}')).toBeVisible();
  });

  // Happy path: list view shows all items
  test('displays list of entities', async ({ page }) => {
    await page.goto('{{baseUrl}}/{{entityName}}s');
    await expect(page.getByRole('table')).toBeVisible();
    const rows = page.getByRole('row').filter({ hasNot: page.getByRole('columnheader') });
    await expect(rows).toHaveCount({{expectedItemCount}});
  });

  // Happy path: list item links to detail
  test('clicking list item navigates to detail page', async ({ page }) => {
    await page.goto('{{baseUrl}}/{{entityName}}s');
    await page.getByRole('link', { name: '{{expectedTitle}}' }).click();
    await expect(page).toHaveURL(`{{baseUrl}}/{{entityName}}s/{{entityId}}`);
  });

  // Happy path: breadcrumb navigation
  test('breadcrumb shows correct path', async ({ page }) => {
    await page.goto('{{baseUrl}}/{{entityName}}s/{{entityId}}');
    await expect(page.getByRole('navigation', { name: /breadcrumb/i })).toContainText('{{entityName}}s');
    await expect(page.getByRole('navigation', { name: /breadcrumb/i })).toContainText('{{expectedTitle}}');
  });

  // Error case: non-existent entity shows 404
  test('shows 404 for non-existent entity', async ({ page }) => {
    await page.goto('{{baseUrl}}/{{entityName}}s/999999');
    await expect(page.getByRole('heading', { name: /404|not found/i })).toBeVisible();
  });

  // Edge case: loading state resolves to data
  test('shows data after loading completes', async ({ page }) => {
    await page.goto('{{baseUrl}}/{{entityName}}s/{{entityId}}');
    // Skeleton/spinner should be gone, data visible
    await expect(page.getByTestId('skeleton')).toBeHidden();
    await expect(page.getByRole('heading', { name: '{{expectedTitle}}' })).toBeVisible();
  });

  // Edge case: empty list state
  test('shows empty state when no entities exist', async ({ page }) => {
    // Assumes a fresh context or filter that returns no results
    await page.goto('{{baseUrl}}/{{entityName}}s?filter={{emptyFilter}}');
    await expect(page.getByText(/no {{entityName}}s found/i)).toBeVisible();
    await expect(page.getByRole('button', { name: /create|add/i })).toBeVisible();
  });
});

---

JavaScript

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

test.describe('Read {{entityName}}', () => {
  test.use({ storageState: '{{authStorageStatePath}}' });

  test('displays entity details correctly', async ({ page }) => {
    await page.goto('{{baseUrl}}/{{entityName}}s/{{entityId}}');
    await expect(page.getByRole('heading', { name: '{{expectedTitle}}' })).toBeVisible();
    await expect(page.getByText('{{expectedField}}')).toBeVisible();
  });

  test('displays list of entities with correct count', async ({ page }) => {
    await page.goto('{{baseUrl}}/{{entityName}}s');
    const rows = page.getByRole('row').filter({ hasNot: page.getByRole('columnheader') });
    await expect(rows).toHaveCount({{expectedItemCount}});
  });

  test('shows 404 for non-existent entity', async ({ page }) => {
    await page.goto('{{baseUrl}}/{{entityName}}s/999999');
    await expect(page.getByRole('heading', { name: /404|not found/i })).toBeVisible();
  });

  test('shows empty state when list is empty', async ({ page }) => {
    await page.goto('{{baseUrl}}/{{entityName}}s?filter={{emptyFilter}}');
    await expect(page.getByText(/no {{entityName}}s found/i)).toBeVisible();
  });
});

Variants

Variant	Description
Detail view	Entity fields rendered correctly
List view	Correct row count in table
List → detail	Clicking row/link navigates correctly
Breadcrumb	Path reflects current location
404	Non-existent ID shows not-found page
Loading → data	Skeleton hidden, data visible after load
Empty list	No-results state with call to action