happy-dom
TypeScript icon, indicating that this package has built-in type declarations

13.6.0 • Public • Published

Happy DOM Logo

About

Happy DOM is a JavaScript implementation of a web browser without its graphical user interface. It includes many web standards from WHATWG DOM and HTML.

The goal of Happy DOM is to emulate enough of a web browser to be useful for testing, scraping web sites and server-side rendering.

Happy DOM focuses heavily on performance and can be used as an alternative to JSDOM.

DOM Features

  • Custom Elements (Web Components)

  • Shadow Root (Shadow DOM)

  • Declarative Shadow DOM

  • Mutation Observer

  • Tree Walker

  • Fetch

And much more..

Works With

Module Systems

Installation

npm install happy-dom

Usage

Happy DOM can be used as a simulated Browser or by using the Window class directly to quickly setup up a DOM.

Window

import { Window } from 'happy-dom';

const window = new Window({ url: 'https://localhost:8080' });
const document = window.document;

document.body.innerHTML = '<div class="container"></div>';

const container = document.querySelector('.container');
const button = document.createElement('button');

container.appendChild(button);

// Outputs "<div class="container"><button></button></div>"
console.log(document.body.innerHTML);

// Closes the window
await window.happyDOM.close();

Browser

import { Browser, BrowserErrorCaptureEnum } from 'happy-dom';

const browser = new Browser({ settings: { errorCapture: BrowserErrorCaptureEnum.processLevel } });
const page = browser.newPage();

// Navigates page
await page.goto('https://github.com/capricorn86');

// Clicks on link
page.mainFrame.document.querySelector('a[href*="capricorn86/happy-dom"]').click();

// Waits for all operations on the page to complete (fetch, timers etc.)
await page.waitUntilComplete();

// Outputs "GitHub - capricorn86/happy-dom: Happy DOM..."
console.log(page.mainFrame.document.title);

// Closes the browser
await browser.close();

Documentation

Read more about how to use Happy DOM in our Wiki.

Performance

Operation JSDOM Happy DOM
Import / Require 333 ms 45 ms
Parse HTML 256 ms 26 ms
Serialize HTML 65 ms 8 ms
Render custom element 214 ms 19 ms
querySelectorAll('tagname') 4.9 ms 0.7 ms
querySelectorAll('.class') 6.4 ms 3.7 ms
querySelectorAll('[attribute]') 4.0 ms 1.7 ms
querySelectorAll('[class~="name"]') 5.5 ms 2.9 ms
querySelectorAll(':nth-child(2n+1)') 10.4 ms 3.8 ms

See how the test was done here

Jest

Happy DOM provide with a package called @happy-dom/jest-environment that makes it possible to use Happy DOM with Jest.

Vitest

Vitest supports Happy DOM out of the box.

Global Registration

Happy DOM provide with a package called @happy-dom/global-registrator that can register Happy DOM globally. It makes it possible to use Happy DOM for testing in a Node environment.

Sister Projects

Happy Conventional Commit

Sponsors

RTVision

Package Sidebar

Install

npm i happy-dom

Weekly Downloads

595,398

Version

13.6.0

License

MIT

Unpacked Size

8.43 MB

Total Files

3644

Last publish

Collaborators

  • davidortner