# Rosetta Add Framework Playwright

> Run a public-flow Playwright smoke test against a freshly-built framework tier's Next.js frontend. Covers home page rendering and product browsing. The Playwright project (package.json, config, tests) lives inside this skill directory and is checked into the repo. Part of the rosetta-add-framework flow.

- Skill: `arize-ai/rosetta-add-framework-playwright` (Agent Skill, multi-file: 9 files)
- Install (CLI): `npx skillmds@latest add arize-ai/rosetta-add-framework-playwright`
- Raw SKILL.md: https://api.skillmd.com/api/skills/arize-ai/rosetta-add-framework-playwright/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: arize-ai (https://skillmd.com/u/arize-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/arize-ai/rosetta-add-framework-playwright

---


# Playwright UI smoke

Lightweight UI test covering the public Wonder Toys frontend.

## Inputs

- `FRAMEWORK_DIR` — e.g. `google-adk-py`
- `TIER` — `no-observability` | `phoenix` | `ax` (any tier works; the UI is identical across tiers)
- `BASE_URL` — defaults to `http://localhost:3000`

## Where Playwright lives

The Playwright project is checked into this skill's directory:

```
.claude/skills/rosetta-add-framework-playwright/
├── SKILL.md                    (this file)
├── package.json                Playwright deps
├── package-lock.json
├── playwright.config.ts
└── tests/
    └── public-flow.spec.ts
```

`node_modules/` and `test-results/` are gitignored — see "First-run install" below.

## First-run install

If `.claude/skills/rosetta-add-framework-playwright/node_modules/` doesn't exist (fresh clone or first time running this skill), install:

```bash
SKILL_DIR=/Users/jimbobbennett/github/project-rosetta-stone/.claude/skills/rosetta-add-framework-playwright
cd "$SKILL_DIR"
test -d node_modules || npm install --silent
test -d ~/Library/Caches/ms-playwright || npx playwright install chromium
```

## Run the test

```bash
SKILL_DIR=/Users/jimbobbennett/github/project-rosetta-stone/.claude/skills/rosetta-add-framework-playwright

# Boot the framework's Next.js dev server if not already running.
# Prereq: `npm install` must have run in $TIER/$FRAMEWORK_DIR already (the
# tier-build skill does this in step 6). Without node_modules, npx next dev
# fails with "couldn't find next/package.json".
if ! curl -sf http://localhost:3000/ > /dev/null 2>&1; then
  cd "/Users/jimbobbennett/github/project-rosetta-stone/$TIER/$FRAMEWORK_DIR"
  test -d node_modules || { echo "node_modules missing — run tier-build's step 6 first"; exit 1; }
  npm run dev > /tmp/rosetta-playwright-dev.log 2>&1 &
  DEV_PID=$!
  until curl -sf http://localhost:3000/ > /dev/null 2>&1; do
    # Catch the Turbopack-root failure mode and surface it loudly — the
    # tier-build skill should have already added turbopack.root to
    # next.config.ts; this is a defensive check.
    if grep -q "Turbopack build failed" /tmp/rosetta-playwright-dev.log 2>/dev/null; then
      echo "Next.js failed to start — likely missing turbopack.root in next.config.ts."
      echo "See tier-build skill step 2b. Tail of dev log:"
      tail -20 /tmp/rosetta-playwright-dev.log
      exit 1
    fi
    if ! kill -0 $DEV_PID 2>/dev/null; then
      echo "dev script died:"; tail -20 /tmp/rosetta-playwright-dev.log; exit 1
    fi
    sleep 2
  done
fi

# Run the suite from the skill directory
cd "$SKILL_DIR"
BASE_URL="${BASE_URL:-http://localhost:3000}" npx playwright test --reporter=list
```

Pass criteria: both tests green. Failure modes:
- **Title mismatch** — frontend wasn't built from the canonical source; check for accidental changes to layout.tsx / page.tsx
- **Sign-in prompt missing** — NextAuth config may have shifted; verify the `Sign in with X` button still renders in the auth-gated state
- **Detail page image missing** — `/product/[id]` route was modified or the products.json is missing

## Output

```
PLAYWRIGHT: <TIER>/<FRAMEWORK_DIR>
  tests: <N> passed, <M> failed
  artefacts: .claude/skills/rosetta-add-framework-playwright/playwright-report/ (HTML)
             .claude/skills/rosetta-add-framework-playwright/test-results/ (traces on failure)
```

## Notes

- The Playwright project is **shared across all tiers** and lives inside this skill — bundled as a single unit so the skill is self-contained.
- Tests are deliberately minimal — they catch the most common breakage (frontend accidentally diverged from the source clone) without taking on the auth complexity that would let us test chat directly.
- If a tier customises the frontend in a way that breaks these tests (legitimate UI changes), that's a signal to either update the tests or rethink the change — UI should stay identical across all tiers per project convention.
- `.gitignore` already covers `.claude/skills/rosetta-add-framework-playwright/node_modules/`, `test-results/`, and `playwright-report/`.