@assertrx/dino 1.0.0

package/skills/playwright-core/crud-testing.md

@@ -0,0 +1,945 @@
+# CRUD Testing Recipes
+
+> **When to use**: You need to test create, read, update, or delete operations on any resource -- forms, tables, lists, cards, inline edits, or bulk actions.
+
+---
+
+## Recipe 1: Creating a Resource (Fill Form, Submit, Verify)
+
+### Complete Example
+
+**TypeScript**
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('creates a new product via form', async ({ page }) => {
+  await page.goto('/products');
+
+  // Click the create button
+  await page.getByRole('button', { name: 'Add product' }).click();
+
+  // Fill out the creation form
+  await page.getByLabel('Product name').fill('Wireless Keyboard');
+  await page.getByLabel('SKU').fill('KB-WIRELESS-001');
+  await page.getByLabel('Price').fill('79.99');
+  await page.getByLabel('Description').fill('Ergonomic wireless keyboard with backlit keys');
+  await page.getByLabel('Category').selectOption('Electronics');
+  await page.getByLabel('In stock').check();
+
+  // Submit
+  await page.getByRole('button', { name: 'Save product' }).click();
+
+  // Verify success notification
+  await expect(page.getByRole('alert')).toContainText('Product created successfully');
+
+  // Verify the new item appears in the list
+  await expect(page.getByRole('row', { name: /Wireless Keyboard/ })).toBeVisible();
+  await expect(page.getByRole('row', { name: /Wireless Keyboard/ })).toContainText('$79.99');
+  await expect(page.getByRole('row', { name: /Wireless Keyboard/ })).toContainText('KB-WIRELESS-001');
+});
+
+test('shows validation errors for invalid form data', async ({ page }) => {
+  await page.goto('/products');
+  await page.getByRole('button', { name: 'Add product' }).click();
+
+  // Submit empty form
+  await page.getByRole('button', { name: 'Save product' }).click();
+
+  // Verify field-level validation messages
+  await expect(page.getByText('Product name is required')).toBeVisible();
+  await expect(page.getByText('Price is required')).toBeVisible();
+
+  // Fill in invalid data
+  await page.getByLabel('Product name').fill('A'); // too short
+  await page.getByLabel('Price').fill('-5');
+
+  await page.getByRole('button', { name: 'Save product' }).click();
+
+  await expect(page.getByText('Name must be at least 3 characters')).toBeVisible();
+  await expect(page.getByText('Price must be a positive number')).toBeVisible();
+});
+
+test('prevents duplicate resource creation', async ({ page }) => {
+  await page.goto('/products');
+  await page.getByRole('button', { name: 'Add product' }).click();
+
+  // Try to create a product with a SKU that already exists
+  await page.getByLabel('Product name').fill('Duplicate Product');
+  await page.getByLabel('SKU').fill('EXISTING-SKU-001');
+  await page.getByLabel('Price').fill('29.99');
+  await page.getByRole('button', { name: 'Save product' }).click();
+
+  await expect(page.getByRole('alert')).toContainText(/already exists|duplicate/i);
+});
+```
+
+**JavaScript**
+
+```javascript
+const { test, expect } = require('@playwright/test');
+
+test('creates a new product via form', async ({ page }) => {
+  await page.goto('/products');
+
+  await page.getByRole('button', { name: 'Add product' }).click();
+
+  await page.getByLabel('Product name').fill('Wireless Keyboard');
+  await page.getByLabel('SKU').fill('KB-WIRELESS-001');
+  await page.getByLabel('Price').fill('79.99');
+  await page.getByLabel('Description').fill('Ergonomic wireless keyboard with backlit keys');
+  await page.getByLabel('Category').selectOption('Electronics');
+  await page.getByLabel('In stock').check();
+
+  await page.getByRole('button', { name: 'Save product' }).click();
+
+  await expect(page.getByRole('alert')).toContainText('Product created successfully');
+  await expect(page.getByRole('row', { name: /Wireless Keyboard/ })).toBeVisible();
+  await expect(page.getByRole('row', { name: /Wireless Keyboard/ })).toContainText('$79.99');
+});
+```
+
+---
+
+## Recipe 2: Reading / Listing Resources (Table, Cards, Pagination)
+
+### Complete Example
+
+**TypeScript**
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('reading resources in a table', () => {
+  test('displays resources in a table with correct columns', async ({ page }) => {
+    await page.goto('/products');
+
+    // Verify table headers
+    const headers = page.getByRole('columnheader');
+    await expect(headers).toContainText(['Name', 'SKU', 'Price', 'Category', 'Status']);
+
+    // Verify at least one row of data exists
+    const rows = page.getByRole('row').filter({ hasNot: page.getByRole('columnheader') });
+    await expect(rows.first()).toBeVisible();
+
+    // Verify specific data in a row
+    const firstRow = rows.first();
+    await expect(firstRow.getByRole('cell').nth(0)).not.toBeEmpty();
+    await expect(firstRow.getByRole('cell').nth(2)).toContainText('$');
+  });
+
+  test('sorts table by column', async ({ page }) => {
+    await page.goto('/products');
+
+    // Click the Price header to sort
+    await page.getByRole('columnheader', { name: 'Price' }).click();
+
+    // Get all prices from the table
+    const priceCells = page.getByRole('row')
+      .filter({ hasNot: page.getByRole('columnheader') })
+      .getByRole('cell')
+      .nth(2);
+
+    const prices = await priceCells.allTextContents();
+    const numericPrices = prices.map((p) => parseFloat(p.replace(/[$,]/g, '')));
+
+    // Verify sorted ascending
+    for (let i = 1; i < numericPrices.length; i++) {
+      expect(numericPrices[i]).toBeGreaterThanOrEqual(numericPrices[i - 1]);
+    }
+
+    // Click again for descending
+    await page.getByRole('columnheader', { name: 'Price' }).click();
+
+    const pricesDesc = await priceCells.allTextContents();
+    const numericDesc = pricesDesc.map((p) => parseFloat(p.replace(/[$,]/g, '')));
+
+    for (let i = 1; i < numericDesc.length; i++) {
+      expect(numericDesc[i]).toBeLessThanOrEqual(numericDesc[i - 1]);
+    }
+  });
+
+  test('paginates through results', async ({ page }) => {
+    await page.goto('/products');
+
+    // Verify pagination controls are visible
+    const pagination = page.getByRole('navigation', { name: /pagination/i });
+    await expect(pagination).toBeVisible();
+
+    // Get first page content
+    const firstPageFirstRow = await page
+      .getByRole('row')
+      .filter({ hasNot: page.getByRole('columnheader') })
+      .first()
+      .textContent();
+
+    // Go to page 2
+    await pagination.getByRole('button', { name: '2' }).click();
+
+    // Wait for data to load
+    await expect(page.getByRole('row').filter({ hasNot: page.getByRole('columnheader') }).first())
+      .not.toHaveText(firstPageFirstRow!);
+
+    // Verify page 2 is active
+    await expect(pagination.getByRole('button', { name: '2' })).toHaveAttribute(
+      'aria-current',
+      'page'
+    );
+
+    // Verify URL updated with page parameter
+    await expect(page).toHaveURL(/[?&]page=2/);
+  });
+
+  test('shows correct item count', async ({ page }) => {
+    await page.goto('/products');
+
+    // Verify the total count display
+    await expect(page.getByText(/showing \d+.+of \d+/i)).toBeVisible();
+  });
+});
+
+test.describe('reading resources as cards', () => {
+  test('displays resources in a card grid', async ({ page }) => {
+    await page.goto('/products?view=grid');
+
+    // Verify cards are displayed
+    const cards = page.getByRole('article');
+    await expect(cards.first()).toBeVisible();
+
+    // Verify card content
+    const firstCard = cards.first();
+    await expect(firstCard.getByRole('heading')).toBeVisible();
+    await expect(firstCard.getByText('$')).toBeVisible();
+    await expect(firstCard.getByRole('img')).toBeVisible();
+  });
+
+  test('switches between list and grid view', async ({ page }) => {
+    await page.goto('/products');
+
+    // Start in table/list view
+    await expect(page.getByRole('table')).toBeVisible();
+
+    // Switch to grid
+    await page.getByRole('button', { name: /grid view/i }).click();
+    await expect(page.getByRole('article').first()).toBeVisible();
+    await expect(page.getByRole('table')).not.toBeVisible();
+
+    // Switch back to list
+    await page.getByRole('button', { name: /list view/i }).click();
+    await expect(page.getByRole('table')).toBeVisible();
+  });
+});
+```
+
+**JavaScript**
+
+```javascript
+const { test, expect } = require('@playwright/test');
+
+test('displays resources in a table with correct columns', async ({ page }) => {
+  await page.goto('/products');
+
+  const headers = page.getByRole('columnheader');
+  await expect(headers).toContainText(['Name', 'SKU', 'Price', 'Category', 'Status']);
+
+  const rows = page.getByRole('row').filter({ hasNot: page.getByRole('columnheader') });
+  await expect(rows.first()).toBeVisible();
+});
+
+test('paginates through results', async ({ page }) => {
+  await page.goto('/products');
+
+  const pagination = page.getByRole('navigation', { name: /pagination/i });
+  await expect(pagination).toBeVisible();
+
+  const firstPageFirstRow = await page
+    .getByRole('row')
+    .filter({ hasNot: page.getByRole('columnheader') })
+    .first()
+    .textContent();
+
+  await pagination.getByRole('button', { name: '2' }).click();
+
+  await expect(page.getByRole('row').filter({ hasNot: page.getByRole('columnheader') }).first())
+    .not.toHaveText(firstPageFirstRow);
+
+  await expect(page).toHaveURL(/[?&]page=2/);
+});
+```
+
+---
+
+## Recipe 3: Updating a Resource (Edit Form, Save, Verify Changes)
+
+### Complete Example
+
+**TypeScript**
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('updates an existing product', async ({ page }) => {
+  await page.goto('/products');
+
+  // Find the target row and click edit
+  const row = page.getByRole('row', { name: /Wireless Keyboard/ });
+  await row.getByRole('button', { name: 'Edit' }).click();
+
+  // Verify the edit form is pre-filled with existing data
+  await expect(page.getByLabel('Product name')).toHaveValue('Wireless Keyboard');
+  await expect(page.getByLabel('Price')).toHaveValue('79.99');
+
+  // Update the fields
+  await page.getByLabel('Product name').clear();
+  await page.getByLabel('Product name').fill('Wireless Keyboard Pro');
+  await page.getByLabel('Price').clear();
+  await page.getByLabel('Price').fill('99.99');
+
+  // Save changes
+  await page.getByRole('button', { name: 'Save changes' }).click();
+
+  // Verify success notification
+  await expect(page.getByRole('alert')).toContainText('Product updated successfully');
+
+  // Verify the list reflects the changes
+  await expect(page.getByRole('row', { name: /Wireless Keyboard Pro/ })).toBeVisible();
+  await expect(page.getByRole('row', { name: /Wireless Keyboard Pro/ })).toContainText('$99.99');
+
+  // Verify old name is gone
+  await expect(page.getByRole('row', { name: /^Wireless Keyboard$/ })).not.toBeVisible();
+});
+
+test('edit form preserves data when navigating away and back', async ({ page }) => {
+  await page.goto('/products');
+
+  const row = page.getByRole('row', { name: /Wireless Keyboard/ });
+  await row.getByRole('button', { name: 'Edit' }).click();
+
+  // Make changes but do not save
+  await page.getByLabel('Product name').clear();
+  await page.getByLabel('Product name').fill('Modified Name');
+
+  // Try navigating away
+  await page.getByRole('link', { name: 'Dashboard' }).click();
+
+  // Expect unsaved changes warning
+  page.on('dialog', async (dialog) => {
+    expect(dialog.message()).toContain('unsaved changes');
+    await dialog.dismiss(); // Stay on page
+  });
+
+  // Verify data is still there after dismissing navigation
+  await expect(page.getByLabel('Product name')).toHaveValue('Modified Name');
+});
+
+test('cancelling edit discards changes', async ({ page }) => {
+  await page.goto('/products');
+
+  const row = page.getByRole('row', { name: /Wireless Keyboard/ });
+  await row.getByRole('button', { name: 'Edit' }).click();
+
+  // Make changes
+  await page.getByLabel('Product name').clear();
+  await page.getByLabel('Product name').fill('Should Not Save');
+
+  // Cancel
+  await page.getByRole('button', { name: 'Cancel' }).click();
+
+  // Verify original data is preserved
+  await expect(page.getByRole('row', { name: /Wireless Keyboard/ })).toBeVisible();
+  await expect(page.getByRole('row', { name: /Should Not Save/ })).not.toBeVisible();
+});
+```
+
+**JavaScript**
+
+```javascript
+const { test, expect } = require('@playwright/test');
+
+test('updates an existing product', async ({ page }) => {
+  await page.goto('/products');
+
+  const row = page.getByRole('row', { name: /Wireless Keyboard/ });
+  await row.getByRole('button', { name: 'Edit' }).click();
+
+  await expect(page.getByLabel('Product name')).toHaveValue('Wireless Keyboard');
+  await expect(page.getByLabel('Price')).toHaveValue('79.99');
+
+  await page.getByLabel('Product name').clear();
+  await page.getByLabel('Product name').fill('Wireless Keyboard Pro');
+  await page.getByLabel('Price').clear();
+  await page.getByLabel('Price').fill('99.99');
+
+  await page.getByRole('button', { name: 'Save changes' }).click();
+
+  await expect(page.getByRole('alert')).toContainText('Product updated successfully');
+  await expect(page.getByRole('row', { name: /Wireless Keyboard Pro/ })).toBeVisible();
+  await expect(page.getByRole('row', { name: /Wireless Keyboard Pro/ })).toContainText('$99.99');
+});
+
+test('cancelling edit discards changes', async ({ page }) => {
+  await page.goto('/products');
+
+  const row = page.getByRole('row', { name: /Wireless Keyboard/ });
+  await row.getByRole('button', { name: 'Edit' }).click();
+
+  await page.getByLabel('Product name').clear();
+  await page.getByLabel('Product name').fill('Should Not Save');
+
+  await page.getByRole('button', { name: 'Cancel' }).click();
+
+  await expect(page.getByRole('row', { name: /Wireless Keyboard/ })).toBeVisible();
+  await expect(page.getByRole('row', { name: /Should Not Save/ })).not.toBeVisible();
+});
+```
+
+---
+
+## Recipe 4: Deleting a Resource (Delete, Confirm Dialog, Verify Removal)
+
+### Complete Example
+
+**TypeScript**
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('deletes a product with confirmation dialog', async ({ page }) => {
+  await page.goto('/products');
+
+  // Count items before deletion
+  const rowsBefore = page.getByRole('row').filter({ hasNot: page.getByRole('columnheader') });
+  const countBefore = await rowsBefore.count();
+
+  // Click delete on a specific product
+  const targetRow = page.getByRole('row', { name: /Wireless Keyboard/ });
+  await expect(targetRow).toBeVisible();
+  await targetRow.getByRole('button', { name: 'Delete' }).click();
+
+  // Confirmation dialog should appear
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toBeVisible();
+  await expect(dialog).toContainText('Are you sure you want to delete');
+  await expect(dialog).toContainText('Wireless Keyboard');
+  await expect(dialog.getByText(/cannot be undone/i)).toBeVisible();
+
+  // Confirm the deletion
+  await dialog.getByRole('button', { name: 'Delete' }).click();
+
+  // Verify the dialog closes
+  await expect(dialog).not.toBeVisible();
+
+  // Verify success notification
+  await expect(page.getByRole('alert')).toContainText('Product deleted');
+
+  // Verify the item is removed from the list
+  await expect(page.getByRole('row', { name: /Wireless Keyboard/ })).not.toBeVisible();
+
+  // Verify count decreased
+  const rowsAfter = page.getByRole('row').filter({ hasNot: page.getByRole('columnheader') });
+  await expect(rowsAfter).toHaveCount(countBefore - 1);
+});
+
+test('cancel delete preserves the resource', async ({ page }) => {
+  await page.goto('/products');
+
+  const targetRow = page.getByRole('row', { name: /Wireless Keyboard/ });
+  await targetRow.getByRole('button', { name: 'Delete' }).click();
+
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toBeVisible();
+
+  // Cancel the deletion
+  await dialog.getByRole('button', { name: 'Cancel' }).click();
+
+  // Dialog closes, item is still present
+  await expect(dialog).not.toBeVisible();
+  await expect(page.getByRole('row', { name: /Wireless Keyboard/ })).toBeVisible();
+});
+
+test('handles delete error gracefully', async ({ page }) => {
+  // Mock the delete endpoint to fail
+  await page.route('**/api/products/*', async (route) => {
+    if (route.request().method() === 'DELETE') {
+      await route.fulfill({
+        status: 409,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          error: 'Cannot delete product with active orders',
+        }),
+      });
+    } else {
+      await route.continue();
+    }
+  });
+
+  await page.goto('/products');
+
+  const targetRow = page.getByRole('row', { name: /Wireless Keyboard/ });
+  await targetRow.getByRole('button', { name: 'Delete' }).click();
+
+  const dialog = page.getByRole('dialog');
+  await dialog.getByRole('button', { name: 'Delete' }).click();
+
+  // Verify error is shown to user
+  await expect(page.getByRole('alert')).toContainText('Cannot delete product with active orders');
+
+  // Item should still be in the list
+  await expect(page.getByRole('row', { name: /Wireless Keyboard/ })).toBeVisible();
+});
+```
+
+**JavaScript**
+
+```javascript
+const { test, expect } = require('@playwright/test');
+
+test('deletes a product with confirmation dialog', async ({ page }) => {
+  await page.goto('/products');
+
+  const rowsBefore = page.getByRole('row').filter({ hasNot: page.getByRole('columnheader') });
+  const countBefore = await rowsBefore.count();
+
+  const targetRow = page.getByRole('row', { name: /Wireless Keyboard/ });
+  await targetRow.getByRole('button', { name: 'Delete' }).click();
+
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toBeVisible();
+  await expect(dialog).toContainText('Wireless Keyboard');
+
+  await dialog.getByRole('button', { name: 'Delete' }).click();
+
+  await expect(dialog).not.toBeVisible();
+  await expect(page.getByRole('alert')).toContainText('Product deleted');
+  await expect(page.getByRole('row', { name: /Wireless Keyboard/ })).not.toBeVisible();
+
+  const rowsAfter = page.getByRole('row').filter({ hasNot: page.getByRole('columnheader') });
+  await expect(rowsAfter).toHaveCount(countBefore - 1);
+});
+
+test('cancel delete preserves the resource', async ({ page }) => {
+  await page.goto('/products');
+
+  const targetRow = page.getByRole('row', { name: /Wireless Keyboard/ });
+  await targetRow.getByRole('button', { name: 'Delete' }).click();
+
+  const dialog = page.getByRole('dialog');
+  await dialog.getByRole('button', { name: 'Cancel' }).click();
+
+  await expect(dialog).not.toBeVisible();
+  await expect(page.getByRole('row', { name: /Wireless Keyboard/ })).toBeVisible();
+});
+```
+
+---
+
+## Recipe 5: Inline Editing
+
+### Complete Example
+
+**TypeScript**
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('edits a field inline by double-clicking', async ({ page }) => {
+  await page.goto('/products');
+
+  const row = page.getByRole('row', { name: /Wireless Keyboard/ });
+  const nameCell = row.getByRole('cell').first();
+
+  // Double-click to enter edit mode
+  await nameCell.dblclick();
+
+  // The cell should now contain an input
+  const inlineInput = nameCell.getByRole('textbox');
+  await expect(inlineInput).toBeVisible();
+  await expect(inlineInput).toHaveValue('Wireless Keyboard');
+
+  // Edit the value
+  await inlineInput.clear();
+  await inlineInput.fill('Wireless Keyboard v2');
+
+  // Press Enter to save
+  await inlineInput.press('Enter');
+
+  // Verify the cell shows the updated value (no longer an input)
+  await expect(nameCell.getByRole('textbox')).not.toBeVisible();
+  await expect(nameCell).toHaveText('Wireless Keyboard v2');
+
+  // Verify a success indicator appears
+  await expect(page.getByRole('alert')).toContainText(/saved|updated/i);
+});
+
+test('cancels inline edit with Escape key', async ({ page }) => {
+  await page.goto('/products');
+
+  const row = page.getByRole('row', { name: /Wireless Keyboard/ });
+  const nameCell = row.getByRole('cell').first();
+
+  await nameCell.dblclick();
+
+  const inlineInput = nameCell.getByRole('textbox');
+  await inlineInput.clear();
+  await inlineInput.fill('Temporary Value');
+
+  // Press Escape to cancel
+  await inlineInput.press('Escape');
+
+  // Verify original value is restored
+  await expect(nameCell).toHaveText('Wireless Keyboard');
+  await expect(nameCell.getByRole('textbox')).not.toBeVisible();
+});
+
+test('inline edit with click-away saves changes', async ({ page }) => {
+  await page.goto('/products');
+
+  const row = page.getByRole('row', { name: /Wireless Keyboard/ });
+  const nameCell = row.getByRole('cell').first();
+
+  await nameCell.dblclick();
+
+  const inlineInput = nameCell.getByRole('textbox');
+  await inlineInput.clear();
+  await inlineInput.fill('Keyboard Updated');
+
+  // Click somewhere else on the page to trigger save
+  await page.getByRole('heading').first().click();
+
+  await expect(nameCell).toHaveText('Keyboard Updated');
+});
+
+test('inline edit shows validation error', async ({ page }) => {
+  await page.goto('/products');
+
+  const row = page.getByRole('row', { name: /Wireless Keyboard/ });
+  const priceCell = row.getByRole('cell').nth(2);
+
+  await priceCell.dblclick();
+
+  const inlineInput = priceCell.getByRole('textbox');
+  await inlineInput.clear();
+  await inlineInput.fill('-10');
+  await inlineInput.press('Enter');
+
+  // Validation error should appear inline
+  await expect(priceCell.getByText(/positive number|invalid/i)).toBeVisible();
+
+  // Input should remain visible for correction
+  await expect(inlineInput).toBeVisible();
+});
+```
+
+**JavaScript**
+
+```javascript
+const { test, expect } = require('@playwright/test');
+
+test('edits a field inline by double-clicking', async ({ page }) => {
+  await page.goto('/products');
+
+  const row = page.getByRole('row', { name: /Wireless Keyboard/ });
+  const nameCell = row.getByRole('cell').first();
+
+  await nameCell.dblclick();
+
+  const inlineInput = nameCell.getByRole('textbox');
+  await expect(inlineInput).toBeVisible();
+  await expect(inlineInput).toHaveValue('Wireless Keyboard');
+
+  await inlineInput.clear();
+  await inlineInput.fill('Wireless Keyboard v2');
+  await inlineInput.press('Enter');
+
+  await expect(nameCell.getByRole('textbox')).not.toBeVisible();
+  await expect(nameCell).toHaveText('Wireless Keyboard v2');
+});
+
+test('cancels inline edit with Escape key', async ({ page }) => {
+  await page.goto('/products');
+
+  const row = page.getByRole('row', { name: /Wireless Keyboard/ });
+  const nameCell = row.getByRole('cell').first();
+
+  await nameCell.dblclick();
+  const inlineInput = nameCell.getByRole('textbox');
+  await inlineInput.clear();
+  await inlineInput.fill('Temporary Value');
+  await inlineInput.press('Escape');
+
+  await expect(nameCell).toHaveText('Wireless Keyboard');
+});
+```
+
+---
+
+## Recipe 6: Bulk Operations
+
+### Complete Example
+
+**TypeScript**
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('selects multiple items and performs bulk delete', async ({ page }) => {
+  await page.goto('/products');
+
+  // Select multiple items via checkboxes
+  const rows = page.getByRole('row').filter({ hasNot: page.getByRole('columnheader') });
+
+  await rows.nth(0).getByRole('checkbox').check();
+  await rows.nth(1).getByRole('checkbox').check();
+  await rows.nth(2).getByRole('checkbox').check();
+
+  // Verify selection count is shown
+  await expect(page.getByText('3 items selected')).toBeVisible();
+
+  // Verify bulk action toolbar appears
+  const bulkToolbar = page.getByRole('toolbar', { name: /bulk actions/i });
+  await expect(bulkToolbar).toBeVisible();
+
+  // Click bulk delete
+  await bulkToolbar.getByRole('button', { name: 'Delete selected' }).click();
+
+  // Confirm in dialog
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toContainText('Delete 3 products');
+  await dialog.getByRole('button', { name: 'Delete' }).click();
+
+  // Verify items removed
+  await expect(page.getByRole('alert')).toContainText('3 products deleted');
+
+  // Verify selection count is cleared
+  await expect(page.getByText('items selected')).not.toBeVisible();
+  await expect(bulkToolbar).not.toBeVisible();
+});
+
+test('select all and deselect all', async ({ page }) => {
+  await page.goto('/products');
+
+  // Click "Select all" checkbox in the header
+  const selectAllCheckbox = page
+    .getByRole('row')
+    .filter({ has: page.getByRole('columnheader') })
+    .getByRole('checkbox');
+
+  await selectAllCheckbox.check();
+
+  // All row checkboxes should be checked
+  const rowCheckboxes = page
+    .getByRole('row')
+    .filter({ hasNot: page.getByRole('columnheader') })
+    .getByRole('checkbox');
+
+  const count = await rowCheckboxes.count();
+  for (let i = 0; i < count; i++) {
+    await expect(rowCheckboxes.nth(i)).toBeChecked();
+  }
+
+  await expect(page.getByText(`${count} items selected`)).toBeVisible();
+
+  // Deselect all
+  await selectAllCheckbox.uncheck();
+
+  for (let i = 0; i < count; i++) {
+    await expect(rowCheckboxes.nth(i)).not.toBeChecked();
+  }
+
+  await expect(page.getByText('items selected')).not.toBeVisible();
+});
+
+test('bulk status change', async ({ page }) => {
+  await page.goto('/products');
+
+  const rows = page.getByRole('row').filter({ hasNot: page.getByRole('columnheader') });
+  await rows.nth(0).getByRole('checkbox').check();
+  await rows.nth(1).getByRole('checkbox').check();
+
+  const bulkToolbar = page.getByRole('toolbar', { name: /bulk actions/i });
+  await bulkToolbar.getByRole('button', { name: 'Change status' }).click();
+
+  // Select new status from dropdown
+  await page.getByRole('menuitem', { name: 'Archived' }).click();
+
+  await expect(page.getByRole('alert')).toContainText('2 products archived');
+
+  // Verify status changed in the rows
+  await expect(rows.nth(0)).toContainText('Archived');
+  await expect(rows.nth(1)).toContainText('Archived');
+});
+
+test('bulk export selected items', async ({ page }) => {
+  await page.goto('/products');
+
+  const rows = page.getByRole('row').filter({ hasNot: page.getByRole('columnheader') });
+  await rows.nth(0).getByRole('checkbox').check();
+  await rows.nth(1).getByRole('checkbox').check();
+
+  const bulkToolbar = page.getByRole('toolbar', { name: /bulk actions/i });
+
+  // Start waiting for download before clicking
+  const downloadPromise = page.waitForEvent('download');
+  await bulkToolbar.getByRole('button', { name: 'Export' }).click();
+
+  const download = await downloadPromise;
+  expect(download.suggestedFilename()).toMatch(/products.*\.csv$/);
+});
+```
+
+**JavaScript**
+
+```javascript
+const { test, expect } = require('@playwright/test');
+
+test('selects multiple items and performs bulk delete', async ({ page }) => {
+  await page.goto('/products');
+
+  const rows = page.getByRole('row').filter({ hasNot: page.getByRole('columnheader') });
+  await rows.nth(0).getByRole('checkbox').check();
+  await rows.nth(1).getByRole('checkbox').check();
+  await rows.nth(2).getByRole('checkbox').check();
+
+  await expect(page.getByText('3 items selected')).toBeVisible();
+
+  const bulkToolbar = page.getByRole('toolbar', { name: /bulk actions/i });
+  await bulkToolbar.getByRole('button', { name: 'Delete selected' }).click();
+
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toContainText('Delete 3 products');
+  await dialog.getByRole('button', { name: 'Delete' }).click();
+
+  await expect(page.getByRole('alert')).toContainText('3 products deleted');
+});
+
+test('select all and deselect all', async ({ page }) => {
+  await page.goto('/products');
+
+  const selectAllCheckbox = page
+    .getByRole('row')
+    .filter({ has: page.getByRole('columnheader') })
+    .getByRole('checkbox');
+
+  await selectAllCheckbox.check();
+
+  const rowCheckboxes = page
+    .getByRole('row')
+    .filter({ hasNot: page.getByRole('columnheader') })
+    .getByRole('checkbox');
+
+  const count = await rowCheckboxes.count();
+  for (let i = 0; i < count; i++) {
+    await expect(rowCheckboxes.nth(i)).toBeChecked();
+  }
+});
+```
+
+---
+
+## Variations
+
+### Create with Multi-Step Wizard
+
+```typescript
+test('creates a resource through a multi-step wizard', async ({ page }) => {
+  await page.goto('/products');
+  await page.getByRole('button', { name: 'Add product' }).click();
+
+  // Step 1: Basic info
+  await expect(page.getByText('Step 1 of 3')).toBeVisible();
+  await page.getByLabel('Product name').fill('Wireless Keyboard');
+  await page.getByLabel('Category').selectOption('Electronics');
+  await page.getByRole('button', { name: 'Next' }).click();
+
+  // Step 2: Pricing
+  await expect(page.getByText('Step 2 of 3')).toBeVisible();
+  await page.getByLabel('Price').fill('79.99');
+  await page.getByLabel('Tax rate').selectOption('Standard (20%)');
+  await page.getByRole('button', { name: 'Next' }).click();
+
+  // Step 3: Review and confirm
+  await expect(page.getByText('Step 3 of 3')).toBeVisible();
+  await expect(page.getByText('Wireless Keyboard')).toBeVisible();
+  await expect(page.getByText('$79.99')).toBeVisible();
+  await page.getByRole('button', { name: 'Create product' }).click();
+
+  await expect(page.getByRole('alert')).toContainText('Product created');
+});
+```
+
+### CRUD with API Verification
+
+```typescript
+test('create and verify via API', async ({ page, request }) => {
+  await page.goto('/products');
+  await page.getByRole('button', { name: 'Add product' }).click();
+
+  await page.getByLabel('Product name').fill('API Verified Product');
+  await page.getByLabel('Price').fill('49.99');
+  await page.getByRole('button', { name: 'Save product' }).click();
+
+  await expect(page.getByRole('alert')).toContainText('Product created');
+
+  // Also verify via API that the data was persisted correctly
+  const response = await request.get('/api/products?search=API+Verified+Product');
+  const data = await response.json();
+
+  expect(data.products).toHaveLength(1);
+  expect(data.products[0].name).toBe('API Verified Product');
+  expect(data.products[0].price).toBe(49.99);
+});
+```
+
+### Optimistic UI Updates
+
+```typescript
+test('shows optimistic update then confirms', async ({ page }) => {
+  // Slow down the API response to observe optimistic behavior
+  await page.route('**/api/products/*', async (route) => {
+    if (route.request().method() === 'PATCH') {
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      await route.continue();
+    } else {
+      await route.continue();
+    }
+  });
+
+  await page.goto('/products');
+  const row = page.getByRole('row', { name: /Wireless Keyboard/ });
+
+  await row.getByRole('button', { name: 'Toggle status' }).click();
+
+  // Verify UI updates immediately (optimistic)
+  await expect(row.getByText('Active')).toBeVisible();
+
+  // Verify loading indicator while API catches up
+  await expect(row.getByRole('progressbar')).toBeVisible();
+
+  // After API responds, loading indicator disappears
+  await expect(row.getByRole('progressbar')).not.toBeVisible({ timeout: 5000 });
+  await expect(row.getByText('Active')).toBeVisible();
+});
+```
+
+---
+
+## Tips
+
+1. **Always verify state after mutations**. After a create, update, or delete, assert that the UI reflects the change. Do not assume the success notification alone means the operation worked. Check that the list, table, or card actually changed.
+
+2. **Use unique identifiers in test data**. Include timestamps or random strings in test data to prevent collisions: `Keyboard-${Date.now()}`. This avoids flaky tests from leftover data.
+
+3. **Test the full lifecycle**. Write a single test that creates, reads, updates, and then deletes a resource. This catches integration issues between operations that isolated tests miss.
+
+4. **Clean up test data via API**. Use `test.afterEach` or `test.afterAll` with the `request` fixture to delete resources created during tests, so tests remain independent and repeatable.
+
+5. **Prefer `getByRole('row', { name: ... })` for table operations**. This targets accessible row content and is resilient to column reordering. Avoid relying on `nth()` indices for specific data rows since ordering can change.
+
+---
+
+## Related
+
+- `recipes/search-and-filter.md` -- Filter and search within resource lists
+- `recipes/file-upload-download.md` -- Upload files as part of resource creation
+- `patterns/page-objects.md` -- Encapsulate CRUD forms in page objects
+- `foundations/selectors.md` -- Best practices for selecting table cells and form fields