Comprehensive configuration system for controlling screenshot behavior, appearance, and timing.
Configure how input is processed and output is generated.
interface InputOutputOptions {
/** Input type - 'url' for URLs/files, 'html' for HTML content */
inputType?: 'url' | 'html';
/** Image format for output */
type?: 'png' | 'jpeg' | 'webp';
/** Image quality (0-1) for JPEG and WebP formats only */
quality?: number;
}Usage Examples:
// HTML content input
await captureWebsite.file('<h1>Hello</h1>', 'output.png', {
inputType: 'html'
});
// JPEG output with quality control
await captureWebsite.file('https://example.com', 'output.jpg', {
type: 'jpeg',
quality: 0.8
});
// WebP output with high compression
await captureWebsite.file('https://example.com', 'output.webp', {
type: 'webp',
quality: 0.6
});Control the browser viewport size, scaling, and page rendering.
interface ViewportOptions {
/** Page width in pixels */
width?: number;
/** Page height in pixels */
height?: number;
/** Device scale factor (like retina displays) */
scaleFactor?: number;
/** Capture entire scrollable page instead of just viewport */
fullPage?: boolean;
/** Include default white background (disable for transparency) */
defaultBackground?: boolean;
}Usage Examples:
// Custom viewport size
await captureWebsite.file('https://example.com', 'desktop.png', {
width: 1920,
height: 1080
});
// High DPI (retina) screenshot
await captureWebsite.file('https://example.com', 'retina.png', {
width: 1280,
height: 800,
scaleFactor: 3
});
// Full page capture
await captureWebsite.file('https://example.com', 'fullpage.png', {
fullPage: true
});
// Transparent background
await captureWebsite.file('https://example.com', 'transparent.png', {
defaultBackground: false
});Configure timeouts and delays for proper page loading and rendering.
interface TimingOptions {
/** Timeout in seconds for page loading (0 to disable) */
timeout?: number;
/** Delay in seconds after page load before screenshot */
delay?: number;
/** Wait for specific DOM element to be visible before capture */
waitForElement?: string;
}Usage Examples:
// Extended timeout for slow pages
await captureWebsite.file('https://slow-site.com', 'slow.png', {
timeout: 120 // 2 minutes
});
// Wait for animations to complete
await captureWebsite.file('https://animated-site.com', 'settled.png', {
delay: 3 // 3 seconds
});
// Wait for specific content to load
await captureWebsite.file('https://dynamic-site.com', 'loaded.png', {
waitForElement: '#main-content'
});
// Combine timing options
await captureWebsite.file('https://complex-site.com', 'ready.png', {
timeout: 60,
delay: 2,
waitForElement: '.data-loaded'
});Control which parts of the page to capture and how to position the screenshot.
interface ElementTargetingOptions {
/** Capture only the specified DOM element */
element?: string;
/** Define custom clipping rectangle */
clip?: BoundingBox;
/** Hide elements matching CSS selectors (visibility: hidden) */
hideElements?: string[];
/** Remove elements matching CSS selectors (display: none) */
removeElements?: string[];
/** Click element before capturing */
clickElement?: string;
/** Scroll to element before capturing */
scrollToElement?: string | ScrollToElementOptions;
/** Inset/expand the screenshot bounds */
inset?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>;
}
interface BoundingBox {
x: number;
y: number;
width: number;
height: number;
}
interface ScrollToElementOptions {
element: string;
offsetFrom: 'top' | 'right' | 'bottom' | 'left';
offset: number;
}Usage Examples:
// Capture specific element
await captureWebsite.file('https://example.com', 'header.png', {
element: 'header.main-nav'
});
// Custom clipping rectangle
await captureWebsite.file('https://example.com', 'clipped.png', {
clip: {
x: 0,
y: 100,
width: 800,
height: 600
}
});
// Hide unwanted elements
await captureWebsite.file('https://example.com', 'clean.png', {
hideElements: ['.sidebar', '.ads', '#popup']
});
// Remove elements that break layout
await captureWebsite.file('https://example.com', 'no-ads.png', {
removeElements: ['.advertisement', '.popup-overlay']
});
// Click element to reveal content
await captureWebsite.file('https://example.com', 'expanded.png', {
clickElement: '.expand-button'
});
// Scroll to specific content
await captureWebsite.file('https://long-page.com', 'footer.png', {
scrollToElement: 'footer'
});
// Advanced scrolling with offset
await captureWebsite.file('https://example.com', 'offset.png', {
scrollToElement: {
element: '#target',
offsetFrom: 'top',
offset: 100
}
});
// Add padding around element
await captureWebsite.file('https://example.com', 'padded.png', {
element: '.main-content',
inset: -20 // 20px padding on all sides
});
// Custom inset per side
await captureWebsite.file('https://example.com', 'custom-inset.png', {
inset: {
top: 10,
right: 20,
bottom: 10,
left: 20
}
});Control page behavior and interactions during capture.
interface BehaviorOptions {
/** Disable CSS animations and transitions */
disableAnimations?: boolean;
/** Enable ad blocking */
blockAds?: boolean;
/** Enable JavaScript execution on the page */
isJavaScriptEnabled?: boolean;
}Usage Examples:
// Disable animations for stable screenshots
await captureWebsite.file('https://animated-site.com', 'static.png', {
disableAnimations: true
});
// Disable ad blocking for testing ads
await captureWebsite.file('https://site-with-ads.com', 'with-ads.png', {
blockAds: false
});
// Disable JavaScript
await captureWebsite.file('https://js-heavy-site.com', 'no-js.png', {
isJavaScriptEnabled: false
});// Mobile viewport
await captureWebsite.file('https://responsive-site.com', 'mobile.png', {
width: 375,
height: 667,
scaleFactor: 2,
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)'
});// High resolution for print
await captureWebsite.file('https://example.com', 'print.png', {
width: 2480,
height: 3508, // A4 at 300 DPI
scaleFactor: 1,
type: 'png',
fullPage: true
});// Quick capture with minimal quality
await captureWebsite.file('https://example.com', 'test.jpg', {
width: 800,
height: 600,
type: 'jpeg',
quality: 0.5,
timeout: 10,
delay: 0
});