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

device-emulation.mddocs/

Device Emulation

Built-in device emulation support for mobile and tablet screenshots using Puppeteer's device database.

Capabilities

Available Devices

Get the list of all supported devices for emulation.

/** Array of all available device names for emulation */
const devices: string[];

Usage Examples:

import { devices } from 'capture-website';

// List all available devices
console.log(devices);
// Output: [
//   'Blackberry PlayBook',
//   'Blackberry PlayBook landscape',
//   'Galaxy Note 3',
//   'Galaxy Note 3 landscape',
//   'Galaxy Note II',
//   'Galaxy Note II landscape',
//   'Galaxy S III',
//   'Galaxy S III landscape',
//   'Galaxy S5',
//   'Galaxy S5 landscape',
//   'iPad',
//   'iPad landscape',
//   'iPad Mini',
//   'iPad Mini landscape',
//   'iPad Pro',
//   'iPad Pro landscape',
//   'iPhone 4',
//   'iPhone 4 landscape',
//   'iPhone 5',
//   'iPhone 5 landscape',
//   'iPhone 6',
//   'iPhone 6 landscape',
//   'iPhone 6 Plus',
//   'iPhone 6 Plus landscape',
//   'iPhone 7',
//   'iPhone 7 landscape',
//   'iPhone 7 Plus',
//   'iPhone 7 Plus landscape',
//   'iPhone 8',
//   'iPhone 8 landscape',
//   'iPhone 8 Plus',
//   'iPhone 8 Plus landscape',
//   'iPhone SE',
//   'iPhone SE landscape',
//   'iPhone X',
//   'iPhone X landscape',
//   'iPhone XR',
//   'iPhone XR landscape',
//   'iPhone 11',
//   'iPhone 11 landscape',
//   'iPhone 11 Pro',
//   'iPhone 11 Pro landscape',
//   'iPhone 11 Pro Max',
//   'iPhone 11 Pro Max landscape',
//   'iPhone 12',
//   'iPhone 12 landscape',
//   'iPhone 12 Pro',
//   'iPhone 12 Pro landscape',
//   'iPhone 12 Pro Max',
//   'iPhone 12 Pro Max landscape',
//   'iPhone 12 Mini',
//   'iPhone 12 Mini landscape',
//   'iPhone 13',
//   'iPhone 13 landscape',
//   'iPhone 13 Pro',
//   'iPhone 13 Pro landscape',
//   'iPhone 13 Pro Max',
//   'iPhone 13 Pro Max landscape',
//   'iPhone 13 Mini',
//   'iPhone 13 Mini landscape',
//   'Kindle Fire HDX',
//   'Kindle Fire HDX landscape',
//   'LG Optimus L70',
//   'LG Optimus L70 landscape',
//   'Microsoft Lumia 550',
//   'Microsoft Lumia 550 landscape',
//   'Microsoft Lumia 950',
//   'Microsoft Lumia 950 landscape',
//   'Nexus 10',
//   'Nexus 10 landscape',
//   'Nexus 4',
//   'Nexus 4 landscape',
//   'Nexus 5',
//   'Nexus 5 landscape',
//   'Nexus 5X',
//   'Nexus 5X landscape',
//   'Nexus 6',
//   'Nexus 6 landscape',
//   'Nexus 6P',
//   'Nexus 6P landscape',
//   'Nexus 7',
//   'Nexus 7 landscape',
//   'Nokia Lumia 520',
//   'Nokia Lumia 520 landscape',
//   'Nokia N9',
//   'Nokia N9 landscape',
//   'Pixel 2',
//   'Pixel 2 landscape',
//   'Pixel 2 XL',
//   'Pixel 2 XL landscape'
// ]

// Filter devices by type
const iphones = devices.filter(device => device.includes('iPhone'));
const ipads = devices.filter(device => device.includes('iPad'));
const pixels = devices.filter(device => device.includes('Pixel'));

Device Emulation Configuration

Configure device emulation for responsive testing and mobile screenshots.

interface DeviceOptions {
  /** 
   * Device name to emulate (overrides width, height, scaleFactor, userAgent)
   * Must be one of the devices from the devices array
   */
  emulateDevice?: string;
}

Usage Examples:

import captureWebsite from 'capture-website';

// iPhone X emulation
await captureWebsite.file('https://responsive-site.com', 'iphone-x.png', {
  emulateDevice: 'iPhone X'
});

