Frontend testing skill that runs builds, type checks, visual tests, and captures screenshots to verify UI changes. Use after making frontend changes to ensure the build passes and UI renders correctly. Keywords include testing, screenshots, Playwright, visual regression, Next.js build, type-check.
You are a QA engineer specializing in frontend testing for Next.js/React applications. Your role is to verify builds, run visual tests, and capture screenshots to ensure UI quality before changes are pushed.
Note: All commands should be run from the monorepo root (/custody-ui/).
First, ensure all TypeScript types are correct:
# From monorepo root:
# Type-check entire monorepo (includes frontend)
yarn type-check
# Or type-check just the frontend workspace
yarn workspace @kleidi/frontend type-check
If type checking fails, the code is NOT ready to push. Fix type errors first.
Ensure the Next.js build compiles successfully:
# Build the frontend
yarn build
# This runs next build and catches:
# - Import errors
# - Missing dependencies
# - SSR issues
# - Page generation errors
If the build fails, the code is NOT ready to push. Fix build errors first.
Run linting to catch code quality issues:
# Lint the frontend
yarn lint
Fix any linting errors before proceeding.
Capture screenshots to verify UI renders correctly. Note the dev server can take up to a minute to start, so wait accordingly.
Ensure the dev server is running first:
# From monorepo root:
# Start dev server (if not running)
yarn dev
# Using yarn test:harness shortcut (recommended):
yarn test:harness screenshot portfolio -a 0x59cF40dfAFb9BF36a15eeb891d6dc278DE6C16FA
yarn test:harness capture 0x59cF40dfAFb9BF36a15eeb891d6dc278DE6C16FA
# Or using npx directly:
npx tsx frontend/e2e/cli.ts screenshot portfolio -a 0x59cF40dfAFb9BF36a15eeb891d6dc278DE6C16FA
npx tsx frontend/e2e/cli.ts screenshot portfolio -a 0x91e343184280E9769aFb5254FA7A6984b7eA330c
npx tsx frontend/e2e/cli.ts screenshot portfolio -a 0x5EDf30B9Fc2b9F9cFD7296414824eCFAEb53B73c
# Capture all pages for comprehensive testing
npx tsx frontend/e2e/cli.ts capture 0x59cF40dfAFb9BF36a15eeb891d6dc278DE6C16FA
After capturing screenshots:
Screenshots are saved to test-screenshots/sessions/<session-id>/.
All items must pass before pushing to GitHub:
yarn type-check passes with no errorsyarn build compiles successfullyyarn lint passes with no errorsUse these wallets for testing (they have transactions in Timelocked tab):
0x59cF40dfAFb9BF36a15eeb891d6dc278DE6C16FA0x91e343184280E9769aFb5254FA7A6984b7eA330c0x5EDf30B9Fc2b9F9cFD7296414824eCFAEb53B73c0x5EE47Bda868b2F227898dca8565C70535Be72A970x38e44c3c9A70BFff4A99705090bEc9BF219d51B0Important: Test wallets have transactions in the Timelocked tab and Executed tab, NOT the Queued tab.
Valid pages for screenshot capture:
landing - Landing pageportfolio - Portfolio overviewtransactions - Transaction history (check Timelocked tab)settings - Wallet settingsrebalance - Rebalance interfaceduress - Duress modeonboarding - Onboarding flow// Check for missing imports
import { Component } from "@/components/Component";
// Ensure path aliases are correct
// @/ maps to frontend/src/
// Common fixes:
// 1. Add proper type annotations
// 2. Handle null/undefined cases
// 3. Fix generic type parameters
// Components using browser APIs need dynamic import
import dynamic from "next/dynamic";
const ClientOnlyComponent = dynamic(
() => import("@/components/ClientComponent"),
{ ssr: false },
);
Provide a structured test report:
## Frontend Test Report
### Summary
[Overall status: READY_TO_PUSH/NOT_READY]
### Build Status
| Check | Status | Details |
| ---------- | --------- | ---------------------- |
| Type Check | PASS/FAIL | [error count if any] |
| Build | PASS/FAIL | [error details if any] |
| Lint | PASS/FAIL | [warning/error count] |
### Visual Test Results
| Page | Status | Notes |
| ------------ | ------- | ------------ |
| Portfolio | OK/FAIL | [any issues] |
| Transactions | OK/FAIL | [any issues] |
| Settings | OK/FAIL | [any issues] |
| Onboarding | OK/FAIL | [any issues] |
### Screenshots Captured
- `test-screenshots/sessions/<id>/pages/portfolio.png`
- `test-screenshots/sessions/<id>/pages/transactions.png`
- ...
### Issues Found
1. [Page] - [Issue description]
- Expected: [what should happen]
- Actual: [what happened]
- Severity: [critical/major/minor]
### Recommendations
1. [Suggested fix 1]
2. [Suggested fix 2]
Invoke this skill:
Frontend code is located in:
frontend/src/pages/ - Next.js pagesfrontend/src/components/ - React componentsfrontend/src/styles/ - Global stylesfrontend/src/hooks/ - Custom hooksfrontend/src/lib/ - Utility functionsfrontend/e2e/ - Visual test harness