or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

browser-apis.mdbrowser-window.mdcss-styling.mdcustom-elements.mddom-core.mdevent-system.mdfetch-http.mdform-file.mdhtml-elements.mdindex.mdmedia-av.md
tile.json

browser-window.mddocs/

Browser & Window Management

Core browser infrastructure for creating isolated browser contexts and window instances. Essential for testing and server-side rendering scenarios.

Capabilities

Browser Class

Main browser class for creating browser instances with configurable settings.

/**
 * Main browser class for creating browser instances
 */
class Browser {
  constructor(options?: { settings?: IOptionalBrowserSettings; console?: Console });
  
  /** Get browser settings */
  readonly settings: IBrowserSettings;
  
  /** True if the browser is closed */
  readonly closed: boolean;
  
  /** Default browser context */
  readonly defaultContext: BrowserContext;
  
  /** All browser contexts */
  readonly contexts: BrowserContext[];
  
  /** Console instance for debugging */
  readonly console: Console | null;
  
  
  /** Create new incognito context */
  newIncognitoContext(): BrowserContext;
  
  /** Create new page in default context */
  newPage(): BrowserPage;
  
  /** Close browser and cleanup resources */
  close(): Promise<void>;
  
  /** Wait until all async operations complete */
  waitUntilComplete(): Promise<void>;
  
  /** Abort all pending operations */
  abort(): Promise<void>;
}

interface IBrowserSettings {
  /** Disables JavaScript evaluation */
  disableJavaScriptEvaluation: boolean;
  
  /** Disables JavaScript file loading */
  disableJavaScriptFileLoading: boolean;
  
  /** Disables CSS file loading */
  disableCSSFileLoading: boolean;
  
  /** Disables computed style rendering */
  disableComputedStyleRendering: boolean;
  
  /** Handle disabled resource loading as success */
  handleDisabledFileLoadingAsSuccess: boolean;
  
  /** Settings for timers */
  timer: {
    maxTimeout: number;
    maxIntervalTime: number;
    maxIntervalIterations: number;
    preventTimerLoops: boolean;
  };
  
  /** Settings for fetch */
  fetch: {
    /** Disables same-origin policy (CORS) */
    disableSameOriginPolicy: boolean;
    /** Disables validation of certificates against the list of supplied CAs */
    disableStrictSSL: boolean;
    /** Fetch interceptor */
    interceptor: IFetchInterceptor | null;
    /** Virtual servers used for simulating a server that reads from the file system */
    virtualServers: IVirtualServer[] | null;
  };
  
  /** Error capturing policy */
  errorCapture: BrowserErrorCaptureEnum;
  
  /** @deprecated Not something that browsers support anymore as it is not secure */
  enableFileSystemHttpRequests: boolean;
  
  /** Settings for the browser's navigation */
  navigation: {
    /** Disables navigation to other pages in the main frame or a page */
    disableMainFrameNavigation: boolean;
    /** Disables navigation to other pages in child frames (such as iframes) */
    disableChildFrameNavigation: boolean;
    /** Disables navigation to other pages in child pages (such as popup windows) */
    disableChildPageNavigation: boolean;
    /** Disables the fallback to setting the URL when navigating to a page is disabled */
    disableFallbackToSetURL: boolean;
    /** Sets the policy for cross-origin navigation */
    crossOriginPolicy: BrowserNavigationCrossOriginPolicyEnum;
  };
  
  /** Settings for the browser's navigator */
  navigator: {
    userAgent: string;
    maxTouchPoints: number;
  };
  
  /** Settings for the browser's device */
  device: {
    prefersColorScheme: string;
    prefersReducedMotion: string;
    mediaType: string;
    forcedColors: string;
  };
  
  /** Debug settings */
  debug: {
    traceWaitUntilComplete: number;
  };
}

interface IOptionalBrowserSettings {
  /** Disables JavaScript evaluation */
  disableJavaScriptEvaluation?: boolean;
  
  /** Disables JavaScript file loading */
  disableJavaScriptFileLoading?: boolean;
  
