Skip to content

[With test] Strange parsing of page.goto() #1700

Open
@Spixmaster

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>

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions