diff --git a/web/packages/selfhosted/test/polyfill/classic_frames_injected/test.ts b/web/packages/selfhosted/test/polyfill/classic_frames_injected/test.ts
index c9b315adec80..bdcf50fe1ce2 100644
--- 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.$("").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.$("").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
index 27822e510771..b80149217a3d 100644
--- 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.$("").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.$("").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
index ea3f16069bf0..8932066e5daa 100644
--- 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.$("").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;
+ });
+}