SurfSense/.cursor/skills/playwright-testing/crud-testing.md

# 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