Skip to main content

​
Overview

BrowserTest SDK provides powerful screenshot capabilities with multiple capture modes and customization options.

​
Basic Screenshot

The simplest way to capture a screenshot: 
const screenshot = await bt.screenshot.take({
  url: 'https://example.com'
});

console.log('Screenshot captured:', screenshot.data.screenshot.length, 'bytes');

​
Screenshot Options

​
Full Page Screenshots

Capture the entire page, not just the viewport: 
const fullPage = await bt.screenshot.take({
  url: 'https://example.com',
  fullPage: true
});

​
Custom Viewport

Control the browser viewport size: 
const mobile = await bt.screenshot.take({
  url: 'https://example.com',
  width: 375,
  height: 667, // iPhone SE dimensions
  fullPage: true
});

const tablet = await bt.screenshot.take({
  url: 'https://example.com',
  width: 768,
  height: 1024,
  fullPage: true
});

const desktop = await bt.screenshot.take({
  url: 'https://example.com',
  width: 1920,
  height: 1080,
  fullPage: true
});

​
Image Formats & Quality

Choose between PNG and JPEG formats: 
// High-quality PNG (default)
const pngScreenshot = await bt.screenshot.take({
  url: 'https://example.com',
  format: 'png'
});

// Compressed JPEG
const jpegScreenshot = await bt.screenshot.take({
  url: 'https://example.com',
  format: 'jpeg',
  quality: 80 // 0-100, default 80
});

​
Element-Specific Screenshots

Capture only a specific element on the page: 
const elementShot = await bt.screenshot.take({
  url: 'https://example.com',
  selector: '.hero-section'
});

// Or use the dedicated method
const heroSection = await bt.screenshot.element(
  'https://example.com',
  '.hero-section'
);

​
Timing & Wait Conditions

Control when the screenshot is taken: 
// Wait for a specific time
const delayedShot = await bt.screenshot.take({
  url: 'https://example.com',
  waitFor: 3000 // Wait 3 seconds
});

// Wait for an element to appear
const dynamicContent = await bt.screenshot.take({
  url: 'https://example.com',
  selector: '.loaded-content',
  waitFor: 5000
});

​
Advanced Options

const advanced = await bt.screenshot.take({
  url: 'https://example.com',
  fullPage: true,
  format: 'png',
  width: 1280,
  height: 720,
  quality: 90,
  waitFor: 2000,
  blockAds: true, // Block ads and trackers
  timeout: 15000 // Custom timeout
});

​
Convenience Methods

BrowserTest provides convenient methods for common screenshot types:

​
Full Page Shortcut

const fullPage = await bt.screenshot.fullPage('https://example.com');

​
Element Shortcut

const element = await bt.screenshot.element(
  'https://example.com',
  '.product-card'
);

​
Batch Screenshots

Process multiple screenshots efficiently: 
const batchResults = await bt.screenshot.takeBatch({
  urls: [
    'https://site1.com',
    'https://site2.com',
    'https://site3.com'
  ],
  fullPage: true,
  format: 'png'
});

console.log(`Processed ${batchResults.meta.successful} out of ${batchResults.meta.total} screenshots`);

​
Batch with Individual Options

const batchResults = await bt.screenshot.takeBatch({
  requests: [
    { url: 'https://mobile-site.com', width: 375, height: 667 },
    { url: 'https://desktop-site.com', width: 1920, height: 1080 },
    { url: 'https://tablet-site.com', width: 768, height: 1024 }
  ]
});

​
Error Handling

Handle screenshot failures gracefully: 
try {
  const screenshot = await bt.screenshot.take({
    url: 'https://example.com',
    timeout: 10000
  });
} catch (error) {
  if (error.name === 'BrowserTestTimeoutError') {
    console.log('Screenshot timed out');
  } else if (error.name === 'BrowserTestAPIError') {
    console.log('API error:', error.status);
  } else {
    console.log('Unexpected error:', error.message);
  }
}

​
Response Format

All screenshot methods return a consistent response: 
{
  success: true,
  data: {
    screenshot: "base64-encoded-image-data",
    url: "https://example.com",
    title: "Example Domain",
    width: 1280,
    height: 720,
    format: "png",
    fullPage: false
  },
  meta: {
    timeMs: 1250,
    size: 45632
  }
}

​
Best Practices

​
Performance Optimization

  1. Use appropriate formats: PNG for quality, JPEG for smaller file sizes
  2. Set reasonable timeouts: Don’t wait too long for slow pages
  3. Use batch operations: Process multiple screenshots together
  4. Cache results: Avoid redundant screenshots of static content

​
Viewport Strategy

// Define standard viewports
const viewports = {
  mobile: { width: 375, height: 667 },
  tablet: { width: 768, height: 1024 },
  desktop: { width: 1920, height: 1080 }
};

async function captureResponsive(url) {
  const results = {};
  for (const [name, viewport] of Object.entries(viewports)) {
    results[name] = await bt.screenshot.take({
      url,
      ...viewport,
      fullPage: true
    });
  }
  return results;
}

​
Monitoring & Logging

async function monitoredScreenshot(url, options = {}) {
  const startTime = Date.now();
  try {
    const result = await bt.screenshot.take({ url, ...options });
    const duration = Date.now() - startTime;

    console.log(`Screenshot completed in ${duration}ms`);
    console.log(`File size: ${(result.meta.size / 1024).toFixed(2)} KB`);

    return result;
  } catch (error) {
    console.error(`Screenshot failed after ${Date.now() - startTime}ms:`, error.message);
    throw error;
  }
}

​
Common Use Cases

​
Visual Regression Testing

async function compareScreenshots(url, baselinePath) {
  const current = await bt.screenshot.take({
    url,
    fullPage: true,
    format: 'png'
  });

  // Compare with baseline image
  const baseline = fs.readFileSync(baselinePath);
  const isMatch = compareImages(current.data.screenshot, baseline);

  return {
    match: isMatch,
    current: current.data.screenshot,
    difference: isMatch ? null : calculateDifference(current.data.screenshot, baseline)
  };
}

​
Documentation Generation

async function generatePageDocs(urls) {
  const screenshots = await bt.screenshot.takeBatch({
    urls,
    fullPage: true,
    format: 'png'
  });

  return screenshots.results.map(result => ({
    url: result.data.url,
    title: result.data.title,
    screenshot: result.data.screenshot,
    dimensions: `${result.data.width}x${result.data.height}`
  }));
}

​
Performance Monitoring

async function monitorPageLoad(url) {
  const startTime = Date.now();
  const screenshot = await bt.screenshot.take({
    url,
    fullPage: true
  });
  const loadTime = Date.now() - startTime;

  return {
    url,
    loadTime,
    pageSize: screenshot.meta.size,
    dimensions: `${screenshot.data.width}x${screenshot.data.height}`,
    title: screenshot.data.title
  };
}