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.
129 lines • 3.47 kB
TypeScript
/**
* Viewport and device emulation tools for Supapup
* Provides Chrome DevTools-like responsive design testing
*/
import { Page } from 'puppeteer';
export interface ViewportPreset {
name: string;
width: number;
height: number;
deviceScaleFactor?: number;
isMobile?: boolean;
hasTouch?: boolean;
isLandscape?: boolean;
}
export declare class ViewportTools {
private page;
private readonly presets;
constructor(page: Page);
/**
* Set viewport with advanced options like DevTools
*/
setViewport(params: {
width: number;
height: number;
deviceScaleFactor?: number;
zoom?: number;
isMobile?: boolean;
hasTouch?: boolean;
isLandscape?: boolean;
preset?: string;
}): Promise<{
success: boolean;
viewport: {
width: any;
height: any;
deviceScaleFactor: any;
zoom: number;
isMobile: any;
hasTouch: any;
};
}>;
/**
* Toggle device emulation mode (responsive design mode)
*/
toggleDeviceMode(enabled: boolean): Promise<{
success: boolean;
deviceModeEnabled: boolean;
}>;
/**
* Get available viewport presets
*/
getPresets(): ViewportPreset[];
/**
* Test responsive design at multiple breakpoints (original method)
*/
testResponsiveBreakpoints(breakpoints?: number[]): Promise<{
width: number;
issues: string[];
timestamp: Date;
}[]>;
/**
* Emulate network conditions (for responsive + slow network testing)
*/
setNetworkConditions(preset: '3G' | '4G' | 'offline' | 'online'): Promise<{
success: boolean;
networkCondition: "offline" | "3G" | "4G" | "online";
}>;
private sectionsCache;
private sectionScreenshots;
/**
* Test responsive design by analyzing page sections
*/
testResponsive(url: string): Promise<{
url: string;
sectionsFound: number;
sections: {
id: any;
type: any;
description: any;
bounds: any;
}[];
fullPagePreview: string;
message: string;
}>;
/**
* Test specific section across multiple device sizes
*/
testResponsiveSection(sectionId: number): Promise<{
sectionId: number;
sectionType: string;
sectionDescription: string;
devicesTestedCount: number;
screenshotsCacheId: string;
message: string;
devices: {
index: number;
device: any;
preset: any;
viewport: any;
}[];
screenshots?: undefined;
} | {
sectionId: number;
sectionType: string;
sectionDescription: string;
devicesTestedCount: number;
screenshots: {
device: any;
preset: any;
viewport: any;
screenshot: any;
}[];
screenshotsCacheId?: undefined;
message?: undefined;
devices?: undefined;
}>;
/**
* Get cached screenshot for specific device
*/
getResponsiveSectionScreenshot(cacheId: string, deviceIndex: number): Promise<{
device: any;
preset: any;
viewport: any;
screenshot: any;
deviceIndex: number;
totalDevices: number;
}>;
}
//# sourceMappingURL=viewport-tools.d.ts.map