Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Spixmaster opened this issue Jan 21, 2025 · 0 comments
Open

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

Spixmaster opened this issue Jan 21, 2025 · 0 comments
Labels
bug Something isn't working

Comments

@Spixmaster
Copy link

Spixmaster commented Jan 21, 2025 •
edited
Loading

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>
@Spixmaster Spixmaster added the bug Something isn't working label Jan 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Spixmaster