Skip to content

docs: document playwright-admin.js as manual-only (PL-034) - #139

Merged
jackgranatowski merged 2 commits into
claude/pr-469-audit-rebase-ggp0e4from
claude/plugins-pr-c4-playwright-docs
Jul 2, 2026
Merged

docs: document playwright-admin.js as manual-only (PL-034)#139
jackgranatowski merged 2 commits into
claude/pr-469-audit-rebase-ggp0e4from
claude/plugins-pr-c4-playwright-docs

Conversation

@jackgranatowski

Copy link
Copy Markdown
Contributor

Summary

Fourth PR from SLASHED-Plugins' technical-debt audit remediation (Wave 0).

tests/playwright-admin.js is a manual visual-QA walkthrough of the admin SPA (screenshots + a console-error report), but as committed it was effectively unusable outside whatever one sandbox it was authored in:

  • import { chromium } from '/opt/node22/lib/node_modules/playwright/index.mjs' — a hardcoded absolute path to one specific machine's global install, not a real dependency of this repo (confirmed: playwright isn't declared in any package.json here, and isn't present in this repo's own node_modules).
  • Assumes a test-admin.html fixture served locally at http://localhost:9999 — that file isn't committed anywhere in the repo.
  • No pass/fail assertions — it prints console errors but always exits 0 unless an unhandled exception is thrown.
  • No npm script entry, no CLAUDE.md mention, no CI workflow reference — effectively undiscoverable.

Turning this into a real, CI-wired test would mean committing the missing HTML fixture, starting a dev server in CI, and rewriting the walkthrough as actual assertions — a much bigger change than an audit-remediation pass warrants. Instead:

  • Replaced the hardcoded path with import('playwright') (normal module resolution), so a missing install now fails with a clear one-line fix instead of a cryptic ERR_MODULE_NOT_FOUND pointing at a path that only ever existed on one machine.
  • Documented in the file header (prerequisites: install playwright yourself, have test-admin.html served locally) and in CLAUDE.md's tests/ section that this is a manual, local-only dev tool — not part of npm test or CI.

