or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-features.mdcapture-methods.mdconfiguration.mddevice-emulation.mdindex.md
tile.json

index.mddocs/

Capture Website

Capture Website is a modern Node.js library that provides a comprehensive solution for capturing screenshots of websites using Puppeteer (Chrome) under the hood. It offers three output formats (file, buffer, base64), extensive customization options, and advanced features like device emulation, element targeting, and ad blocking.

Package Information

  • Package Name: capture-website
  • Package Type: npm
  • Language: JavaScript (with TypeScript definitions)
  • Installation: npm install capture-website
  • Engine Requirements: Node.js >=18

Core Imports

import captureWebsite from 'capture-website';

For CommonJS:

const captureWebsite = require('capture-website');

Device emulation constants:

import { devices } from 'capture-website';

Type definitions for advanced usage:

import { type LaunchOptions } from 'capture-website';

Basic Usage

import captureWebsite from 'capture-website';

// Basic screenshot to file
await captureWebsite.file('https://example.com', 'screenshot.png');

// Screenshot with custom options
await captureWebsite.file('https://example.com', 'screenshot.png', {
  width: 1920,
  height: 1080,
  fullPage: true,
  type: 'jpeg',
  quality: 0.8
});

// Screenshot to buffer for further processing
const buffer = await captureWebsite.buffer('https://example.com', {
  element: '.main-content',
  hideElements: ['.sidebar', '.ads']
});

// Screenshot to base64 string
const base64 = await captureWebsite.base64('https://example.com', {
  emulateDevice: 'iPhone X'
});

Architecture

Capture Website is built around several key components:

  • Output Methods: Three capture methods (file, buffer, base64) for different use cases
  • Puppeteer Integration: Manages browser lifecycle and page interaction automatically
  • Device Emulation: Built-in support for mobile and tablet device simulation
  • Element Targeting: Precise screenshot capture of specific DOM elements
  • Customization Engine: Extensive options for viewport, quality, timing, and behavior control
  • Ad Blocking: Integrated ad blocking using Ghostery adblocker
  • Content Injection: Support for custom CSS, JavaScript, and HTTP headers

Capabilities

Screenshot Capture Methods

Core screenshot capture functionality with three output formats for different use cases.

// Save screenshot to file system
function file(
  input: string,
  outputFilePath: string,
  options?: FileOptions
): Promise<void>;

// Return screenshot as binary buffer
function buffer(input: string, options?: Options): Promise<Uint8Array>;

// Return screenshot as base64 string
function base64(input: string, options?: Options): Promise<string>;

Screenshot Capture

Configuration Options

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

interface Options {
  // Input and output control
  inputType?: 'url' | 'html';
  type?: 'png' | 'jpeg' | 'webp';
  quality?: number;
  
  // Viewport and display
  width?: number;
  height?: number;
  scaleFactor?: number;
  emulateDevice?: string;
  fullPage?: boolean;
  defaultBackground?: boolean;
  
  // Timing and waiting
  timeout?: number;
  delay?: number;
  waitForElement?: string;
  
  // Element targeting and manipulation
  element?: string;
  clip?: BoundingBox;
  hideElements?: string[];
  removeElements?: string[];
  clickElement?: string;
  scrollToElement?: string | ScrollToElementOptions;
  inset?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>;
}

Configuration Options

Advanced Features

Advanced functionality including device emulation, content injection, authentication, and browser customization.

interface AdvancedOptions {
  // Device and environment
  emulateDevice?: string;
  darkMode?: boolean;
  userAgent?: string;
  
  // Content injection
  modules?: string[];
  scripts?: string[];
  styles?: string[];
  preloadFunction?: EvaluateFunc<unknown[]>;
  
  // Network and authentication
  headers?: Record<string, string>;
  cookies?: Array<string | Protocol.Network.CookieParam>;
  authentication?: Authentication;
  
  // Browser control
  launchOptions?: PuppeteerNodeLaunchOptions;
  beforeScreenshot?: BeforeScreenshot;
  debug?: boolean;
  
  // Performance and behavior
  blockAds?: boolean;
  isJavaScriptEnabled?: boolean;
  disableAnimations?: boolean;
}

Advanced Features

Device Emulation

Built-in device emulation support for mobile and tablet screenshots.

// Available devices array
const devices: string[];

Device Emulation

Types

Core type definitions used throughout the API.

interface BoundingBox {
  x: number;
  y: number;
  width: number;
  height: number;
}

interface Authentication {
  username: string;
  password?: string;
}

interface ScrollToElementOptions {
  element: string;
  offsetFrom: 'top' | 'right' | 'bottom' | 'left';
  offset: number;
}

type BeforeScreenshot = (page: Page, browser: Browser) => void;

interface FileOptions extends Options {
  overwrite?: boolean;
}