Skip to content

Mermaid Js not loaded #981

Open
Open

Description

@xiongxoy

public static void testMermaidRendering() throws IOException, InterruptedException {
   HtmlUnitDriver driver = DriverPool.borrowDriver();

   String html = """
       <!DOCTYPE html>
       <html>
       <head>
           <meta charset="utf-8">
           <title>Mermaid Rendering Test</title>
           <!-- Load actual Mermaid library from CDN -->
           <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
           <style>
               .mermaid { font-family: sans-serif; }
           </style>
       </head>
       <body>
           <div class="mermaid">
               graph TD
               A[Start] --> B[Process]
               B --> C{Decision}
               C -->|Yes| D[Result 1]
               C -->|No| E[Result 2]
           </div>
           
           <script>
               mermaid.initialize({
                   startOnLoad: true,
                   theme: 'default',
                   flowchart: {
                       useMaxWidth: false,
                       htmlLabels: true
                   }
               });
           </script>
       </body>
       </html>
       """;

   // Load the page
   driver.get("data:text/html;charset=UTF-8," + html);

   // Wait for Mermaid to render (may need longer wait for actual network request)
   Thread.sleep(3000);

   // Verify rendering results
   WebElement mermaidContainer = driver.findElement(By.cssSelector(".mermaid"));
   System.out.println("Mermaid container HTML:\n" + mermaidContainer.getAttribute("outerHTML"));

   // Check for SVG elements
   List<WebElement> svgElements = mermaidContainer.findElements(By.tagName("svg"));
   System.out.println("Number of SVG elements found: " + svgElements.size());

   // Print the rendered diagram's text content
   String diagramText = (String) driver.executeScript(
       "return document.querySelector('.mermaid').textContent");
   System.out.println("Diagram text content: " + diagramText.trim());

   driver.quit();
 }


   public static HtmlUnitDriver borrowDriver() {
     HtmlUnitDriver htmlUnitDriver = new HtmlUnitDriver(BrowserVersion.CHROME, true);
     htmlUnitDriver.getWebClient().setCssErrorHandler(new SilentCssErrorHandler());
     htmlUnitDriver.getWebClient().getOptions().setFetchPolyfillEnabled(true);
//      htmlUnitDriver.getWebClient().getOptions().setThrowExceptionOnScriptError(false);
     htmlUnitDriver.getWebClient().getOptions().setCssEnabled(true);
     return htmlUnitDriver;
   }

I'm using

<dependency>
      <groupId>org.seleniumhq.selenium</groupId>
      <artifactId>htmlunit3-driver</artifactId>
      <version>4.32.0</version>
    </dependency>

I'm getting the following exception

Exception in thread "main" org.openqa.selenium.WebDriverException: org.htmlunit.ScriptException: ReferenceError: "mermaid" is not defined. (script in data:text/html;charset=UTF-8,<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mermaid Rendering Test</title>
    <!-- Load actual Mermaid library from CDN -->
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
    <style>
        .mermaid { font-family: sans-serif; }
    </style>
</head>
<body>
    <div class="mermaid">
        graph TD
        A[Start] --> B[Process]
        B --> C{Decision}
        C -->|Yes| D[Result 1]
        C -->|No| E[Result 2]
    </div>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true
            }
        });
    </script>
</body>
</html> from (21, 13) to (30, 14)#22)
Build info: version: '4.31.0', revision: '1ef9f18787*'
System info: os.name: 'Mac OS X', os.arch: 'aarch64', os.version: '15.2', java.version: '17.0.10'
Driver info: driver.version: HtmlUnitDriver
	at org.openqa.selenium.htmlunit.HtmlUnitDriver.get(HtmlUnitDriver.java:665)
	at org.openqa.selenium.htmlunit.HtmlUnitDriver.lambda$get$7(HtmlUnitDriver.java:619)
	at org.openqa.selenium.htmlunit.HtmlUnitDriver.lambda$runAsync$0(HtmlUnitDriver.java:351)
	at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1136)
	at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:635)
	at java.base/java.lang.Thread.run(Thread.java:842)
Caused by: org.htmlunit.ScriptException: ReferenceError: "mermaid" is not defined. (script in data:text/html;charset=UTF-8,<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mermaid Rendering Test</title>
    <!-- Load actual Mermaid library from CDN -->
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
    <style>
        .mermaid { font-family: sans-serif; }
    </style>
</head>
<body>
    <div class="mermaid">
        graph TD
        A[Start] --> B[Process]
        B --> C{Decision}
        C -->|Yes| D[Result 1]
        C -->|No| E[Result 2]
    </div>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true
            }
        });
    </script>