Verification

  • node --check tests/playwright-admin.js — valid syntax.
  • Ran the script directly (no playwright installed in this sandbox's project) — confirmed it now fails with the intended clear instructions and exit code 1, instead of the old cryptic module-resolution error.
  • npm test: 67/67 passing (unaffected — this script was never part of the suite).
  • npm run lint: clean.

Type

  • docs

Checklist

  • Conventional Commit messages
  • npm test passes
  • npm run lint passes
  • npm run verify passes
  • Generated artifacts not hand-edited
  • CHANGELOG.md updated — not user-facing (dev-tooling doc fix only)
  • Built SPA assets committed — no admin-app source changed

Generated by Claude Code

PL-034: the script hardcoded an absolute path to one specific sandbox's
global playwright install (/opt/node22/...), assumed a test-admin.html
fixture that isn't committed anywhere in the repo, assumed a dev server
already running on port 9999, and had no pass/fail assertions (a run
with console errors still exited 0). None of that is fixable without
committing a fixture, starting a server in CI, and rewriting it as real
assertions — out of scope here.

Instead: replace the hardcoded path with a normal `import('playwright')`
that fails with clear install instructions instead of a cryptic
ERR_MODULE_NOT_FOUND, and document in the file header and CLAUDE.md that
this is a manual local tool, not part of `npm test`/CI.
@coderabbitai

coderabbitai Bot commented Jul 2, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 2e7c67ca-cadb-477c-b9e2-ad8ffb45a335

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/plugins-pr-c4-playwright-docs

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@qodo-code-review

Copy link
Copy Markdown

PR Summary by Qodo

Document Playwright admin walkthrough as manual-only; fix admin-app sync/lucide/codec

🐞 Bug fix 📝 Documentation ⚙️ Configuration changes 🕐 20-40 Minutes

Grey Divider

AI Description

• Fix admin SPA overlay imports for upstream codec and icon package renames.
• Ensure npm run check syncs vendored core sources before running svelte-check.
• Clarify Playwright admin walkthrough is manual-only and improve missing-dependency failure.
Diagram

graph TD
A["Admin SPA"] --> B["AppOverlay.svelte"] --> C["codec generateCSS"]
B --> D["@lucide/svelte"]
E["npm run check"] --> F["sync-core script"] --> G["svelte-check"]
H["CLAUDE.md"] --> I["playwright-admin.js"] --> J["Local test server"] --> A
Loading
High-Level Assessment

The following are alternative approaches to this PR:

1. Promote Playwright walkthrough into a real CI test
  • ➕ Detects regressions automatically (screens, console errors, key flows).
  • ➕ Eliminates undocumented local prerequisites.
  • ➖ Requires committing/maintaining a test harness (test-admin.html) and booting a server in CI.
  • ➖ Needs real assertions and stability work (timeouts, selectors, flake handling).
2. Keep Playwright as an optional devDependency
  • ➕ Avoids per-developer global installs and improves discoverability.
  • ➕ Enables a consistent npm run entry point without CI enforcement.
  • ➖ Adds weight to installs even though it’s not part of the automated suite.
  • ➖ Still doesn’t address missing harness/server requirements.
3. Replace with a lighter smoke check under node --test
  • ➕ Fits existing npm test harness and provides clear pass/fail signals.
  • ➕ Lower dependency footprint than full browser automation.
  • ➖ Won’t cover real UI rendering, screenshots, or browser console errors.
  • ➖ Less representative than Playwright for SPA behavior.

Recommendation: The PR’s approach (explicitly documenting manual-only behavior and improving failure mode when Playwright isn’t installed) is appropriate for an audit-remediation pass: it removes a machine-specific import and makes the tool’s constraints explicit without expanding scope into CI harness work. If UI regression coverage is desired later, follow up with a dedicated PR to add a committed harness + CI server startup and convert steps into assertions.

Files changed (4) +37 / -7

Bug fix (1) +3 / -3
AppOverlay.svelteUpdate overlay imports for codec generateCSS and @lucide/svelte +3/-3

Update overlay imports for codec generateCSS and @lucide/svelte

• Renames the codec import/call site from 'fa(...)' to 'generateCSS(...)' to match upstream API changes. Updates icon imports to use '@lucide/svelte' instead of 'lucide-svelte'.

SLASHED-for-WP/admin-app/src/AppOverlay.svelte

Documentation (2) +32 / -3
CLAUDE.mdDocument Playwright admin script as a manual-only exception to tests/ +7/-0

Document Playwright admin script as a manual-only exception to tests/

• Adds a note that 'tests/' is generally 'node --test'-driven via 'npm test', but explicitly calls out 'tests/playwright-admin.js' as a manual local QA walkthrough. Provides the direct run command and points to the file header for prerequisites.

CLAUDE.md

playwright-admin.jsMake Playwright import portable and add manual-only prerequisites header +25/-3

Make Playwright import portable and add manual-only prerequisites header

• Replaces a hardcoded absolute-path Playwright import with dynamic 'import('playwright')' and a clear error message + exit code 1 when missing. Expands the header comment to document that the script is manual/local-only, requires external Playwright installation, and expects a locally served 'test-admin.html' harness.

tests/playwright-admin.js

Other (1) +2 / -1
package.jsonAdd precheck sync hook and migrate to @lucide/svelte +2/-1

Add precheck sync hook and migrate to @lucide/svelte

• Introduces a 'precheck' script to run 'scripts/sync-core.mjs' before 'svelte-check' to avoid typechecking stale vendored sources. Replaces the deprecated 'lucide-svelte' dependency with '@lucide/svelte'.

SLASHED-for-WP/admin-app/package.json

@qodo-code-review

qodo-code-review Bot commented Jul 2, 2026

Copy link
Copy Markdown

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📜 Skill insights (0)

Context used
✅ Compliance rules (platform): 1 rule

Grey Divider


Action required

1. Lucide import breaks build ✗ Dismissed 🐞 Bug ≡ Correctness
Description
SLASHED-for-WP/admin-app/package.json removes the lucide-svelte dependency but multiple
admin-app components still import from 'lucide-svelte', so a clean install/build will fail with
module-resolution errors. This will break npm run build:admin-app (which runs npm ci inside
admin-app) on fresh checkouts/CI.
Code

SLASHED-for-WP/admin-app/package.json[R10-20]

    "dev": "vite",
    "prebuild": "node scripts/sync-core.mjs",
    "build": "vite build",
+    "precheck": "node scripts/sync-core.mjs",
    "check": "svelte-check --tsconfig ./tsconfig.json"
  },
  "dependencies": {
+    "@lucide/svelte": "^1.23.0",
    "fflate": "^0.8.3",
-    "lucide-svelte": "^1.0.1",
    "motion": "^12.23.24"
  },
