Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Mermaid Js not loaded

Abierto
#981 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
38/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
java, javascript

Línea de trabajo

Start by reproducing the supplied HtmlUnitDriver test with the Mermaid CDN script and the shown HtmlUnit 3 driver dependency. Check how external scripts are fetched and executed for a data: URL, then compare the observed behavior with the reported missing mermaid global. Done means the cause is identified and a regression test demonstrates the corrected behavior; the issue does not name repository files or tests.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción


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)
Lenguaje dominante
JavaScript
Estrellas
952
Forks
183
Merge medio
2 d 1 h
PR fusionados (30 d)
1

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de HtmlUnit/htmlunit

Todos los issues de HtmlUnit/htmlunit

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.