Happy DOM is a JavaScript implementation of a web browser without its graphical user interface including DOM, HTML, CSS, events, and fetch APIs
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Core browser infrastructure for creating isolated browser contexts and window instances. Essential for testing and server-side rendering scenarios.
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();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;
}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;
}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;
}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;
}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;
}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;
};
}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;
}/**
* 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;
}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');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;
}