# Browser Tests

> Browser tool usage guide for testing and verification. Use when you need to test web pages, capture screenshots, verify deployments, or check responsive design.

- Skill: `luissambrano/browser-tests` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add luissambrano/browser-tests`
- Raw SKILL.md: https://api.skillmd.com/api/skills/luissambrano/browser-tests/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: LuisSambrano (https://skillmd.com/u/luissambrano)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/luissambrano/browser-tests

---


# Browser Testing & Verification

> [!IMPORTANT]
> This skill MUST be executed strictly under the **Omni-Architect Agent Protocol v1.0**.
> All tool executions, code modifications, and communications MUST adhere to the 13 core protocols.

Guide for using the browser tool effectively during testing and verification.

## When to Use

- Verifying deployed sites
- Testing responsive design at different breakpoints
- Capturing screenshots for walkthroughs
- Validating user flows end-to-end
- Visual regression testing
- Checking cross-browser rendering

## Responsive Breakpoints

| Device    | Width  | Usage            |
| --------- | ------ | ---------------- |
| Mobile    | 375px  | iPhone SE/Mini   |
| Mobile L  | 428px  | iPhone Pro Max   |
| Tablet    | 768px  | iPad             |
| Desktop   | 1024px | Laptop           |
| Desktop L | 1440px | External monitor |

## Workflow

### 1. Open Page

Navigate to the target URL using `browser_subagent`.

### 2. Visual Inspection

- Check layout integrity
- Verify dark mode rendering
- Confirm typography and spacing
- Validate color contrast

### 3. Interactive Testing

- Click buttons and links
- Fill and submit forms
- Test navigation flows
- Verify error states

### 4. Responsive Testing

Resize the browser to each breakpoint and verify:

- No horizontal overflow
- Text remains readable
- Touch targets are adequate (≥44px)
- Images scale correctly

### 5. Capture Evidence

Take screenshots at key states for documentation in walkthroughs.

## Best Practices

- Always test on mobile (375px) first
- Check both dark and light modes
- Verify keyboard navigation works
- Test with and without JavaScript
- Validate forms with invalid data
- Check loading states and empty states