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

Browser Target Manager

A utility that connects to a browser instance and provides intelligent filtering and management of browser targets.

Capabilities

Target Type Filtering

  • It filters targets by a specific type (e.g., only pages) @test
  • It excludes DevTools targets from the filtered results @test

Custom Page Detection

  • It identifies page targets using custom detection logic based on URL patterns @test
  • It correctly filters multiple target types simultaneously @test

Implementation

@generates

The implementation should provide a class or functions that:

  1. Connect to an existing browser instance
  2. Apply custom target filtering based on target type
  3. Implement custom logic to detect whether a target should be treated as a page
  4. Return a filtered list of targets that match the specified criteria

API

/**
 * Configuration for target filtering
 */
export interface TargetFilterConfig {
  /**
   * Target types to include (e.g., 'page', 'worker', 'service_worker', 'browser')
   */
  allowedTypes?: string[];

  /**
   * Whether to exclude DevTools targets
   */
  excludeDevTools?: boolean;

  /**
   * Custom function to determine if a target should be treated as a page
   */
  isPageTarget?: (target: any) => boolean;
}

/**
 * Manages browser targets with custom filtering
 */
export class TargetManager {
  /**
   * Creates a new TargetManager
   * @param browserWSEndpoint - WebSocket endpoint of the browser to connect to
   * @param config - Configuration for target filtering
   */
  constructor(browserWSEndpoint: string, config: TargetFilterConfig);

  /**
   * Connects to the browser and retrieves filtered targets
   * @returns Array of filtered target objects
   */
  async getFilteredTargets(): Promise<any[]>;

  /**
   * Closes the browser connection
   */
  async close(): Promise<void>;
}

Dependencies { .dependencies }

puppeteer-core { .dependency }

Provides browser automation and control capabilities.

Test Cases

Filter by Type

// Launch a browser with multiple targets
const browser = await puppeteer.launch();
const page1 = await browser.newPage();
await page1.goto('https://example.com');
const page2 = await browser.newPage();
await page2.goto('https://example.org');

// Create target manager that filters only page targets
const manager = new TargetManager(browser.wsEndpoint(), {
  allowedTypes: ['page']
});

const targets = await manager.getFilteredTargets();

// Should only include page targets
expect(targets.length).toBeGreaterThan(0);
expect(targets.every(t => t.type() === 'page')).toBe(true);

await manager.close();
await browser.close();

Exclude DevTools Targets

// Launch a browser
const browser = await puppeteer.launch({ devtools: true });
const page = await browser.newPage();

// Create target manager that excludes DevTools
const manager = new TargetManager(browser.wsEndpoint(), {
  excludeDevTools: true
});

const targets = await manager.getFilteredTargets();

// Should not include any DevTools targets
expect(targets.every(t => t.url().indexOf('devtools://') === -1)).toBe(true);

await manager.close();
await browser.close();

Custom Page Detection

// Launch a browser
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com/app');

// Create target manager with custom page detection (only URLs containing '/app')
const manager = new TargetManager(browser.wsEndpoint(), {
  isPageTarget: (target) => {
    return target.url().includes('/app');
  }
});

const targets = await manager.getFilteredTargets();

// Should only include targets with '/app' in URL
expect(targets.length).toBeGreaterThan(0);
expect(targets.every(t => t.url().includes('/app'))).toBe(true);

await manager.close();
await browser.close();

Distinguish Targets

// Launch a browser and create different target types
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');

// Page creates a service worker
await page.evaluate(() => {
  navigator.serviceWorker.register('/sw.js');
});

// Create target manager
const manager = new TargetManager(browser.wsEndpoint(), {
  allowedTypes: ['page']
});

const targets = await manager.getFilteredTargets();

// Should correctly identify and filter page targets only
expect(targets.every(t => t.type() === 'page')).toBe(true);

await manager.close();
await browser.close();