ark-dashboard-and-ui-testing

Ark Dashboard and UI

Test Ark Dashboard UI with Playwright and attach screenshots to PRs.

When to use this skill

Use this skill when:

• User wants to test the Ark dashboard
• User needs screenshots for a PR
• User asks to validate dashboard UI changes

Prerequisites

CRITICAL: Before proceeding, verify Kubernetes is available:

kubectl cluster-info

If this fails, STOP and inform the user:

Cannot continue without a Kubernetes environment. Please ensure Kind or another Kubernetes cluster is running and kubectl is configured.

Ark must be deployed first. Use the ark-setup skill if needed.

Setup

Port forward the dashboard and warm up:

kubectl port-forward svc/ark-dashboard 3000:3000 -n default &
curl http://localhost:3000

Test with Playwright

Use Playwright MCP tools to navigate and screenshot:

• browser_navigate - Open pages
• browser_wait_for - Wait for elements
• browser_click - Click elements
• browser_take_screenshot - Capture screenshots

Screenshots save to .playwright-mcp/screenshots/. Move to ./screenshots/ for organization.

Upload Screenshots for PRs

Check if user has a scratch repo:

gh repo view <USERNAME>/scratch

If not, suggest creating: scratch/pull-request-attachments/<org>_<repo>/

Upload screenshots:

cd /tmp && git clone git@github.com:<USERNAME>/scratch.git
mkdir -p scratch/pull-request-attachments/<org>_<repo>
cp ./screenshots/*.png scratch/pull-request-attachments/<org>_<repo>/
cd scratch && git add . && git commit -m "chore: screenshots for <org>/<repo> PR" && git push

Reference in PR body:

![Screenshot](https://raw.githubusercontent.com/<USERNAME>/scratch/master/pull-request-attachments/<org>_<repo>/01-screenshot.png)

Update PR:

gh api repos/<org>/<repo>/pulls/<NUMBER> -X PATCH -f body="..."