大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力。
![](http://image.uc.cn/s/wemedia/s/upload/2024/8ea271ef03177893d6c5f96c7c71e8b1.png)
A JavaScript implementation of a web browser without its graphical user interface.
happy-dom 是没有图形用户界面的 Web 浏览器的 JavaScript 实现,包括来自 WHATWG DOM 和 HTML 的许多 Web 标准。
![](http://image.uc.cn/s/wemedia/s/upload/2024/2120abe7814a30bdd478b0602567fed9.png)
happy-dom 的典型特性包括:
自定义元素(Web 组件)声明式 Shadow DOM支持 Mutation Observer支持 Tree Walker支持 Fetch API支持 File Reader、CSS Style Declaration、Form Data 等支持 Selection、Form Validity State、IFrames 等支持 Cookies、Clipboard 等等happy-dom 的目标是模拟足够多的 Web 浏览器,以用于测试、抓取网站和服务器端渲染。happy-dom 非常注重性能,可以用作 JSDOM 的替代品。而且在性能上,happy-dom 几乎完爆了 JSDOM,比如对常见测试的几个维度的衡量数据:
Import / Require解析 HTML(Parse HTML)序列化 HTML(Serialize HTML)渲染自定义元素 (Render custom element)运行 querySelectorAll('tagname')运行 querySelectorAll(':nth-child(2n+1)')下面是两者的对比数据图:
![](http://image.uc.cn/s/wemedia/s/upload/2024/09f0e9122bf9e79dbbf9aa5e0ca9683f.png)
目前 happy-dom 已经被前端大多数明星框架采用,包括:Vitest、Bun、Jest、Testing Library、Google LitElement、Vue、React、Svelte、Angular 等等。
happy-dom 在 Github 通过 MIT 协议开源,有超过 2.8k 的 star、22.2k 的 fork、代码贡献者 100+、妥妥的前端优质开源项目。
2.如何使用 happy-dom2.1 模拟 Window 类Happy DOM 可以用作模拟浏览器,也可以直接使用 Window 类来快速设置 DOM,下面是如何使用 Window 类的简单示例:
import {Window} from 'happy-dom';// 打开页面const window = new Window({url: 'https://localhost:8080'});const document = window.document;document.body.innerHTML = '<div>从以上代码可以看出,常见的 DOM 操作方法和浏览器几乎完全一致。2.2 模拟 Browser 类下面是如何使用 Browser 类的两个简单示例:
import {Browser} from "happy-dom";const browser = new Browser();const page = browser.newPage();page.url = 'https://example.com';page.content = '<html><body>Hello world!</body></html>';// 输出值 "Hello world!"console.log(page.mainFrame.document.body.textContent);await browser.close();以上示例通过首先手动创建一个 Browser 实例,然后动态设置页面 URL 的方式来模拟页面打开和关闭流程。下面是另外一个示例,其通过一些设置更加精确的控制了 Browser 实例的一些行为:
import {Browser, BrowserErrorCaptureEnum} from 'happy-dom';const browser = new Browser({settings: { errorCapture: BrowserErrorCaptureEnum.processLevel} });const page = browser.newPage();// 打开页面await page.goto('https://github.com/capricorn86');// 点击链接page.mainFrame.document.querySelector('a[href*="capricorn86/happy-dom"]').click();// 等待页面上的所有操作完成(fetch、计时器等)await page.waitUntilComplete();// 输出内容为 "GitHub - capricorn86/happy-dom: Happy DOM..."console.log(page.mainFrame.document.title);// 中止所有正在进行的操作并关闭浏览器await browser.close();参考资料https://github.com/capricorn86/happy-dom
https://github.com/capricorn86/happy-dom/wiki/Getting-started
https://www.freecodecamp.org/news/dom-manipulation-best-practices/
https://www.drewis.cool/story/mocking-the-dom-is-a-mistake-post