diff --git a/packages/playwright-core/src/server/injected/recorder/recorder.ts b/packages/playwright-core/src/server/injected/recorder/recorder.ts
index dfbd4608f0..76d5791b64 100644
--- a/packages/playwright-core/src/server/injected/recorder/recorder.ts
+++ b/packages/playwright-core/src/server/injected/recorder/recorder.ts
@@ -1039,9 +1039,12 @@ export class Recorder {
 
     this.highlight.install();
     // some frameworks erase the DOM on hydration, this ensures it's reattached
-    const recreationInterval = setInterval(() => {
+    let recreationInterval: number | undefined;
+    const recreate = () => {
       this.highlight.install();
-    }, 500);
+      recreationInterval = this.injectedScript.builtinSetTimeout(recreate, 500);
+    };
+    recreationInterval = this.injectedScript.builtinSetTimeout(recreate, 500);
     this._listeners.push(() => clearInterval(recreationInterval));
 
     this.overlay?.install();
diff --git a/tests/library/inspector/cli-codegen-3.spec.ts b/tests/library/inspector/cli-codegen-3.spec.ts
index b2f0c39988..2ebdd1788c 100644
--- a/tests/library/inspector/cli-codegen-3.spec.ts
+++ b/tests/library/inspector/cli-codegen-3.spec.ts
@@ -744,7 +744,7 @@ await page.GetByLabel("Coun\\"try").ClickAsync();`);
     const recorder = await openRecorder();
 
     const hydrate = () => {
-      setTimeout(() => {
+      window.builtinSetTimeout(() => {
         document.documentElement.innerHTML = '<p>Post-Hydration Content</p>';
       }, 500);
     };