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.

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

[With test] Embedded JavaScript is not executed #1692

Open
Spixmaster opened this issue Jan 16, 2025 · 2 comments
Open

[With test] Embedded JavaScript is not executed #1692

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

Comments

@Spixmaster
Copy link

Spixmaster commented Jan 16, 2025

v16.6.0 with Bun.

The following test does not produce the website like in the browser due to no execution of the JavaScript. waitForNavigation() is commented out due to a bug.

import {test} from "bun:test";
import {Browser, BrowserPage} from "happy-dom";

test("showcase", async (): Promise<undefined> =>
{
    const response: Response = await fetch(
        "https://www.arbeitsagentur.de/jobsuche/suche?berufsfeld=Landwirtschaft&angebotsart=1"
    );
    const browser = new Browser();
    const page = browser.newPage();
    page.content = await response.text();

    //@ts-expect-error
    global.document = page.mainFrame.document;
    localStorage.clear();

    //await page.waitForNavigation();
    await page.waitUntilComplete();

    //TODO
    console.log(page.content);
});

Is it even possible to use happy-dom with these websites or do I need to use puppeteer?

I can even reproduce with a much simpler example. JavaScript is not executed automatically.

import {assert} from "assert-ts";
import {expect, test} from "bun:test";
import {Browser, BrowserErrorCaptureEnum, BrowserPage, Window} from "happy-dom";

test("tmp", async (): Promise<undefined> =>
{
    const browser: Browser = new Browser();
    const page: BrowserPage = browser.newPage();

    // Get the Document object from the Window instance.
    const document = page.mainFrame.document;

    // Define your HTML content, including embedded JavaScript.
    const htmlContent = `
<!DOCTYPE html>
<html>
<head>
  <title>Happy DOM Example</title>
  <script id="a">
      console.log("hi from page");
      const messageElement = document.getElementById('message');
      if (messageElement) {
        messageElement.textContent = 'Hello from Happy DOM!';
      }
  </script>
</head>
<body>
  <div id="message">Original Content</div>
</body>
</html>
`;

    // Set the HTML content.
    document.write(htmlContent);

    await page.waitUntilComplete();

    //Uncommented for a workaround.
    //const script = document.getElementById("a");
    //assert(script !== null);
    //console.log(script.textContent);
    //page.evaluate(script.textContent);

    // Verify the result.
    const messageElement = document.getElementById("message");
    console.log(messageElement?.textContent); // Outputs: "Hello from Happy DOM!"
});
@Spixmaster Spixmaster added the bug Something isn't working label Jan 16, 2025
@capricorn86
Copy link
Owner

capricorn86 commented Jan 17, 2025

Thank you for reporting @Spixmaster! 🙂

I'm not exactly sure why it is not loaded at all. I need to investigate further. But at least one of the reasons is because Happy DOM doesn't have support for ESM scripts (import, export etc.) yet.

However, I also need support for ESM for one project and a lot of other people in the community do to, so I will definitely prioritize adding support for it.

Task:
#320

@Spixmaster
Copy link
Author

Spixmaster commented Jan 18, 2025

@capricorn86 I further investigated the issue. It related to this one, oven-sh/bun#16363. It seems to be an error by Bun.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants