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

Create Entity Template

Tests creating a new entity via form submission.

Prerequisites

• Authenticated session via {{authStorageStatePath}}
• Entity type: {{entityName}} (e.g. "Project", "Product", "User")
• App running at {{baseUrl}}

---

TypeScript

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

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

  test.beforeEach(async ({ page }) => {
    await page.goto('{{baseUrl}}/{{entityName}}s/new');
  });

  // Happy path: create with valid data
  test('creates {{entityName}} with valid data', async ({ page }) => {
    await page.getByRole('textbox', { name: /name/i }).fill('{{testEntityName}}');
    await page.getByRole('textbox', { name: /description/i }).fill('{{testEntityDescription}}');
    await page.getByRole('combobox', { name: /category/i }).selectOption('{{testEntityCategory}}');
    await page.getByRole('button', { name: /create|save/i }).click();
    await expect(page).toHaveURL(/\/{{entityName}}s\/\d+/);
    await expect(page.getByRole('heading', { name: '{{testEntityName}}' })).toBeVisible();
    await expect(page.getByRole('alert')).toContainText(/created successfully/i);
  });

  // Happy path: create and add another
  test('clears form after "save and add another"', async ({ page }) => {
    await page.getByRole('textbox', { name: /name/i }).fill('{{testEntityName}}');
    await page.getByRole('button', { name: /save and add another/i }).click();
    await expect(page.getByRole('textbox', { name: /name/i })).toHaveValue('');
    await expect(page.getByRole('alert')).toContainText(/created successfully/i);
  });

  // Error case: required fields missing
  test('shows validation errors for empty required fields', async ({ page }) => {
    await page.getByRole('button', { name: /create|save/i }).click();
    await expect(page.getByText(/name is required/i)).toBeVisible();
    await expect(page).toHaveURL('{{baseUrl}}/{{entityName}}s/new');
  });

  // Error case: duplicate name
  test('shows error when entity name already exists', async ({ page }) => {
    await page.getByRole('textbox', { name: /name/i }).fill('{{existingEntityName}}');
    await page.getByRole('button', { name: /create|save/i }).click();
    await expect(page.getByRole('alert')).toContainText(/already exists|duplicate/i);
  });

  // Edge case: max length enforcement
  test('enforces max length on name field', async ({ page }) => {
    const longName = 'A'.repeat({{maxNameLength}} + 1);
    await page.getByRole('textbox', { name: /name/i }).fill(longName);
    const actualValue = await page.getByRole('textbox', { name: /name/i }).inputValue();
    expect(actualValue.length).toBeLessThanOrEqual({{maxNameLength}});
  });

  // Edge case: cancel navigates away without saving
  test('cancel navigates back without creating', async ({ page }) => {
    await page.getByRole('textbox', { name: /name/i }).fill('should-not-save');
    await page.getByRole('button', { name: /cancel/i }).click();
    await expect(page).toHaveURL('{{baseUrl}}/{{entityName}}s');
    await expect(page.getByRole('cell', { name: 'should-not-save' })).toBeHidden();
  });
});

---

JavaScript

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

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

  test.beforeEach(async ({ page }) => {
    await page.goto('{{baseUrl}}/{{entityName}}s/new');
  });

  test('creates entity with valid data', async ({ page }) => {
    await page.getByRole('textbox', { name: /name/i }).fill('{{testEntityName}}');
    await page.getByRole('textbox', { name: /description/i }).fill('{{testEntityDescription}}');
    await page.getByRole('button', { name: /create|save/i }).click();
    await expect(page).toHaveURL(/\/{{entityName}}s\/\d+/);
    await expect(page.getByRole('alert')).toContainText(/created successfully/i);
  });

  test('shows validation errors for empty form', async ({ page }) => {
    await page.getByRole('button', { name: /create|save/i }).click();
    await expect(page.getByText(/name is required/i)).toBeVisible();
  });

  test('cancel navigates back without saving', async ({ page }) => {
    await page.getByRole('textbox', { name: /name/i }).fill('not-saved');
    await page.getByRole('button', { name: /cancel/i }).click();
    await expect(page).toHaveURL('{{baseUrl}}/{{entityName}}s');
  });
});

Variants

Variant	Description
Happy path	Valid form → entity created → detail page
Save and add	Form cleared, ready for next entry
Required fields	Empty submit → inline validation
Duplicate name	Server error shown
Max length	Input truncated at field max
Cancel	No entity created, returns to list