  /** Disables CSS file loading */
  disableCSSFileLoading?: boolean;
  
  /** Disables computed style rendering */
  disableComputedStyleRendering?: boolean;
  
  /** Handle disabled resource loading as success */
  handleDisabledFileLoadingAsSuccess?: boolean;
  
  /** Settings for timers */
  timer?: {
    maxTimeout?: number;
    maxIntervalTime?: number;
    maxIntervalIterations?: number;
  };
  
  /** Settings for fetch */
  fetch?: {
    /** Disables same-origin policy (CORS) */
    disableSameOriginPolicy?: boolean;
    /** Disables validation of certificates against the list of supplied CAs */
    disableStrictSSL?: boolean;
    /** Fetch interceptor */
    interceptor?: IFetchInterceptor | null;
    /** Virtual servers used for simulating a server that reads from the file system */
    virtualServers?: IVirtualServer[] | null;
  };
  
  /** Error capturing policy */
  errorCapture?: BrowserErrorCaptureEnum;
  
  /** @deprecated Not something that browsers support anymore as it is not secure */
  enableFileSystemHttpRequests?: boolean;
  
  /** Settings for the browser's navigation */
  navigation?: {
    /** Disables navigation to other pages in the main frame or a page */
    disableMainFrameNavigation?: boolean;
    /** Disables navigation to other pages in child frames (such as iframes) */
    disableChildFrameNavigation?: boolean;
    /** Disables navigation to other pages in child pages (such as popup windows) */
    disableChildPageNavigation?: boolean;
    /** Disables the fallback to setting the URL when navigating to a page is disabled */
    disableFallbackToSetURL?: boolean;
    /** Sets the policy for cross-origin navigation */
    crossOriginPolicy?: BrowserNavigationCrossOriginPolicyEnum;
  };
  
  /** Settings for the browser's navigator */
  navigator?: {
    userAgent?: string;
    maxTouchPoints?: number;
  };
  
  /** Settings for the browser's device */
  device?: {
    prefersColorScheme?: string;
    prefersReducedMotion?: string;
    mediaType?: string;
    forcedColors?: string;
  };
  
  /** Debug settings */
  debug?: {
    traceWaitUntilComplete?: number;
  };
}

Usage Example:

import { Browser } from "happy-dom";

const browser = new Browser({
  disableJavaScriptEvaluation: true,
  device: {
    prefersColorScheme: 'dark'
  }
});

const context = browser.newIncognitoContext();
const page = context.newPage();
const window = page.mainFrame.window;

// Use the window for DOM operations
window.document.body.innerHTML = '<h1>Hello World</h1>';

// Cleanup when done
await browser.close();

BrowserContext Class

Browser context for managing pages and frames within a browser instance.

/**
 * Browser context for managing pages and frames
 */
class BrowserContext {
  /** Create new page in this context */
  newPage(): BrowserPage;
  
  /** Close context and all associated pages */
  close(): Promise<void>;
  
  /** Get all pages in this context */
  readonly pages: BrowserPage[];
  
  /** Browser instance that owns this context */
  readonly browser: Browser;
}

BrowserPage Class

Browser page containing frames and windows.

/**
 * Browser page containing frames and windows
 */
class BrowserPage {
  /** Main frame of the page */
  readonly mainFrame: BrowserFrame;
  
  /** Close page and cleanup resources */
  close(): Promise<void>;
  
  /** Navigate to URL */
  goto(url: string): Promise<void>;
  
  /** Get page content as HTML */
  content(): Promise<string>;
  
  /** Set page content */
  setContent(html: string): Promise<void>;
  
  /** Browser context that owns this page */
  readonly context: BrowserContext;
}

BrowserFrame Class

Browser frame containing a window instance.

/**
 * Browser frame containing a window instance
 */
class BrowserFrame {
  /** Window instance for this frame */
  readonly window: BrowserWindow;
  
  /** Navigate frame to URL */
  goto(url: string): Promise<void>;
  
  /** Get frame content as HTML */
  content(): Promise<string>;
  
  /** Set frame content */
  setContent(html: string): Promise<void>;
  
