Open
Description
v16.7.1
I have the following HTML source code. It is composed of several individual HTML files when rendering server-side. Hence, the multiple occurrences of <!DOCTYPE html>
.
Basically, it is a comment id="c"
which is a reply to comment id="b"
which is a reply to comment id="a"
.
a
b
c
The HTML source code is parsed by page.goto()
in a way that the replies are no longer nested in their parent. That is why the tests fail. The same happened with assigning to page.content
by the way.
The source code works when assigning it directly to document.body.innerHTML
or rendering it in the browser.
import {expect, mock, test} from "bun:test";
import {Browser, type BrowserContext, type BrowserPage} from "happy-dom";
test("showcase", (): undefined =>
{
const browser: Browser = new Browser({
settings: {
disableErrorCapturing: true,
disableJavaScriptEvaluation: true
}
});
const context: BrowserContext = browser.defaultContext;
const page: BrowserPage = context.newPage();
page.content = `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
Matheus Gabriel Werny
</title>
</head>
<body>
<div id="a" class="mb-3" data-comment_depth="0">
<div class="align-items-center d-flex flex-wrap justify-content-between">
<div>
Matheus Gabriel Werny (<span title=
"Created: 2025-01-21T11:43:41+01:00, Edited: 2025-01-21T11:43:41+01:00">21.01.2025</span>)
</div>
<div>
<a href="/article/comment/form?id=1" target=
"_self" title="Edit" type="text/html"></a> <a href=
"/article/comment/remove?id=1" target="_self" title=
"Remove" type="text/html"></a>
</div>
</div>
<div>
I like the article.
</div>
<div>
<button class="btn btn-secondary comment_collapse
visually-hidden" type="button">Replies</button>
</div>
<div class="mt-3">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
Matheus Gabriel Werny
</title>
</head>
<body>
<div id="b" class="mb-3" data-comment_depth="1">
<div class="align-items-center d-flex flex-wrap justify-content-between">
<div>
Matheus Gabriel Werny (<span title=
"Created: 2025-01-21T11:43:41+01:00, Edited: 2025-01-21T11:43:41+01:00">21.01.2025</span>)
</div>
<div>
<a href="/article/comment/form?id=2" target=
"_self" title="Edit" type="text/html"></a> <a href=
"/article/comment/remove?id=2" target="_self" title=
"Remove" type="text/html"></a>
</div>
</div>
<div>
I think the same.
</div>
<div>
<button class="btn btn-secondary comment_collapse
visually-hidden" type="button">Replies</button>
</div>
<div class="mt-3">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
Matheus Gabriel Werny
</title>
</head>
<body>
<div id="c" class="mb-3" data-comment_depth="2">
<div class="align-items-center d-flex flex-wrap justify-content-between">
<div>
Matheus Gabriel Werny (<span title=
"Created: 2025-01-21T11:43:41+01:00, Edited: 2025-01-21T11:43:41+01:00">21.01.2025</span>)
</div>
<div>
<a href="/article/comment/form?id=3" target=
"_self" title="Edit" type="text/html"></a> <a href=
"/article/comment/remove?id=3" target="_self" title=
"Remove" type="text/html"></a>
</div>
</div>
<div>
Me too.
</div>
<div>
<button class="btn btn-secondary comment_collapse
visually-hidden" type="button">Replies</button>
</div>
<div class="mt-3">
</div>
</div>
</body>
</html>
</div>
</div>
</body>
</html>
</div>
</div>
</body>
</html>`;
//@ts-expect-error
global.window = page.mainFrame.window;
//@ts-expect-error
global.document = page.mainFrame.window.document;
localStorage.clear();
console.log(page.content);
const comment_a: HTMLElement | null = document.querySelector("#a");
expect(comment_a).not.toBeNull();
const comment_b: HTMLElement | null = comment_a.querySelector("#b");
expect(comment_b).not.toBeNull();
const comment_c: HTMLElement | null = comment_b.querySelector("#c");
expect(comment_c).not.toBeNull();
});
Output
<html><head>
<meta charset="UTF-8">
<title>
Matheus Gabriel Werny
</title>
</head>
<body>
<div id="a" class="mb-3" data-comment_depth="0">
<div class="align-items-center d-flex flex-wrap justify-content-between">
<div>
Matheus Gabriel Werny (<span title="Created: 2025-01-21T11:43:41+01:00, Edited: 2025-01-21T11:43:41+01:00">21.01.2025</span>)
</div>
<div>
<a href="/article/comment/form?id=1" target="_self" title="Edit" type="text/html"></a> <a href="/article/comment/remove?id=1" target="_self" title="Remove" type="text/html"></a>
</div>
</div>
<div>
I like the article.
</div>
<div>
<button class="btn btn-secondary comment_collapse
visually-hidden" type="button">Replies</button>
</div>
<div class="mt-3">
</div></div>
<meta charset="UTF-8">
<title>
Matheus Gabriel Werny
</title>
<div id="b" class="mb-3" data-comment_depth="1">
<div class="align-items-center d-flex flex-wrap justify-content-between">
<div>
Matheus Gabriel Werny (<span title="Created: 2025-01-21T11:43:41+01:00, Edited: 2025-01-21T11:43:41+01:00">21.01.2025</span>)
</div>
<div>
<a href="/article/comment/form?id=2" target="_self" title="Edit" type="text/html"></a> <a href="/article/comment/remove?id=2" target="_self" title="Remove" type="text/html"></a>
</div>
</div>
<div>
I think the same.
</div>
<div>
<button class="btn btn-secondary comment_collapse
visually-hidden" type="button">Replies</button>
</div>
<div class="mt-3">
</div></div>
<meta charset="UTF-8">
<title>
Matheus Gabriel Werny
</title>
<div id="c" class="mb-3" data-comment_depth="2">
<div class="align-items-center d-flex flex-wrap justify-content-between">
<div>
Matheus Gabriel Werny (<span title="Created: 2025-01-21T11:43:41+01:00, Edited: 2025-01-21T11:43:41+01:00">21.01.2025</span>)
</div>
<div>
<a href="/article/comment/form?id=3" target="_self" title="Edit" type="text/html"></a> <a href="/article/comment/remove?id=3" target="_self" title="Remove" type="text/html"></a>
</div>
</div>
<div>
Me too.
</div>
<div>
<button class="btn btn-secondary comment_collapse
visually-hidden" type="button">Replies</button>
</div>
<div class="mt-3">
</div>
</div>
</body></html>