diff --git a/packages/playwright-ct-react/register.mjs b/packages/playwright-ct-react/register.mjs
index 3c1721e33b..1b2f479105 100644
--- a/packages/playwright-ct-react/register.mjs
+++ b/packages/playwright-ct-react/register.mjs
@@ -53,6 +53,11 @@ function render(component) {
 }
 
 window.playwrightMount = component => {
+  if (!document.getElementById('root')) {
+    const rootElement = document.createElement('div');
+    rootElement.id = 'root';
+    document.body.append(rootElement);
+  }
   ReactDOM.render(render(component), document.getElementById('root'));
   return '#root > *';
 };
diff --git a/packages/playwright-ct-svelte/register.mjs b/packages/playwright-ct-svelte/register.mjs
index 358849e332..66f663249f 100644
--- a/packages/playwright-ct-svelte/register.mjs
+++ b/packages/playwright-ct-svelte/register.mjs
@@ -26,6 +26,11 @@ export default (components, options) => {
 };
 
 const playwrightMount = component => {
+  if (!document.getElementById('root')) {
+    const rootElement = document.createElement('div');
+    rootElement.id = 'root';
+    document.body.append(rootElement);
+  }
   let componentCtor = registry.get(component.type);
   if (!componentCtor) {
     // Lookup by shorthand.
diff --git a/packages/playwright-ct-vue/register.mjs b/packages/playwright-ct-vue/register.mjs
index e4856df8e4..f999d14976 100644
--- a/packages/playwright-ct-vue/register.mjs
+++ b/packages/playwright-ct-vue/register.mjs
@@ -125,6 +125,11 @@ function createDevTools() {
 }
 
 window.playwrightMount = async component => {
+  if (!document.getElementById('root')) {
+    const rootElement = document.createElement('div');
+    rootElement.id = 'root';
+    document.body.append(rootElement);
+  }
   const app = instance.createApp({
     render: () => render(component)
   });