Make inspector-elements-05 test deterministic. Insert iframe dynamica…

…lly. (#10323) * Make inspector-elements-05 test deterministic. Insert iframe dynamically. * Re-record doc_inspector_basic.html.
replayio · Feb 14, 2024 · 87b3856 · 87b3856
1 parent 7333d1c
commit 87b3856
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/packages/e2e-tests/examples.json b/packages/e2e-tests/examples.json
diff --git a/packages/e2e-tests/tests/highlighter.test.ts b/packages/e2e-tests/tests/highlighter.test.ts
@@ -16,7 +16,7 @@ test("highlighter: element highlighter works everywhere", async ({
   await warpToMessage(page, "ExampleFinished");
   await openElementsPanel(page);
 
-  await selectElementsListRow(page, { text: "myiframe" });
+  await selectElementsListRow(page, { text: 'iframe id="myiframe"', type: "opening" });
 
   const highlighter = page.locator("#box-model-content");
   await highlighter.waitFor();

diff --git a/packages/e2e-tests/tests/inspector-elements-05_search.test.ts b/packages/e2e-tests/tests/inspector-elements-05_search.test.ts
@@ -19,7 +19,7 @@ test(`inspector-elements-05_search: element picker and iframe behavior`, async (
   await openElementsPanel(page);
 
   // This search string should not match anything initially
-  await seekToTimePercent(page, 50);
+  await warpToMessage(page, "waiting for iframe");
   await searchElementsPanel(page, "inner-body");
   await verifySearchResults(page, { currentNumber: 0, totalNumber: 0 });
 

diff --git a/public/test/examples/doc_inspector_basic.html b/public/test/examples/doc_inspector_basic.html
@@ -14,6 +14,17 @@
   console.log("iframeFinished");
   window.setTimeout(foo);
 }
+
+function createIFrame() {
+  var iframe = document.createElement("iframe");
+  iframe.id = "myiframe";
+  iframe.src = "./iframe.html";
+  document.getElementById("iframehost").appendChild(iframe);
+}
+
+console.log("waiting for iframe");
+window.setTimeout(createIFrame);
+
 </script>
 <div id="div1">
   <div id="div2">
@@ -23,7 +34,8 @@
   </div>
   <div id="div4" some-attribute="STUFF"></div>
 </div>
-<iframe src="iframe.html" id="myiframe"></iframe>
+<div id="iframehost">
+</div>
 
 <script>
   function printCenter(id) {
@@ -41,6 +53,5 @@
   }
 
   printCenter("maindiv");
-  printCenter("myiframe");
 </script>
 </body>