E2E generator

Generate Playwright E2E specs from the registry.

What it shows

• generateE2ESpec + generateZodFixture → JSON specs for an external Playwright worker
• The four test kinds and field-type → interaction mapping

Source

Feature entry point: src/feature.ts.

Tests

cd samples/recipes/e2e-generator
bun test

---

Source code

The feature entry point — embedded straight from the source file, so the code here is exactly what runs. Multi-file samples keep their remaining files next to it on GitHub (link below):

import {
  createBooleanField,
  createEntity,
  createMoneyField,
  createNumberField,
  createSelectField,
  createTextField,
  defineFeature,
  type FeatureDefinition,
} from "@cosmicdrift/kumiko-framework/engine";

export const productEntity = createEntity({
  table: "read_products",
  fields: {
    name: createTextField({ required: true, maxLength: 200 }),
    description: createTextField({ maxLength: 2000, personal: false, reason: "is_business_data" }),
    price: createNumberField({ required: true }),
    status: createSelectField({ options: ["draft", "published", "archived"] as const }),
    featured: createBooleanField({ default: false }),
    listPrice: createMoneyField({}),
  },
});

const editorWrite = { access: { roles: ["Admin", "Editor"] } } as const;

export function createShopFeature(): FeatureDefinition {
  return defineFeature("shop", (r) => {
    r.systemScope();
    r.crud("product", productEntity, {
      write: editorWrite,
      verbs: { list: false, detail: false, restore: false },
    });

    r.screen({
      id: "product-list",
      type: "entityList",
      entity: "product",
      columns: [
        "name",
        { field: "price", renderer: { format: "currency", symbol: "€" } },
        "status",
        "featured",
      ],
    });

    r.screen({
      id: "product-edit",
      type: "entityEdit",
      entity: "product",
      layout: {
        sections: [
          {
            title: "shop:section.basics",
            columns: 2,
            fields: ["name", { field: "description", span: 2 }],
          },
          {
            title: "shop:section.publishing",
            columns: 2,
            fields: ["price", "status", "featured"],
          },
          {
            title: "shop:section.pricing",
            fields: ["listPrice"],
          },
        ],
      },
    });

    r.nav({
      id: "products",
      label: "shop:nav.products",
      icon: "package",
      screen: "shop:screen:product-list",
      order: 10,
    });
  });
}

📄 On GitHub: samples/recipes/e2e-generator/src/feature.ts