ai-debug-local-mcp
Version:
🎯 ENHANCED AI GUIDANCE v4.1.2: Dramatically improved tool descriptions help AI users choose the right tools instead of 'close enough' options. Ultra-fast keyboard automation (10x speed), universal recording, multi-ecosystem debugging support, and compreh
99 lines • 2.87 kB
TypeScript
/**
* Visual Validation Tools
*
* Provides visual validation capabilities for UI components including:
* - Visual regression testing
* - Element visibility checks
* - Layout validation
* - Component rendering verification
* - Map/chart validation
*/
import { Page } from 'playwright';
export interface VisualValidationResult {
passed: boolean;
issues: ValidationIssue[];
screenshots: {
baseline?: string;
current: string;
diff?: string;
};
metrics: {
renderTime?: number;
elementCount?: number;
visibleArea?: number;
interactiveElements?: number;
visualDifference?: number;
pixelsDifferent?: number;
};
}
export interface ValidationIssue {
type: 'missing' | 'hidden' | 'misaligned' | 'rendering' | 'interaction' | 'performance';
severity: 'critical' | 'warning' | 'info';
message: string;
element?: string;
expected?: any;
actual?: any;
}
export interface MapValidationResult extends VisualValidationResult {
mapSpecific: {
hasMapContainer: boolean;
hasMapTiles: boolean;
hasMarkers: boolean;
markerCount: number;
mapProvider?: string;
apiKeyStatus?: 'valid' | 'invalid' | 'missing';
loadErrors: string[];
};
}
export declare class VisualValidationTools {
/**
* Validate that a UI component is properly rendered
*/
static validateComponent(page: Page, selector: string, options?: {
checkVisibility?: boolean;
checkInteractivity?: boolean;
checkLayout?: boolean;
expectedDimensions?: {
minWidth?: number;
minHeight?: number;
};
timeout?: number;
}): Promise<VisualValidationResult>;
/**
* Validate Google Maps or similar map components
*/
static validateMap(page: Page, mapSelector?: string, options?: {
checkMarkers?: boolean;
expectedMarkerCount?: number;
checkApiKey?: boolean;
timeout?: number;
}): Promise<MapValidationResult>;
/**
* Perform visual regression testing
*/
static visualRegression(page: Page, selector: string, baselineImage?: string, options?: {
threshold?: number;
highlightDifferences?: boolean;
}): Promise<VisualValidationResult>;
/**
* Check if element is obscured by other elements
*/
private static isElementObscured;
/**
* Check layout issues
*/
private static checkLayout;
/**
* Capture screenshot of entire page
*/
private static captureScreenshot;
/**
* Capture screenshot of specific element
*/
private static captureElementScreenshot;
/**
* Compare two images and generate diff
*/
private static compareImages;
}
//# sourceMappingURL=visual-validation-tools.d.ts.map