Does it monitor network performance?

Yes, it tracks network request failures (404s, 500s), resource loading times, and key performance metrics like First Contentful Paint and DOM Ready time.

Which devices can I simulate for responsive testing?

The skill includes 14 presets covering iPhone (X/12/13/SE), Pixel 5, Galaxy S21, iPad Pro, and various desktop resolutions to ensure full responsive compatibility.

Where does the skill save captured screenshots?

Screenshots are saved to a configurable directory, typically .claude/screenshots, with standardized naming conventions including the page name, viewport, and timestamp.

What is React hydration error detection?

Hydration errors occur when server-rendered HTML doesn't match client-rendered content. This skill specifically identifies React error #185 and Next.js hydration mismatches automatically.

Can this skill test pages behind a login?

Yes, it supports form-based authentication by allowing you to define login URLs, credentials, and selectors for automated sign-in during the validation process.

Web Validation & Browser Testing

Name: Web Validation & Browser Testing
Author: bejranonda

bybejranonda

•

セキュリティとテスト

Automates comprehensive web page validation, including JavaScript error detection, authentication handling, and responsive design testing across 14 device presets.

概要

This skill provides a robust framework for validating web applications by leveraging headless browser automation to detect JavaScript errors, monitor console output, and identify network failures. It features advanced capabilities like React hydration error detection (#185), multi-viewport screenshot capture for visual debugging, and automated authentication flows for testing protected dashboards. Whether you are performing pre-deployment checks or debugging responsive layouts, this skill ensures your web components are production-ready by collecting performance metrics and identifying critical runtime issues across desktop and mobile viewports.

主な機能

Visual evidence capture via automated mobile and desktop screenshots
Multi-viewport responsive testing with 14 built-in device presets
9 GitHub stars
Advanced React hydration mismatch and error boundary detection
Form-based authentication support for validating protected pages
Automated JavaScript error categorization and console log monitoring

ユースケース

Verifying web-based dashboards and protected admin panels before deployment
Debugging cross-browser compatibility and responsive layout issues
Automating regression testing for React applications to prevent hydration errors

概要

主な機能

Visual evidence capture via automated mobile and desktop screenshots
Multi-viewport responsive testing with 14 built-in device presets
9 GitHub stars
Advanced React hydration mismatch and error boundary detection
Form-based authentication support for validating protected pages
Automated JavaScript error categorization and console log monitoring

ユースケース

Verifying web-based dashboards and protected admin panels before deployment
Debugging cross-browser compatibility and responsive layout issues
Automating regression testing for React applications to prevent hydration errors