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-6/

Media Preference Testing Tool

A utility that launches a browser and tests how a webpage responds to different media types and feature preferences. This tool helps developers verify that their responsive designs correctly adapt to various user environment settings.

Capabilities

Media Type Switching

  • Emulates screen media type, takes a screenshot, saves it as "screen.png" @test
  • Emulates print media type, takes a screenshot, saves it as "print.png" @test

Color Scheme Preference

  • Emulates light color scheme preference, captures page title, verifies title contains "light" (case-insensitive) @test
  • Emulates dark color scheme preference, captures page title, verifies title contains "dark" (case-insensitive) @test

Motion Preference

  • Emulates reduced motion preference, captures a CSS property value that changes based on motion preference @test

Color Gamut

  • Emulates SRGB color gamut, verifies browser reports correct color space support @test

Implementation

@generates

API

/**
 * Launches a browser, navigates to a test page, and captures screenshots
 * with different media type emulations.
 *
 * @param {string} url - The URL of the page to test
 * @returns {Promise<Object>} Object containing paths to saved screenshots
 */
async function testMediaTypes(url) {
  // Returns: { screen: 'screen.png', print: 'print.png' }
}

/**
 * Tests a page's response to different color scheme preferences.
 *
 * @param {string} url - The URL of the page to test
 * @param {string} scheme - Either 'light' or 'dark'
 * @returns {Promise<string>} The page title after applying the color scheme
 */
async function testColorScheme(url, scheme) {
  // Returns the page title
}

/**
 * Tests a page with reduced motion preference enabled.
 *
 * @param {string} url - The URL of the page to test
 * @param {string} selector - CSS selector for element to inspect
 * @param {string} property - CSS property to check
 * @returns {Promise<string>} The value of the specified CSS property
 */
async function testReducedMotion(url, selector, property) {
  // Returns the CSS property value
}

/**
 * Tests a page with a specific color gamut emulation.
 *
 * @param {string} url - The URL of the page to test
 * @param {string} gamut - Color gamut to emulate ('srgb', 'p3', 'rec2020')
 * @returns {Promise<boolean>} True if the gamut is supported
 */
async function testColorGamut(url, gamut) {
  // Returns boolean indicating support
}

module.exports = {
  testMediaTypes,
  testColorScheme,
  testReducedMotion,
  testColorGamut
};

Dependencies { .dependencies }

puppeteer-core { .dependency }

Provides browser automation and media emulation capabilities.

@satisfied-by