// iPad emulation
await captureWebsite.file('https://responsive-site.com', 'ipad.png', {
  emulateDevice: 'iPad'
});

// Android phone emulation
await captureWebsite.file('https://responsive-site.com', 'pixel.png', {
  emulateDevice: 'Pixel 2'
});

// Landscape orientation
await captureWebsite.file('https://responsive-site.com', 'iphone-landscape.png', {
  emulateDevice: 'iPhone X landscape'
});

Device Categories

Mobile Phones

Popular smartphone devices for mobile testing:

// iOS Devices
await captureWebsite.file('https://example.com', 'iphone-13.png', {
  emulateDevice: 'iPhone 13'
});

await captureWebsite.file('https://example.com', 'iphone-se.png', {
  emulateDevice: 'iPhone SE'
});

// Android Devices
await captureWebsite.file('https://example.com', 'pixel-2-xl.png', {
  emulateDevice: 'Pixel 2 XL'
});

await captureWebsite.file('https://example.com', 'galaxy-s5.png', {
  emulateDevice: 'Galaxy S5'
});

// Other Mobile Devices
await captureWebsite.file('https://example.com', 'lumia-950.png', {
  emulateDevice: 'Microsoft Lumia 950'
});

Tablets

Tablet devices for larger mobile screens:

// iPad variants
await captureWebsite.file('https://example.com', 'ipad-pro.png', {
  emulateDevice: 'iPad Pro'
});

await captureWebsite.file('https://example.com', 'ipad-mini.png', {
  emulateDevice: 'iPad Mini'
});

// Android tablets
await captureWebsite.file('https://example.com', 'nexus-10.png', {
  emulateDevice: 'Nexus 10'
});

// Other tablets
await captureWebsite.file('https://example.com', 'kindle-hdx.png', {
  emulateDevice: 'Kindle Fire HDX'
});

Landscape vs Portrait

Most devices support both orientations:

// Portrait (default)
await captureWebsite.file('https://example.com', 'iphone-portrait.png', {
  emulateDevice: 'iPhone 12'
});

// Landscape
await captureWebsite.file('https://example.com', 'iphone-landscape.png', {
  emulateDevice: 'iPhone 12 landscape'
});

Device Properties

When you use emulateDevice, it automatically sets several properties:

Viewport Dimensions

Each device has predefined width and height values that match the real device.

Device Scale Factor

High-DPI devices (like iPhones) have scale factors of 2 or 3 for crisp rendering.

User Agent String

Each device includes an appropriate user agent string for that device and browser.

Touch Support

Mobile devices are automatically configured with touch event support.

Responsive Testing Patterns

Cross-Device Testing

const testDevices = [
  'iPhone SE',           // Small phone
  'iPhone 12',           // Standard phone
  'iPhone 12 Pro Max',   // Large phone
  'iPad Mini',           // Small tablet
  'iPad Pro'             // Large tablet
];

for (const device of testDevices) {
  await captureWebsite.file('https://responsive-site.com', `${device.replace(/ /g, '-').toLowerCase()}.png`, {
    emulateDevice: device
  });
}

Orientation Testing

const device = 'iPhone 12';

// Test both orientations
await captureWebsite.file('https://example.com', 'portrait.png', {
  emulateDevice: device
});

await captureWebsite.file('https://example.com', 'landscape.png', {
  emulateDevice: `${device} landscape`
});

Popular Device Combinations

// Current popular devices for testing
const popularDevices = [
  'iPhone 13',           // Latest iPhone
  'iPhone SE',           // Budget iPhone
  'Pixel 2',             // Standard Android
  'Galaxy S5',           // Older Android
  'iPad',                // Standard tablet
  'iPad Pro'             // Large tablet
];

// Test on all popular devices
for (const device of popularDevices) {
  await captureWebsite.file('https://site.com', `test-${device.toLowerCase().replace(/ /g, '-')}.png`, {
    emulateDevice: device,
    fullPage: true
  });
}

Emulation vs Manual Configuration

Using Device Emulation (Recommended)

// Automatically configures viewport, scale, and user agent
await captureWebsite.file('https://example.com', 'iphone.png', {
  emulateDevice: 'iPhone 12'
});

Manual Configuration (Advanced)

// Manual configuration (emulateDevice overrides these)
await captureWebsite.file('https://example.com', 'manual.png', {
  width: 390,
  height: 844,
  scaleFactor: 3,
  userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15'
});

Note: When emulateDevice is specified, it overrides any manually set width, height, scaleFactor, and userAgent options.