web: Work around webdriverio frame-switching bug with selectors

ruffle-rs · Oct 14, 2024 · c00bffc · c00bffc
1 parent de8b3f1
commit c00bffc
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 28 deletions.
diff --git a/web/packages/selfhosted/test/polyfill/classic_frames_injected/test.ts b/web/packages/selfhosted/test/polyfill/classic_frames_injected/test.ts
@@ -1,4 +1,9 @@
-import { openTest, injectRuffleAndWait } from "../../utils.js";
+import {
+    openTest,
+    injectRuffleAndWait,
+    waitForRuffleObjectInTestFrame,
+    getContainerHTMLFromTestFrame,
+} from "../../utils.js";
 import { expect, use } from "chai";
 import chaiHtml from "chai-html";
 import fs from "fs";
@@ -12,12 +17,10 @@ describe("Flash inside frame with injected ruffle", () => {
 
     it("polyfills inside a frame", async () => {
         await injectRuffleAndWait(browser);
-        await browser.switchFrame(await browser.$("#test-frame"));
-        await browser.$("<ruffle-object />").waitForExist();
+        await browser.switchToFrame(await browser.$("#test-frame"));
+        await waitForRuffleObjectInTestFrame(browser);
 
-        const actual = await browser
-            .$("#test-container")
-            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
+        const actual = await getContainerHTMLFromTestFrame(browser);
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",
@@ -32,18 +35,16 @@ describe("Flash inside frame with injected ruffle", () => {
         });
 
         // Then reload
-        await browser.switchFrame(null);
-        await browser.switchFrame(await browser.$("#nav-frame"));
+        await browser.switchToFrame(null);
+        await browser.switchToFrame(await browser.$("#nav-frame"));
         await browser.$("#reload-link").click();
 
         // And finally, check
-        await browser.switchFrame(null);
-        await browser.switchFrame(await browser.$("#test-frame"));
-        await browser.$("<ruffle-object />").waitForExist();
+        await browser.switchToFrame(null);
+        await browser.switchToFrame(await browser.$("#test-frame"));
+        await waitForRuffleObjectInTestFrame(browser);
 
-        const actual = await browser
-            .$("#test-container")
-            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
+        const actual = await getContainerHTMLFromTestFrame(browser);
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/classic_frames_provided/test.ts b/web/packages/selfhosted/test/polyfill/classic_frames_provided/test.ts
@@ -1,4 +1,8 @@
-import { openTest } from "../../utils.js";
+import {
+    openTest,
+    waitForRuffleObjectInTestFrame,
+    getContainerHTMLFromTestFrame,
+} from "../../utils.js";
 import { expect, use } from "chai";
 import chaiHtml from "chai-html";
 import fs from "fs";
@@ -11,12 +15,10 @@ describe("Flash inside frame with provided ruffle", () => {
     });
 
     it("polyfills inside a frame", async () => {
-        await browser.switchFrame(await browser.$("#test-frame"));
-        await browser.$("<ruffle-object />").waitForExist();
+        await browser.switchToFrame(await browser.$("#test-frame"));
+        await waitForRuffleObjectInTestFrame(browser);
 
-        const actual = await browser
-            .$("#test-container")
-            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
+        const actual = await getContainerHTMLFromTestFrame(browser);
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",
@@ -31,18 +33,16 @@ describe("Flash inside frame with provided ruffle", () => {
         });
 
         // Then reload
-        await browser.switchFrame(null);
-        await browser.switchFrame(await browser.$("#nav-frame"));
+        await browser.switchToFrame(null);
+        await browser.switchToFrame(await browser.$("#nav-frame"));
         await browser.$("#reload-link").click();
 
         // And finally, check
-        await browser.switchFrame(null);
-        await browser.switchFrame(await browser.$("#test-frame"));
-        await browser.$("<ruffle-object />").waitForExist();
+        await browser.switchToFrame(null);
+        await browser.switchToFrame(await browser.$("#test-frame"));
+        await waitForRuffleObjectInTestFrame(browser);
 
-        const actual = await browser
-            .$("#test-container")
-            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
+        const actual = await getContainerHTMLFromTestFrame(browser);
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/utils.ts b/web/packages/selfhosted/test/utils.ts
@@ -206,3 +206,38 @@ export function loadJsAPI(swf?: string) {
         }
     });
 }
+
+// TODO: After https://github.com/webdriverio/webdriverio/issues/13218 is fixed,
+// use `browser.$("<ruffle-object />").waitForExist()` at all call sites instead.
+export async function waitForRuffleObjectInTestFrame(
+    browser: WebdriverIO.Browser,
+) {
+    await browser
+        .$(
+            () =>
+                (
+                    document.querySelector("#test-frame") as
+                        | HTMLIFrameElement
+                        | HTMLFrameElement
+                ).contentDocument?.body.querySelector(
+                    "ruffle-object",
+                ) as HTMLElement,
+        )
+        .waitForExist();
+}
+
+// TODO: After https://github.com/webdriverio/webdriverio/issues/13218 is fixed, use
+// `browser.$("#test-container").getHTML({ includeSelectorTag: false, pierceShadowRoot: false })`
+// at all call sites instead.
+export async function getContainerHTMLFromTestFrame(
+    browser: WebdriverIO.Browser,
+) {
+    return await browser.execute(() => {
+        const el = (
+            document.querySelector("#test-frame") as
+                | HTMLIFrameElement
+                | HTMLFrameElement
+        ).contentDocument?.body.querySelector("#test-container");
+        return el?.innerHTML;
+    });
+}