</body>
</html> from (21, 13) to (30, 14)#22)
	at org.htmlunit.javascript.JavaScriptEngine$HtmlUnitContextAction.run(JavaScriptEngine.java:934)
	at org.htmlunit.corejs.javascript.Context.call(Context.java:627)
	at org.htmlunit.corejs.javascript.ContextFactory.call(ContextFactory.java:448)
	at org.htmlunit.javascript.HtmlUnitContextFactory.callSecured(HtmlUnitContextFactory.java:312)
	at org.htmlunit.javascript.JavaScriptEngine.execute(JavaScriptEngine.java:781)
	at org.htmlunit.javascript.JavaScriptEngine.execute(JavaScriptEngine.java:756)
	at org.htmlunit.html.HtmlPage.executeJavaScript(HtmlPage.java:949)
	at org.htmlunit.html.ScriptElementSupport.executeInlineScriptIfNeeded(ScriptElementSupport.java:347)
	at org.htmlunit.html.ScriptElementSupport.executeScriptIfNeeded(ScriptElementSupport.java:213)
	at org.htmlunit.html.ScriptElementSupport$1.execute(ScriptElementSupport.java:112)
	at org.htmlunit.html.ScriptElementSupport.onAllChildrenAddedToPage(ScriptElementSupport.java:131)
	at org.htmlunit.html.HtmlScript.onAllChildrenAddedToPage(HtmlScript.java:216)
	at org.htmlunit.html.parser.neko.HtmlUnitNekoDOMBuilder.endElement(HtmlUnitNekoDOMBuilder.java:514)
	at org.htmlunit.cyberneko.xerces.parsers.AbstractSAXParser.endElement(AbstractSAXParser.java:287)
	at org.htmlunit.html.parser.neko.HtmlUnitNekoDOMBuilder.endElement(HtmlUnitNekoDOMBuilder.java:460)
	at org.htmlunit.cyberneko.HTMLTagBalancer.callEndElement(HTMLTagBalancer.java:1254)
	at org.htmlunit.cyberneko.HTMLTagBalancer.endElement(HTMLTagBalancer.java:1198)
	at org.htmlunit.cyberneko.filters.DefaultFilter.endElement(DefaultFilter.java:169)
	at org.htmlunit.cyberneko.filters.NamespaceBinder.endElement(NamespaceBinder.java:264)
	at org.htmlunit.cyberneko.HTMLScanner$ContentScanner.scanEndElement(HTMLScanner.java:3223)
	at org.htmlunit.cyberneko.HTMLScanner$ContentScanner.scan(HTMLScanner.java:2133)
	at org.htmlunit.cyberneko.HTMLScanner.scanDocument(HTMLScanner.java:930)
	at org.htmlunit.cyberneko.HTMLConfiguration.parse(HTMLConfiguration.java:350)
	at org.htmlunit.cyberneko.HTMLConfiguration.parse(HTMLConfiguration.java:308)
	at org.htmlunit.cyberneko.xerces.parsers.AbstractXMLDocumentParser.parse(AbstractXMLDocumentParser.java:79)
	at org.htmlunit.html.parser.neko.HtmlUnitNekoDOMBuilder.parse(HtmlUnitNekoDOMBuilder.java:757)
	at org.htmlunit.html.parser.neko.HtmlUnitNekoHtmlParser.parse(HtmlUnitNekoHtmlParser.java:178)
	at org.htmlunit.DefaultPageCreator.createHtmlPage(DefaultPageCreator.java:300)
	at org.htmlunit.DefaultPageCreator.createPage(DefaultPageCreator.java:219)
	at org.htmlunit.WebClient.loadWebResponseInto(WebClient.java:690)
	at org.htmlunit.WebClient.loadWebResponseInto(WebClient.java:584)
	at org.htmlunit.WebClient.getPage(WebClient.java:501)
	at org.htmlunit.WebClient.getPage(WebClient.java:410)
	at org.openqa.selenium.htmlunit.HtmlUnitDriver.get(HtmlUnitDriver.java:638)
	... 5 more
Caused by: org.htmlunit.corejs.javascript.EcmaError: ReferenceError: "mermaid" is not defined. (script in data:text/html;charset=UTF-8,<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mermaid Rendering Test</title>
    <!-- Load actual Mermaid library from CDN -->
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
    <style>
        .mermaid { font-family: sans-serif; }
    </style>
</head>
<body>
    <div class="mermaid">
        graph TD
        A[Start] --> B[Process]
        B --> C{Decision}
        C -->|Yes| D[Result 1]
        C -->|No| E[Result 2]
    </div>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true
            }
        });
    </script>
</body>
</html> from (21, 13) to (30, 14)#22)
	at org.htmlunit.corejs.javascript.ScriptRuntime.constructError(ScriptRuntime.java:5312)
	at org.htmlunit.corejs.javascript.ScriptRuntime.constructError(ScriptRuntime.java:5293)
	at org.htmlunit.corejs.javascript.ScriptRuntime.notFoundError(ScriptRuntime.java:5416)
	at org.htmlunit.corejs.javascript.ScriptRuntime.name(ScriptRuntime.java:2194)
	at org.htmlunit.corejs.javascript.Interpreter.interpretLoop(Interpreter.java:2105)
	at org.htmlunit.corejs.javascript.Interpreter.interpret(Interpreter.java:1161)
	at org.htmlunit.corejs.javascript.InterpretedFunction.call(InterpretedFunction.java:92)
	at org.htmlunit.corejs.javascript.ContextFactory.doTopCall(ContextFactory.java:356)

Activity

  1. rbri commented on Jun 26, 2025

    @rbri
    Member

    Looks like mermaid.min.js uses some js features that are currently not supported by HtmlUnit/Rhino (e.g. ...). Maybe you can use Babel to transpile the mermaid stuff into something that is supported.

  2. xiongxoy commented on Jun 27, 2025

    @xiongxoy
    Author

    Looks like mermaid.min.js uses some js features that are currently not supported by HtmlUnit/Rhino (e.g. ...). Maybe you can use Babel to transpile the mermaid stuff into something that is supported.

    Thank you for your reply, I will try Babel

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions