diff --git a/test/unit/play/runner.test.js b/test/unit/play/runner.test.js
new file mode 100644
index 000000000..77cad5dea
--- /dev/null
+++ b/test/unit/play/runner.test.js
@@ -0,0 +1,54 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+
+import { renderHtml } from "../../../vendor/yari/libs/play/index.js";
+
+describe("play renderHtml", () => {
+  const out = renderHtml({ html: "<p>ok</p>", css: "", js: "1;" });
+  const body = out.slice(out.indexOf("<body>"));
+  const head = out.slice(0, out.indexOf("</head>"));
+
+  const cases = [
+    {
+      name: "closes unclosed tags, attribute values, and comments",
+      haystack: body,
+      needle: `<!-- "" '' -->`,
+    },
+    {
+      name: "records that the runner script was reached",
+      haystack: body,
+      needle: "window.__mdnPlayJsStarted = true;",
+    },
+    {
+      name: "records that the runner script ended",
+      haystack: body,
+      needle: "window.__mdnPlayJsEnded = true;",
+    },
+    {
+      name: "checks the flags from the head",
+      haystack: head,
+      needle: "window.__mdnPlayJsStarted && window.__mdnPlayJsEnded",
+    },
+    {
+      name: "checks the flags after DOMContentLoaded",
+      haystack: head,
+      needle: 'addEventListener("DOMContentLoaded"',
+    },
+  ];
+
+  for (const { name, haystack, needle } of cases) {
+    it(name, () => {
+      assert.ok(haystack.includes(needle), `missing ${needle}`);
+    });
+  }
+
+  it("places the closer and flag script between the HTML and the runner", () => {
+    const html = body.indexOf("<p>ok</p>");
+    const closer = body.indexOf(`<!-- "" '' -->`);
+    const started = body.indexOf("__mdnPlayJsStarted = true");
+    const runner = body.indexOf('id="mdn-play-js"');
+    const ended = body.indexOf("__mdnPlayJsEnded = true");
+    assert.ok(html < closer && closer < started && started < runner);
+    assert.ok(runner < ended);
+  });
+});
diff --git a/vendor/yari/libs/play/index.js b/vendor/yari/libs/play/index.js
index 3c9dca33b..7c5556a85 100644
--- a/vendor/yari/libs/play/index.js
+++ b/vendor/yari/libs/play/index.js
@@ -488,6 +488,16 @@ export function renderHtml(state = null) {
           window.console = consoleProxy;
           window.addEventListener("error", (e) => console.log(e.error));
         </script>
+        <script>
+          document.addEventListener("DOMContentLoaded", () => {
+            if (!(window.__mdnPlayJsStarted && window.__mdnPlayJsEnded)) {
+              console.warn(
+                "[Playground] The JavaScript did not run. This usually means " +
+                  "the HTML input contains an unclosed or malformed tag.",
+              );
+            }
+          });
+        </script>
         ${
           defaults === "ix-tabbed"
             ? html`<script>
@@ -530,10 +540,15 @@ export function renderHtml(state = null) {
       </head>
       <body>
         ${htmlCode}
-        <script type=${defaults === "ix-wat" ? "module" : ""}>
+        <!-- "" '' -->
+        <script>
+          window.__mdnPlayJsStarted = true;
+        </script>
+        <script id="mdn-play-js" type=${defaults === "ix-wat" ? "module" : ""}>
           ${js};
         </script>
-        <script>
+        <script id="mdn-play-js-end">
+          window.__mdnPlayJsEnded = true;
           try {
             const uuid =
               new URLSearchParams(location.search).get("uuid") || undefined;
