CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-capture-website

Capture screenshots of websites using Puppeteer with extensive customization options

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

configuration.mddocs/

Configuration Options

Comprehensive configuration system for controlling screenshot behavior, appearance, and timing.

Capabilities

Input and Output Control

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
});

Viewport and Display Control

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
});

Timing and Waiting Control

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'
});

Element Targeting and Positioning

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
  }
});

Behavioral Control

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
});

Configuration Patterns

Mobile-First Screenshots

// 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-Quality Print Screenshots

// 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
});

Fast Capture for Testing

// 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
});

Install with Tessl CLI

npx tessl i tessl/npm-capture-website

docs

advanced-features.md

capture-methods.md

configuration.md

device-emulation.md

index.md

tile.json