web: Update WebdriverIO packages to 9.2.2

Resolving a security advisory in the `ws` indirect dependency. Necessary manual changes: - Follow `getHTML` API change. - Take `ChainablePromiseElement` in utility functions. - Change `config` to `WebdriverIO.Config`. - Use `switchFrame` instead of `switchToFrame`.
ruffle-rs · Oct 28, 2024 · 1bc1130 · 1bc1130
1 parent e81bbe8
commit 1bc1130
Show file tree

Hide file tree

Showing 45 changed files with 3,181 additions and 3,834 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -12,8 +12,8 @@
         "@eslint/js": "^9.13.0",
         "@types/eslint__js": "^8.42.3",
         "@wdio/browserstack-service": "^9.2.2",
-        "@wdio/cli": "^8.40.2",
-        "@wdio/local-runner": "^8.40.2",
+        "@wdio/cli": "^9.2.2",
+        "@wdio/local-runner": "^9.2.2",
         "@wdio/mocha-framework": "^9.2.2",
         "@wdio/spec-reporter": "^9.2.2",
         "@wdio/static-server-service": "^9.2.2",
@@ -38,7 +38,7 @@
         "typedoc-plugin-mdn-links": "^3.3.5",
         "typescript": "^5.6.3",
         "typescript-eslint": "^8.11.0",
-        "webdriverio": "^8.40.0",
+        "webdriverio": "^9.2.2",
         "webpack": "^5.95.0",
         "webpack-cli": "^5.1.4"
     },

diff --git a/web/packages/selfhosted/test/integration_tests/context_menu/test.ts b/web/packages/selfhosted/test/integration_tests/context_menu/test.ts
@@ -21,7 +21,7 @@ async function supportsClipboardReadText(): Promise<boolean> {
     });
 }
 
