🐢 Turtles

Beautiful Astro components for rendering Playwright test artifacts

What is Turtles?

Turtles transforms your Playwright tests into professional visual documentation. Write markdown test artifacts with screenshots, and render them beautifully with Astro components.

Add one Playwright test → Get beautiful test documentation

How It Works

1. Write Tests

Use optional Playwright helpers to capture journey steps:

await captureJourneyStep(page, 1,
  "Landing on homepage",
  "Navigate to /",
  "User sees the hero section",
  options
);

2. Generate Markdown

Tests output typed markdown artifacts with frontmatter:

---
test_id: homepage-001
name: "Homepage Journey"
status: passed
breakpoints: [mobile, tablet, desktop]
---

3. Render Beautifully

Astro components render artifacts with responsive design:

  • ✓ Multi-breakpoint screenshots
  • ✓ Journey step navigation
  • ✓ Console/network diagnostics
  • ✓ Professional typography

Features

Example Result

See what Turtles generates from a Playwright test:

View Example Test Artifact →

Example shows a 3-step user journey with screenshots at multiple breakpoints

📊 Current Status

Phase 3 Complete ✅

  • ✅ Phase 1: Markdown schema defined with TypeScript types
  • ✅ Phase 2: Playwright helpers built (captureJourneyStep, generateTestArtifact)
  • ✅ Phase 3: Astro components ready (TestRun, JourneyStep, BreakpointGrid)

Next Steps 🔄

  • Phase 4: Build example web app with real tests
  • Phase 5: Self-dogfood (use Turtles to test Turtles)

Philosophy

Simple over Clever

  • Markdown files, not databases
  • Static generation, not real-time
  • Optional helpers, not framework lock-in
  • Project-owned automation

Beautiful over Feature-Rich

  • Professional typography
  • Responsive breakpoint grids
  • Clean status indicators
  • Generous whitespace

🚀 Use Cases