or run

npx @tessl/cli init
Log in

Version

Files

docs

browser-contexts.mdbrowser-management.mdelement-handling.mdindex.mdinput-simulation.mdlocators-selectors.mdnetwork-management.mdpage-interaction.md
tile.json

task.mdevals/scenario-2/

Web Page Screenshot Utility

A utility that captures screenshots of web pages in multiple image formats with configurable quality and region settings.

Capabilities

Screenshot capture with format options

  • It captures a full page screenshot in PNG format @test
  • It captures a screenshot in JPEG format with specified quality @test
  • It captures a screenshot in WebP format @test

Screenshot of specific regions

  • It captures a screenshot of a specific rectangular region of the page @test

Requirements

Create a module that provides functionality to capture screenshots of web pages. The module should support:

  1. Format Support: Screenshots must be capturable in PNG, JPEG, and WebP formats
  2. Quality Control: For formats that support quality settings (JPEG, WebP), allow specifying quality as a number between 0 and 100
  3. Full Page Capture: Support capturing the entire scrollable page, not just the visible viewport
  4. Region Capture: Support capturing a specific rectangular region by providing coordinates (x, y, width, height)
  5. File Output: Save screenshots to specified file paths

The implementation should handle basic error cases such as invalid format specifications or quality values out of range.

Implementation

@generates

API

/**
 * Captures a screenshot of a web page
 *
 * @param {string} url - The URL of the page to capture
 * @param {object} options - Screenshot options
 * @param {string} options.path - File path where the screenshot should be saved
 * @param {string} [options.format='png'] - Image format: 'png', 'jpeg', or 'webp'
 * @param {number} [options.quality] - Image quality (0-100) for JPEG/WebP formats
 * @param {boolean} [options.fullPage=false] - Capture the full scrollable page
 * @param {object} [options.clip] - Capture a specific region
 * @param {number} options.clip.x - X coordinate of the region
 * @param {number} options.clip.y - Y coordinate of the region
 * @param {number} options.clip.width - Width of the region
 * @param {number} options.clip.height - Height of the region
 * @returns {Promise<void>}
 */
async function captureScreenshot(url, options) {
  // IMPLEMENTATION HERE
}

module.exports = {
  captureScreenshot
};

Dependencies { .dependencies }

puppeteer-core { .dependency }

Provides browser automation and screenshot capabilities.