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; + }); +}