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

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