Relevance

⭐⭐⭐ High

Team prioritizes clean npm ci/build reliability in admin-app; fixed similar install/build
breakages in PRs #126/#28.

PR-#126
PR-#28
PR-#118

ⓘ Recommendations generated based on similar findings in past PRs

Evidence
The PR removes lucide-svelte from the admin-app dependencies, but the codebase still has many
imports from 'lucide-svelte'; with npm ci those imports will no longer resolve, causing build
failures.

SLASHED-for-WP/admin-app/package.json[6-20]
SLASHED-for-WP/admin-app/src/App.svelte[1-6]
SLASHED-for-WP/admin-app/src/components/DomainPanel.svelte[1-4]
SLASHED-for-WP/admin-app/src/components/shell/SidebarNav.svelte[1-6]
SLASHED-for-WP/admin-app/src/components/shell/StudioHeader.svelte[1-4]
SLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelte[1-5]
SLASHED-for-WP/admin-app/package-lock.json[6-15]
SLASHED-for-WP/admin-app/package-lock.json[105-113]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`admin-app/package.json` switched from `lucide-svelte` to `@lucide/svelte`, but most Svelte components still import icons from `lucide-svelte`. After `npm ci`, `lucide-svelte` will not be installed, so Vite/Svelte compilation will fail.

### Issue Context
- Root build script runs `npm --prefix SLASHED-for-WP/admin-app ci` before building the admin app, so missing dependencies will surface immediately.
- Only `AppOverlay.svelte` was updated to `@lucide/svelte`; other components still use `lucide-svelte`.

### Fix Focus Areas
- SLASHED-for-WP/admin-app/package.json[7-20]
- SLASHED-for-WP/admin-app/src/App.svelte[1-14]
- SLASHED-for-WP/admin-app/src/components/DomainPanel.svelte[1-6]
- SLASHED-for-WP/admin-app/src/components/shell/SidebarNav.svelte[1-6]
- SLASHED-for-WP/admin-app/src/components/shell/StudioHeader.svelte[1-6]
- SLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelte[1-6]

### What to change
Choose one:
1) **Complete the migration**: replace all `from 'lucide-svelte'` imports across `admin-app/src/**` with `from '@lucide/svelte'`.
2) **Revert the dependency change**: keep/add `lucide-svelte` in `dependencies` and revert any import-path changes.

Afterward, ensure `admin-app/package-lock.json` matches the chosen dependency and `npm ci && npm run build` succeeds in `SLASHED-for-WP/admin-app`.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

Qodo Logo

Comment thread SLASHED-for-WP/admin-app/package.json
Brings in the already-merged #134/#135/#136/#138 content; the only
real conflict was two independent additions to CLAUDE.md's Key
scripts section (npm run check row from #136, the playwright-admin.js
manual-only note from #139) -- kept both.
@jackgranatowski
jackgranatowski merged commit 87a2d84 into claude/pr-469-audit-rebase-ggp0e4 Jul 2, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants