supapup
Version:
⚡ Lightning-fast MCP browser dev tool. Navigate → Get instant structured data. No screenshots needed! Puppeteer: 📸 → CSS selectors → JS eval. Supapup: semantic IDs ready to use. 10x faster, 90% fewer tokens.
67 lines • 1.78 kB
TypeScript
/**
* Hover state detection for Supapup
* Detects elements with hover effects and captures visual changes
*/
import { Page } from 'puppeteer';
export interface HoverableElement {
id: string;
selector: string;
tagName: string;
text?: string;
type?: string;
hasTransition: boolean;
transitionDuration?: string;
hoverType: 'css' | 'javascript' | 'both';
confidence: number;
isDropdownTrigger?: boolean;
dropdownContentId?: string;
parentHoverId?: string;
}
export interface HoverCapture {
timestamp: number;
screenshot: string;
styles?: Record<string, string>;
}
export interface HoverSequence {
hoverId: string;
element: {
selector: string;
bounds: {
x: number;
y: number;
width: number;
height: number;
};
};
captures: HoverCapture[];
changes: {
hasVisualChange: boolean;
styleChanges: string[];
sizeChange: boolean;
};
}
export declare class HoverDetector {
private page;
constructor(page: Page);
/**
* Detect all hoverable elements on the page
*/
detectHoverableElements(): Promise<HoverableElement[]>;
/**
* Capture hover sequence for a specific element
*/
captureHoverSequence(hoverId: string, duration?: number, interval?: number): Promise<HoverSequence | null>;
/**
* Capture element state including screenshot and styles
*/
private captureElementState;
/**
* Analyze captures to detect changes
*/
private analyzeChanges;
/**
* Generate agent page snippet for hoverable elements
*/
generateHoverableSection(elements: HoverableElement[]): string;
}
//# sourceMappingURL=hover-detector.d.ts.map