  /** Page that owns this frame */
  readonly page: BrowserPage;
}

Window Classes

BrowserWindow Class

Browser-attached window with full browser integration.

/**
 * Browser-attached window with full browser integration
 */
class BrowserWindow extends EventTarget {
  /** Document for this window */
  readonly document: Document;
  
  /** Location object */
  readonly location: Location;
  
  /** History object */
  readonly history: History;
  
  /** Navigator object */
  readonly navigator: Navigator;
  
  /** Screen object */
  readonly screen: Screen;
  
  /** Local storage */
  readonly localStorage: Storage;
  
  /** Session storage */
  readonly sessionStorage: Storage;
  
  /** Console object */
  readonly console: Console;
  
  /** Custom element registry */
  readonly customElements: CustomElementRegistry;
  
  /** Close window */
  close(): void;
  
  /** Focus window */
  focus(): void;
  
  /** Blur window */
  blur(): void;
  
  /** Window inner width */
  innerWidth: number;
  
  /** Window inner height */
  innerHeight: number;
}

Window Class

Standard window implementation.

/**
 * Standard window implementation
 */
class Window extends BrowserWindow {
  /** Global window reference */
  readonly window: Window;
  
  /** Global self reference */  
  readonly self: Window;
  
  /** Top window reference */
  readonly top: Window;
  
  /** Parent window reference */
  readonly parent: Window;
}

DetachedWindowAPI Class

Detached window for testing without browser context.

/**
 * Detached window for testing without browser context
 */
class DetachedWindowAPI extends GlobalWindow {
  /** Happy DOM version */
  readonly happyDOM: {
    version: string;
  };
}

Detached Browser Classes

Simplified browser classes for testing without full browser infrastructure.

/**
 * Detached browser for testing
 */
class DetachedBrowser {
  constructor(settings?: IBrowserSettings);
  newContext(): DetachedBrowserContext;
  close(): Promise<void>;
}

/**
 * Detached browser context
 */
class DetachedBrowserContext {
  newPage(): DetachedBrowserPage;
  close(): Promise<void>;
}

/**
 * Detached browser page
 */
class DetachedBrowserPage {
  readonly mainFrame: DetachedBrowserFrame;
  close(): Promise<void>;
}

/**
 * Detached browser frame
 */
class DetachedBrowserFrame {
  readonly window: DetachedWindowAPI;
}

Browser Enums

/**
 * Error capture configuration options
 */
enum BrowserErrorCaptureEnum {
  /** Capture errors without throwing */
  TryAndCatch = 'tryAndCatch',
  /** Capture and throw errors */
  ProcessLevelExceptionHandler = 'processLevelExceptionHandler',
  /** Disable error capture */
  Disabled = 'disabled'
}

/**
 * Cross-origin navigation policy options
 */
enum BrowserNavigationCrossOriginPolicyEnum {
  /** Allow cross-origin navigation */
  Allow = 'allow',
  /** Block cross-origin navigation */
  Block = 'block'
}

/**
 * Fetch interceptor interface
 */
interface IFetchInterceptor {
  request?: (request: Request) => Promise<Request>;
  response?: (response: Response) => Promise<Response>;
}

/**
 * Virtual server interface for simulating file system requests
 */
interface IVirtualServer {
  url: string;
  path: string;
}

Usage Patterns

Testing Setup

import { Window } from "happy-dom";

// Simple testing setup
const window = new Window();
const document = window.document;

// Test DOM manipulation
document.body.innerHTML = '<div id="test">Test Content</div>';
const testDiv = document.getElementById('test');
expect(testDiv?.textContent).toBe('Test Content');

Server-Side Rendering

import { Browser } from "happy-dom";

async function renderPage(html: string): Promise<string> {
  const browser = new Browser();
  const context = browser.newIncognitoContext();
  const page = context.newPage();
  
  await page.setContent(html);
  
  // Process the DOM
  const document = page.mainFrame.window.document;
  // ... DOM manipulations
  
  const result = await page.content();
  await browser.close();
  
  return result;
}