-async function focusFlashInput(player: WebdriverIO.Element) {
+async function focusFlashInput(player: ChainablePromiseElement) {
     await player.click({ x: 10 - 200, y: 110 - 200 });
     expect(await getTraceOutput(browser, player)).to.equal(
         "onMouseDown()\nonMouseUp()\n",
@@ -35,16 +35,16 @@ async function focusHtmlInput() {
     });
 }
 
-async function openContextMenu(player: WebdriverIO.Element) {
+async function openContextMenu(player: ChainablePromiseElement) {
     await player.click({ x: 10 - 200, y: 10 - 200, button: "right" });
 }
 
-async function openContextMenuOnInput(player: WebdriverIO.Element) {
+async function openContextMenuOnInput(player: ChainablePromiseElement) {
     await player.click({ x: 10 - 200, y: 110 - 200, button: "right" });
 }
 
 async function clickContextMenuEntry(
-    player: WebdriverIO.Element,
+    player: ChainablePromiseElement,
     text: string,
     button: string = "left",
 ) {

diff --git a/web/packages/selfhosted/test/integration_tests/programmatic_events/test.ts b/web/packages/selfhosted/test/integration_tests/programmatic_events/test.ts
@@ -9,7 +9,7 @@ import chaiHtml from "chai-html";
 
 use(chaiHtml);
 
-async function focusElement(element: WebdriverIO.Element) {
+async function focusElement(element: ChainablePromiseElement) {
     await browser.execute((element) => {
         const el = element as unknown as HTMLElement;
         el.focus();

diff --git a/web/packages/selfhosted/test/polyfill/classic_frames_injected/test.ts b/web/packages/selfhosted/test/polyfill/classic_frames_injected/test.ts
@@ -12,10 +12,12 @@ describe("Flash inside frame with injected ruffle", () => {
 
     it("polyfills inside a frame", async () => {
         await injectRuffleAndWait(browser);
-        await browser.switchToFrame(await browser.$("#test-frame"));
+        await browser.switchFrame(await browser.$("#test-frame"));
         await browser.$("<ruffle-object />").waitForExist();
 
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",
@@ -30,16 +32,18 @@ describe("Flash inside frame with injected ruffle", () => {
         });
 
         // Then reload
-        await browser.switchToFrame(null);
-        await browser.switchToFrame(await browser.$("#nav-frame"));
+        await browser.switchFrame(null);
+        await browser.switchFrame(await browser.$("#nav-frame"));
         await browser.$("#reload-link").click();
 
         // And finally, check
-        await browser.switchToFrame(null);
-        await browser.switchToFrame(await browser.$("#test-frame"));
+        await browser.switchFrame(null);
+        await browser.switchFrame(await browser.$("#test-frame"));
         await browser.$("<ruffle-object />").waitForExist();
 
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         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
@@ -11,10 +11,12 @@ describe("Flash inside frame with provided ruffle", () => {
     });
 
     it("polyfills inside a frame", async () => {
-        await browser.switchToFrame(await browser.$("#test-frame"));
+        await browser.switchFrame(await browser.$("#test-frame"));
         await browser.$("<ruffle-object />").waitForExist();
 
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",
@@ -29,16 +31,18 @@ describe("Flash inside frame with provided ruffle", () => {
         });
 
         // Then reload
-        await browser.switchToFrame(null);
-        await browser.switchToFrame(await browser.$("#nav-frame"));
+        await browser.switchFrame(null);
+        await browser.switchFrame(await browser.$("#nav-frame"));
         await browser.$("#reload-link").click();
 
         // And finally, check
-        await browser.switchToFrame(null);
-        await browser.switchToFrame(await browser.$("#test-frame"));
+        await browser.switchFrame(null);
+        await browser.switchFrame(await browser.$("#test-frame"));
         await browser.$("<ruffle-object />").waitForExist();
 
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/embed_default/test.ts b/web/packages/selfhosted/test/polyfill/embed_default/test.ts
@@ -12,7 +12,9 @@ describe("Embed tag", () => {
 
     it("polyfills with ruffle", async () => {
         await injectRuffleAndWait(browser);
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/embed_insensitive/test.ts b/web/packages/selfhosted/test/polyfill/embed_insensitive/test.ts
@@ -14,7 +14,9 @@ describe("Embed with case-insensitive MIME type", () => {
         await injectRuffleAndWait(browser);
         await browser.$("<ruffle-embed />").waitForExist();
 
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/embed_inside_audio/test.ts b/web/packages/selfhosted/test/polyfill/embed_inside_audio/test.ts
@@ -12,7 +12,9 @@ describe("Embed inside audio node", () => {
 
     it("doesn't polyfill with ruffle", async () => {
         await injectRuffleAndWait(browser);
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/embed_missing_src/test.ts b/web/packages/selfhosted/test/polyfill/embed_missing_src/test.ts
@@ -12,7 +12,9 @@ describe("Embed without src attribute", () => {
 
     it("doesn't polyfill with ruffle", async () => {
         await injectRuffleAndWait(browser);
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/embed_missing_type/test.ts b/web/packages/selfhosted/test/polyfill/embed_missing_type/test.ts
@@ -12,7 +12,9 @@ describe("Embed without type attribute", () => {
 
     it("polyfills with ruffle", async () => {
         await injectRuffleAndWait(browser);
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/embed_unexpected_string/test.ts b/web/packages/selfhosted/test/polyfill/embed_unexpected_string/test.ts
@@ -12,7 +12,9 @@ describe("Embed with unexpected string", () => {
 
     it("polyfills with ruffle", async () => {
         await injectRuffleAndWait(browser);
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/embed_wrong_type/test.ts b/web/packages/selfhosted/test/polyfill/embed_wrong_type/test.ts
@@ -12,7 +12,9 @@ describe("Embed with wrong type attribute value", () => {
 
     it("polyfills with ruffle", async () => {
         await injectRuffleAndWait(browser);
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/embed_youtube/test.ts b/web/packages/selfhosted/test/polyfill/embed_youtube/test.ts
@@ -12,7 +12,9 @@ describe("Embed with Flash YouTube video", () => {
 
     it("doesn't polyfill with ruffle", async () => {
         await injectRuffleAndWait(browser);
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/iframes_injected/test.ts b/web/packages/selfhosted/test/polyfill/iframes_injected/test.ts
@@ -12,10 +12,12 @@ describe("Flash inside iframe with injected ruffle", () => {
 
     it("polyfills inside an iframe", async () => {
         await injectRuffleAndWait(browser);
-        await browser.switchToFrame(await browser.$("#test-frame"));
+        await browser.switchFrame(await browser.$("#test-frame"));
         await browser.$("<ruffle-object />").waitForExist();
 
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",
@@ -30,15 +32,17 @@ describe("Flash inside iframe with injected ruffle", () => {
         });
 
         // Then reload
-        await browser.switchToFrame(null);
+        await browser.switchFrame(null);
         await browser.$("#reload-link").click();
 
         // And finally, check
-        await browser.switchToFrame(null);
-        await browser.switchToFrame(await browser.$("#test-frame"));
+        await browser.switchFrame(null);
+        await browser.switchFrame(await browser.$("#test-frame"));
         await browser.$("<ruffle-object />").waitForExist();
 
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/iframes_onload/test.ts b/web/packages/selfhosted/test/polyfill/iframes_onload/test.ts
@@ -14,7 +14,9 @@ describe("iframe onload", () => {
         await injectRuffleAndWait(browser);
         await browser.$("<div />").waitForExist();
 
-        const actual = await browser.$("#container").getHTML(false);
+        const actual = await browser
+            .$("#container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/iframes_provided/test.ts b/web/packages/selfhosted/test/polyfill/iframes_provided/test.ts
@@ -11,10 +11,12 @@ describe("Flash inside iframe with provided ruffle", () => {
     });
 
     it("polyfills inside an iframe", async () => {
-        await browser.switchToFrame(await browser.$("#test-frame"));
+        await browser.switchFrame(await browser.$("#test-frame"));
         await browser.$("<ruffle-object />").waitForExist();
 
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",
@@ -29,15 +31,17 @@ describe("Flash inside iframe with provided ruffle", () => {
         });
 
         // Then reload
-        await browser.switchToFrame(null);
+        await browser.switchFrame(null);
         await browser.$("#reload-link").click();
 
         // And finally, check
-        await browser.switchToFrame(null);
-        await browser.switchToFrame(await browser.$("#test-frame"));
+        await browser.switchFrame(null);
+        await browser.switchFrame(await browser.$("#test-frame"));
         await browser.$("<ruffle-object />").waitForExist();
 
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/object_MIME_insensitive/test.ts b/web/packages/selfhosted/test/polyfill/object_MIME_insensitive/test.ts
@@ -14,7 +14,9 @@ describe("Object with case-insensitive MIME type", () => {
         await injectRuffleAndWait(browser);
         await browser.$("<ruffle-object />").waitForExist();
 
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/object_clsid_insensitive/test.ts b/web/packages/selfhosted/test/polyfill/object_clsid_insensitive/test.ts
@@ -14,7 +14,9 @@ describe("Object with case-insensitive clsid", () => {
         await injectRuffleAndWait(browser);
         await browser.$("<ruffle-object />").waitForExist();
 
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/object_clsid_with_embed/test.ts b/web/packages/selfhosted/test/polyfill/object_clsid_with_embed/test.ts
@@ -12,7 +12,9 @@ describe("Object with clsid and embed", () => {
 
     it("polyfills with ruffle", async () => {
         await injectRuffleAndWait(browser);
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/object_data/test.ts b/web/packages/selfhosted/test/polyfill/object_data/test.ts
@@ -14,7 +14,9 @@ describe("Object with only data attribute", () => {
         await injectRuffleAndWait(browser);
         await browser.$("<ruffle-object />").waitForExist();
 
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/object_default/test.ts b/web/packages/selfhosted/test/polyfill/object_default/test.ts
@@ -12,7 +12,9 @@ describe("Object tag", () => {
 
     it("polyfills with ruffle", async () => {
         await injectRuffleAndWait(browser);
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/object_double_object/test.ts b/web/packages/selfhosted/test/polyfill/object_double_object/test.ts
@@ -12,7 +12,9 @@ describe("Object with another object tag", () => {
 
     it("polyfills only the first tag with ruffle", async () => {
         await injectRuffleAndWait(browser);
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/object_double_object_classid/test.ts b/web/packages/selfhosted/test/polyfill/object_double_object_classid/test.ts
@@ -12,7 +12,9 @@ describe("Object using classid with another object tag without classid", () => {
 
     it("polyfills only the second tag with ruffle", async () => {
         await injectRuffleAndWait(browser);
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",

diff --git a/web/packages/selfhosted/test/polyfill/object_flashvars/test.ts b/web/packages/selfhosted/test/polyfill/object_flashvars/test.ts
@@ -12,7 +12,9 @@ describe("Object tag", () => {
 
     it("polyfills with ruffle", async () => {
         await injectRuffleAndWait(browser);
-        const actual = await browser.$("#test-container").getHTML(false);
+        const actual = await browser
+            .$("#test-container")
+            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
         const expected = fs.readFileSync(
             `${import.meta.dirname}/expected.html`,
             "utf8",