How do I install the Test Frontend skill?

Run npx skillmds@latest add tomevault-io/test-frontend-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Test Frontend safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Test Frontend?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Test Frontend free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Test Frontend?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Test Frontend by tomevault-io — Agent Skill

Name: Test Frontend
Author: tomevault-io

File contents

Frontend Testing with Agent-Browser

Test the web interface using agent-browser for interactive browser automation and validation.

Prerequisites

Ensure the local server is running:

make run-local  # Starts server on localhost:8080

Basic Usage

1. Open the browser

agent-browser open "http://127.0.0.1:8080$ARGUMENTS"

If no arguments provided, opens the root page.

2. Take a snapshot

Get the accessibility tree with element references:

agent-browser snapshot

This shows all interactive elements with unique IDs (e.g., @e5, @e12)

3. Interact with elements

# Click on an element
agent-browser click @e5

# Fill a form field
agent-browser fill @e12 "test@example.com"

# Type text
agent-browser type @e8 "password123"

4. Capture screenshots

agent-browser screenshot /tmp/page.png

5. Close browser

agent-browser close

Common Testing Scenarios

Login Flow Validation

Open login page
Snapshot to find form elements
Fill username and password fields
Click submit button
Verify redirect and session

HTMX Dynamic Updates

Load page with HTMX components
Take snapshot before interaction
Trigger HTMX action (click, form submit)
Take snapshot after to verify DOM updates
Confirm expected changes occurred

Form Submission

Navigate to form page
Identify form fields via snapshot
Fill all required fields
Submit form
Verify success message or redirect

Session Management

Test login/logout flow
Verify session persistence
Check unauthorized access handling

Full Example Workflow

# 1. Start local server (if not running)
make run-local

# 2. In another terminal, test login
agent-browser open "http://127.0.0.1:8080/login"
agent-browser snapshot  # Find username/password field IDs

# 3. Fill login form (replace @e5, @e6 with actual IDs)
agent-browser fill @e5 "admin@example.com"
agent-browser fill @e6 "password123"
agent-browser click @e7  # Submit button

# 4. Verify redirect to dashboard
agent-browser snapshot  # Should show dashboard elements

# 5. Take screenshot for documentation
agent-browser screenshot /tmp/dashboard.png

# 6. Cleanup
agent-browser close

Tips

Always take a snapshot first to find element IDs
Use --noproxy '*' with curl for health checks
Element IDs are temporary - get fresh snapshot after page changes
Screenshots help document UI state for debugging

Documentation

Full command reference: https://github.com/vercel-labs/agent-browser

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: test-frontend-2description: Test the web frontend using agent-browser for interactive testing, HTMX verification, and screenshot capture Use when this capability is needed.---# Frontend Testing with Agent-BrowserTest the web interface using **agent-browser** for interactive browser automation and validation.## PrerequisitesEnsure the local server is running:```bashmake run-local # Starts server on localhost:8080```## Basic Usage### 1. Open the browser```bashagent-browser open "http://127.0.0.1:8080$ARGUMENTS"```If no arguments provided, opens the root page.### 2. Take a snapshotGet the accessibility tree with element references:```bashagent-browser snapshot```This shows all interactive elements with unique IDs (e.g., `@e5`, `@e12`)### 3. Interact with elements```bash# Click on an elementagent-browser click @e5# Fill a form fieldagent-browser fill @e12 "test@example.com"# Type textagent-browser type @e8 "password123"```### 4. Capture screenshots```bashagent-browser screenshot /tmp/page.png```### 5. Close browser```bashagent-browser close```## Common Testing Scenarios### Login Flow Validation1. Open login page2. Snapshot to find form elements3. Fill username and password fields4. Click submit button5. Verify redirect and session### HTMX Dynamic Updates1. Load page with HTMX components2. Take snapshot before interaction3. Trigger HTMX action (click, form submit)4. Take snapshot after to verify DOM updates5. Confirm expected changes occurred### Form Submission1. Navigate to form page2. Identify form fields via snapshot3. Fill all required fields4. Submit form5. Verify success message or redirect### Session Management1. Test login/logout flow2. Verify session persistence3. Check unauthorized access handling## Full Example Workflow```bash# 1. Start local server (if not running)make run-local# 2. In another terminal, test loginagent-browser open "http://127.0.0.1:8080/login"agent-browser snapshot # Find username/password field IDs# 3. Fill login form (replace @e5, @e6 with actual IDs)agent-browser fill @e5 "admin@example.com"agent-browser fill @e6 "password123"agent-browser click @e7 # Submit button# 4. Verify redirect to dashboardagent-browser snapshot # Should show dashboard elements# 5. Take screenshot for documentationagent-browser screenshot /tmp/dashboard.png# 6. Cleanupagent-browser close```## Tips- Always take a snapshot first to find element IDs- Use `--noproxy '*'` with curl for health checks- Element IDs are temporary - get fresh snapshot after page changes- Screenshots help document UI state for debugging## DocumentationFull command reference: https://github.com/vercel-labs/agent-browser---> Converted and distributed by [TomeVault](https://tomevault.io/claim/lllypuk) — claim your Tome and manage your conversions.

Frequently asked questions

Test Frontend