@robotical/martyblocksjr 4.2.0 → 4.2.1

package/tests/e2e/chromium-79-smoke.test.js

@@ -108,6 +108,15 @@ async function assertTutorialOpened(page, tutorialId) {
   expect(tutorialState.tutorialTitle.length).toBeGreaterThan(0);
 }
 
+async function openHiddenExtensionsLibrary(page) {
+  await page.$eval("#addExtensionButton", (button) => {
+    if (!button.disabled || window.getComputedStyle(button).display !== "none") {
+      throw new Error("Expected the extensions entry point to remain hidden and disabled");
+    }
+    button.onclick();
+  });
+}
+
 describe("Chromium 79 smoke test", () => {
   it(
     "loads home page without console errors",
@@ -123,7 +132,7 @@ describe("Chromium 79 smoke test", () => {
   );
 
   it(
-    "hides micro:bit controls until the extension is added",
+    "keeps the extension entry hidden and reveals micro:bit controls only while loaded",
     async () => {
       const { browser, page, errors } = await openPage("/editor.html?mode=edit");
 
@@ -148,9 +157,9 @@ describe("Chromium 79 smoke test", () => {
         });
 
         expect(initialState).toEqual({
-          addButtonDisplay: "flex",
-          addButtonAriaHidden: "false",
-          addButtonDisabled: false,
+          addButtonDisplay: "none",
+          addButtonAriaHidden: "true",
+          addButtonDisabled: true,
           microBitButtonDisplay: "none",
           microBitButtonAriaHidden: "true",
           microBitButtonDisabled: true,
@@ -158,7 +167,7 @@ describe("Chromium 79 smoke test", () => {
           extensionEnabled: false,
         });
 
-        await page.click("#addExtensionButton");
+        await openHiddenExtensionsLibrary(page);
         await page.waitForSelector("#extensionsLibrary.fade.in", { timeout: 30_000 });
         const libraryState = await page.evaluate(() => ({
           title: document.getElementById("extensionsLibraryTitle").textContent.trim(),
@@ -212,9 +221,9 @@ describe("Chromium 79 smoke test", () => {
         });
 
         expect(enabledState).toEqual({
-          addButtonDisplay: "flex",
-          addButtonAriaHidden: "false",
-          addButtonDisabled: false,
+          addButtonDisplay: "none",
+          addButtonAriaHidden: "true",
+          addButtonDisabled: true,
           microBitButtonDisplay: "flex",
           microBitButtonAriaHidden: "false",
           microBitButtonDisabled: false,
@@ -281,7 +290,7 @@ describe("Chromium 79 smoke test", () => {
         });
         expect(blocksAfterInsert).toContain("microbitdisplayclear");
 
-        await page.click("#addExtensionButton");
+        await openHiddenExtensionsLibrary(page);
         await page.waitForSelector("#extensionsLibrary.fade.in", { timeout: 30_000 });
         const loadedLibraryState = await page.evaluate(() => ({
           microBitCardAction: document.getElementById("microBitExtensionCardAction").textContent.trim(),
@@ -330,7 +339,7 @@ describe("Chromium 79 smoke test", () => {
           extensionEnabled: document.getElementById("connectionButtonsArea").classList.contains("extensionEnabled"),
         }));
         expect(unloadedState).toEqual({
-          addButtonDisplay: "flex",
+          addButtonDisplay: "none",
           microBitButtonDisplay: "none",
           extensionsLibraryOpen: false,
           microBitCardAction: "+",

package/tests/e2e/delete-last-sprite-mode.e2e.test.js

@@ -0,0 +1,162 @@
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import puppeteer from "puppeteer";
+import { spawn } from "child_process";
+import http from "http";
+
+const PORT = 3015;
+const HOST = `http://localhost:${PORT}`;
+
+let server;
+
+async function waitForServer(maxAttempts = 20) {
+  for (let attempt = 0; attempt < maxAttempts; attempt += 1) {
+    const ok = await new Promise((resolve) => {
+      const req = http.get(`${HOST}/`, (res) => {
+        res.destroy();
+        resolve(true);
+      });
+      req.on("error", () => resolve(false));
+    });
+    if (ok) {
+      return;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  }
+  throw new Error("Local server did not start in time");
+}
+
+beforeAll(async () => {
+  server = spawn("python3", ["-m", "http.server", `${PORT}`, "--directory", "editions/free/src"], {
+    stdio: "ignore",
+  });
+  await waitForServer();
+}, 30000);
+
+afterAll(() => {
+  if (server) {
+    server.kill();
+  }
+});
+
+async function openPage(pathname) {
+  const browser = await puppeteer.launch({
+    headless: true,
+    args: ["--no-sandbox"],
+  });
+  const page = await browser.newPage();
+  const errors = [];
+
+  page.on("pageerror", (err) => errors.push(err.message || String(err)));
+  page.on("console", (msg) => {
+    if (msg.type() === "error") {
+      errors.push(msg.text());
+    }
+  });
+
+  await page.goto(`${HOST}${pathname}`, { waitUntil: "networkidle2", timeout: 30000 });
+
+  return { browser, page, errors };
+}
+
+async function waitForEditorReady(page) {
+  await page.waitForFunction(
+    () => {
+      const backdrop = document.getElementById("backdrop");
+      const selectedSpriteThumb = document.querySelector("#spritecc .spritethumb[aria-pressed=\"true\"]");
+      return Boolean(
+        window.ScratchJr
+          && window.ScratchJr.stage
+          && window.ScratchJr.stage.currentPage
+          && document.getElementById("addsprite")
+          && document.getElementById("martyMode")
+          && selectedSpriteThumb
+          && backdrop
+          && window.getComputedStyle(backdrop).display === "none"
+          && !window.ScratchJr.onHold
+          && window.ScratchJr.getActiveScript()
+      );
+    },
+    { timeout: 30000 }
+  );
+}
+
+async function getEditorState(page) {
+  return page.evaluate(() => {
+    const currentPage = window.ScratchJr.stage.currentPage;
+    const spriteIds = currentPage.getSprites();
+    const normalSpriteIds = spriteIds.filter(
+      (spriteId) => spriteId.indexOf(window.ScratchJr.BIRDS_EYE_SPRITE_NAME) === -1
+    );
+    const currentSpriteName = currentPage.currentSpriteName || "";
+    const addSpriteButton = document.getElementById("addsprite");
+
+    return {
+      currentSpriteName,
+      spriteIds,
+      normalSpriteIds,
+      isMartyModeEnabled: window.ScratchJr.isMartyModeEnabled,
+      activeSpriteIsMartyBirdsEye:
+        currentSpriteName.indexOf(window.ScratchJr.BIRDS_EYE_SPRITE_NAME) > -1,
+      hasMartyModeSidebarCard: Boolean(document.getElementById("martyModeSidebarCard")),
+      addSpriteButtonVisible:
+        Boolean(addSpriteButton) && window.getComputedStyle(addSpriteButton).display !== "none",
+      addSpriteButtonDisabled: Boolean(addSpriteButton && addSpriteButton.disabled),
+    };
+  });
+}
+
+async function deleteSelectedSpriteWithKeyboard(page) {
+  await page.focus("#spritecc .spritethumb[aria-pressed=\"true\"]");
+  await page.keyboard.press("Delete");
+  await page.waitForFunction(
+    () => {
+      const currentPage = window.ScratchJr.stage.currentPage;
+      return currentPage.getSprites().filter(
+        (spriteId) => spriteId.indexOf(window.ScratchJr.BIRDS_EYE_SPRITE_NAME) === -1
+      ).length === 0;
+    },
+    { timeout: 30000 }
+  );
+}
+
+describe("deleting the final sprite", () => {
+  it(
+    "keeps the editor in Sprite mode when no normal sprites remain",
+    async () => {
+      const { browser, page, errors } = await openPage("/editor.html?mode=edit");
+
+      try {
+        await waitForEditorReady(page);
+
+        const beforeDelete = await getEditorState(page);
+        expect(beforeDelete).toMatchObject({
+          normalSpriteIds: [beforeDelete.currentSpriteName],
+          isMartyModeEnabled: false,
+          activeSpriteIsMartyBirdsEye: false,
+          hasMartyModeSidebarCard: false,
+          addSpriteButtonVisible: true,
+          addSpriteButtonDisabled: false,
+        });
+
+        await deleteSelectedSpriteWithKeyboard(page);
+
+        const afterDelete = await getEditorState(page);
+        expect(
+          afterDelete,
+          `Editor state after deleting the last normal sprite: ${JSON.stringify(afterDelete, null, 2)}`
+        ).toMatchObject({
+          normalSpriteIds: [],
+          isMartyModeEnabled: false,
+          activeSpriteIsMartyBirdsEye: false,
+          hasMartyModeSidebarCard: false,
+          addSpriteButtonVisible: true,
+          addSpriteButtonDisabled: false,
+        });
+        expect(errors).toEqual([]);
+      } finally {
+        await browser.close();
+      }
+    },
+    90000
+  );
+});

package/tests/e2e/duplicate-page.e2e.test.js

@@ -0,0 +1,414 @@
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import puppeteer from "puppeteer";
+import { spawn } from "child_process";
+import http from "http";
+
+const PORT = 3015;
+const HOST = `http://localhost:${PORT}`;
+const BACKGROUND_MD5 = "Beach.svg";
+const SCRIPT_BLOCK_TYPE = "forward";
+
+let server;
+
+async function waitForServer(maxAttempts = 20) {
+  for (let attempt = 0; attempt < maxAttempts; attempt += 1) {
+    const ok = await new Promise((resolve) => {
+      const req = http.get(`${HOST}/`, (res) => {
+        res.destroy();
+        resolve(true);
+      });
+      req.on("error", () => resolve(false));
+    });
+    if (ok) {
+      return;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  }
+  throw new Error("Local server did not start in time");
+}
+
+beforeAll(async () => {
+  server = spawn("python3", ["-m", "http.server", `${PORT}`, "--directory", "editions/free/src"], {
+    stdio: "ignore",
+  });
+  await waitForServer();
+}, 30_000);
+
+afterAll(() => {
+  if (server) {
+    server.kill();
+  }
+});
+
+async function openPage(pathname) {
+  const browser = await puppeteer.launch({
+    headless: true,
+    args: ["--no-sandbox"],
+  });
+  const page = await browser.newPage();
+  const errors = [];
+
+  page.on("pageerror", (err) => errors.push(err.message || String(err)));
+  page.on("console", (msg) => {
+    if (msg.type() === "error") {
+      errors.push(msg.text());
+    }
+  });
+
+  await page.goto(`${HOST}${pathname}`, { waitUntil: "networkidle2", timeout: 30_000 });
+
+  return { browser, page, errors };
+}
+
+async function waitForEditorReady(page) {
+  await page.waitForFunction(
+    () => {
+      const backdrop = document.getElementById("backdrop");
+      return Boolean(
+        window.ScratchJr
+          && window.ScratchJr.stage
+          && window.ScratchJr.stage.currentPage
+          && document.getElementById("pagecc")
+          && document.getElementById("sprite-motion")
+          && backdrop
+          && window.getComputedStyle(backdrop).display === "none"
+          && !window.ScratchJr.onHold
+          && window.ScratchJr.getActiveScript()
+      );
+    },
+    { timeout: 30_000 }
+  );
+}
+
+async function prepareSourcePage(page) {
+  await page.evaluate((backgroundMd5) => new Promise((resolve) => {
+    const currentPage = window.ScratchJr.stage.currentPage;
+    currentPage.setBackground(backgroundMd5, () => {
+      currentPage.updateThumb();
+      resolve();
+    });
+  }), BACKGROUND_MD5);
+
+  await page.click("#sprite-motion");
+  await page.waitForFunction(
+    (blockType) => Boolean(document.querySelector(`#palette [data-blocktype="${blockType}"]`)),
+    { timeout: 30_000 },
+    SCRIPT_BLOCK_TYPE
+  );
+
+  await page.evaluate((blockType) => {
+    const blockElement = document.querySelector(`#palette [data-blocktype="${blockType}"]`);
+    window.Palette.insertBlockFromKeyboard(blockElement, new Event("duplicate-page-e2e"));
+  }, SCRIPT_BLOCK_TYPE);
+
+  await page.waitForFunction(
+    (blockType) => window.ScratchJr.getBlocks().some((block) => block.blocktype === blockType),
+    { timeout: 30_000 },
+    SCRIPT_BLOCK_TYPE
+  );
+}
+
+async function activateDuplicatePageAction(page, requestedPageId) {
+  const result = await page.evaluate((pageId) => {
+    const targetPageId = pageId || window.ScratchJr.stage.currentPage.id;
+    const action = document.querySelector(`#pageactions .duplicatepage[data-owner="${targetPageId}"]`);
+
+    if (!action) {
+      return {
+        activated: false,
+        pageActions: Array.from(document.querySelectorAll("#pageactions .duplicatepage")).map((element) => ({
+          id: element.id || null,
+          owner: element.getAttribute("data-owner"),
+          label: element.getAttribute("aria-label") || element.getAttribute("title") || element.textContent || "",
+        })),
+      };
+    }
+
+    if (action.disabled || action.getAttribute("aria-disabled") === "true") {
+      return { activated: false, disabled: true };
+    }
+
+    action.dispatchEvent(new MouseEvent("click", {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+    }));
+    return { activated: true };
+  }, requestedPageId);
+
+  if (!result.activated) {
+    throw new Error(`No enabled accessible duplicate-page action found in the page strip: ${JSON.stringify(result)}`);
+  }
+}
+
+function pageHasBlock(pageData, blockType) {
+  return Boolean(pageData && Array.isArray(pageData.sprites) && pageData.sprites.some((spriteId) => {
+    const sprite = pageData[spriteId];
+    return sprite && Array.isArray(sprite.scripts) && sprite.scripts.some((strip) => {
+      return Array.isArray(strip) && strip.some((block) => Array.isArray(block) && block[0] === blockType);
+    });
+  }));
+}
+
+async function waitForPageDuplication(page, beforeCount) {
+  await page.waitForFunction(
+    (count) => window.ScratchJr.stage.pages.length === count + 1
+      && !window.ScratchJr.stage.duplicatingPage,
+    { timeout: 30_000 },
+    beforeCount
+  );
+}
+
+describe("duplicate page", () => {
+  it(
+    "duplicates the current page with its scripts and background from the page strip",
+    async () => {
+      const { browser, page, errors } = await openPage("/editor.html?mode=edit");
+
+      try {
+        await waitForEditorReady(page);
+        await prepareSourcePage(page);
+
+        const sourceState = await page.evaluate(() => {
+          const sourcePage = window.ScratchJr.stage.currentPage;
+          return {
+            pageId: sourcePage.id,
+            pageData: sourcePage.encodePage(),
+            pageCount: window.ScratchJr.stage.pages.length,
+          };
+        });
+        expect(sourceState.pageData.md5).toBe(BACKGROUND_MD5);
+        expect(pageHasBlock(sourceState.pageData, SCRIPT_BLOCK_TYPE)).toBe(true);
+
+        const pageActionState = await page.evaluate((sourcePageId) => {
+          const action = document.querySelector(`#pageactions .duplicatepage[data-owner="${sourcePageId}"]`);
+          return {
+            actionCount: document.querySelectorAll("#pageactions .duplicatepage").length,
+            isNestedInPageThumb: Boolean(action && action.closest(".pagethumb")),
+            label: action && action.getAttribute("aria-label"),
+          };
+        }, sourceState.pageId);
+        expect(pageActionState).toEqual({
+          actionCount: sourceState.pageCount,
+          isNestedInPageThumb: false,
+          label: "Duplicate page 1",
+        });
+
+        await activateDuplicatePageAction(page, sourceState.pageId);
+
+        await page.waitForFunction(
+          (beforeCount, sourcePageId) => window.ScratchJr.stage.pages.length === beforeCount + 1
+            && !window.ScratchJr.stage.duplicatingPage
+            && window.ScratchJr.stage.currentPage.id !== sourcePageId,
+          { timeout: 30_000 },
+          sourceState.pageCount,
+          sourceState.pageId
+        );
+
+        const duplicatedState = await page.evaluate((sourcePageId) => {
+          const sourceIndex = window.ScratchJr.stage.pages.findIndex((stagePage) => stagePage.id === sourcePageId);
+          const duplicatePage = window.ScratchJr.stage.pages[sourceIndex + 1];
+          return {
+            duplicatePageId: duplicatePage ? duplicatePage.id : null,
+            duplicatePageData: duplicatePage ? duplicatePage.encodePage() : null,
+            pageIds: window.ScratchJr.stage.getPagesID(),
+          };
+        }, sourceState.pageId);
+
+        expect(duplicatedState.duplicatePageId).not.toBe(sourceState.pageId);
+        expect(duplicatedState.duplicatePageData.md5).toBe(BACKGROUND_MD5);
+        expect(pageHasBlock(duplicatedState.duplicatePageData, SCRIPT_BLOCK_TYPE)).toBe(true);
+        expect(duplicatedState.duplicatePageData.sprites).not.toEqual(sourceState.pageData.sprites);
+        expect(duplicatedState.pageIds).toHaveLength(sourceState.pageCount + 1);
+        expect(errors).toEqual([]);
+
+        await page.click("#id_undo");
+        await page.waitForFunction(
+          (duplicatePageId, beforeCount) => !document.getElementById(duplicatePageId)
+            && window.ScratchJr.stage.pages.length === beforeCount,
+          { timeout: 30_000 },
+          duplicatedState.duplicatePageId,
+          sourceState.pageCount
+        );
+
+        await page.click("#id_redo");
+        await page.waitForFunction(
+          (duplicatePageId, beforeCount) => document.getElementById(duplicatePageId)
+            && window.ScratchJr.stage.pages.length === beforeCount + 1,
+          { timeout: 30_000 },
+          duplicatedState.duplicatePageId,
+          sourceState.pageCount
+        );
+        const redonePageData = await page.evaluate((duplicatePageId) => {
+          return document.getElementById(duplicatePageId).owner.encodePage();
+        }, duplicatedState.duplicatePageId);
+        expect(redonePageData.md5).toBe(BACKGROUND_MD5);
+        expect(pageHasBlock(redonePageData, SCRIPT_BLOCK_TYPE)).toBe(true);
+      } finally {
+        await browser.close();
+      }
+    },
+    60_000
+  );
+
+  it(
+    "respects the four-page project limit",
+    async () => {
+      const { browser, page, errors } = await openPage("/editor.html?mode=edit");
+
+      try {
+        await waitForEditorReady(page);
+        for (let pageCount = 1; pageCount < 4; pageCount += 1) {
+          await activateDuplicatePageAction(page);
+          await waitForPageDuplication(page, pageCount);
+        }
+
+        const limitState = await page.evaluate(() => {
+          const duplicateButtons = Array.from(document.querySelectorAll("#pageactions .duplicatepage"));
+          return {
+            pageCount: window.ScratchJr.stage.pages.length,
+            buttonCount: duplicateButtons.length,
+            disabled: duplicateButtons.every((button) => button.disabled),
+            ariaDisabled: duplicateButtons.every((button) => button.getAttribute("aria-disabled") === "true"),
+            canDuplicate: window.ScratchJr.stage.canDuplicatePage(window.ScratchJr.stage.currentPage.id),
+          };
+        });
+        expect(limitState).toEqual({
+          pageCount: 4,
+          buttonCount: 4,
+          disabled: true,
+          ariaDisabled: true,
+          canDuplicate: false,
+        });
+        expect(errors).toEqual([]);
+      } finally {
+        await browser.close();
+      }
+    },
+    60_000
+  );
+
+  it(
+    "duplicates the page attached to the clicked action when another page is selected",
+    async () => {
+      const { browser, page, errors } = await openPage("/editor.html?mode=edit");
+
+      try {
+        await waitForEditorReady(page);
+        await prepareSourcePage(page);
+
+        const sourcePageId = await page.evaluate(() => window.ScratchJr.stage.currentPage.id);
+        await activateDuplicatePageAction(page, sourcePageId);
+        await waitForPageDuplication(page, 1);
+
+        const selectedPageId = await page.evaluate(() => new Promise((resolve) => {
+          const selectedPage = window.ScratchJr.stage.currentPage;
+          selectedPage.setBackground("none", () => {
+            selectedPage.updateThumb();
+            resolve(selectedPage.id);
+          });
+        }));
+
+        await activateDuplicatePageAction(page, sourcePageId);
+        await waitForPageDuplication(page, 2);
+
+        const targetedState = await page.evaluate(({ sourceId, previousSelectedId }) => {
+          const sourceIndex = window.ScratchJr.stage.pages.findIndex((stagePage) => stagePage.id === sourceId);
+          const targetedDuplicate = window.ScratchJr.stage.pages[sourceIndex + 1];
+          const previousSelectedIndex = window.ScratchJr.stage.pages.findIndex(
+            (stagePage) => stagePage.id === previousSelectedId
+          );
+          return {
+            currentPageId: window.ScratchJr.stage.currentPage.id,
+            targetedDuplicateId: targetedDuplicate.id,
+            targetedDuplicateData: targetedDuplicate.encodePage(),
+            previousSelectedIndex,
+          };
+        }, { sourceId: sourcePageId, previousSelectedId: selectedPageId });
+
+        expect(targetedState.currentPageId).toBe(targetedState.targetedDuplicateId);
+        expect(targetedState.targetedDuplicateId).not.toBe(selectedPageId);
+        expect(targetedState.targetedDuplicateData.md5).toBe(BACKGROUND_MD5);
+        expect(pageHasBlock(targetedState.targetedDuplicateData, SCRIPT_BLOCK_TYPE)).toBe(true);
+        expect(targetedState.previousSelectedIndex).toBe(2);
+        expect(errors).toEqual([]);
+      } finally {
+        await browser.close();
+      }
+    },
+    60_000
+  );
+
+  it(
+    "always shows the duplicate glyph and hides the action during long-press delete mode",
+    async () => {
+      const { browser, page, errors } = await openPage("/editor.html?mode=edit");
+
+      try {
+        await waitForEditorReady(page);
+        const pageId = await page.evaluate(() => window.ScratchJr.stage.currentPage.id);
+        await activateDuplicatePageAction(page, pageId);
+        await waitForPageDuplication(page, 1);
+        const restingState = await page.evaluate((currentPageId) => {
+          const action = document.querySelector(
+            `#pageactions .duplicatepage[data-owner="${currentPageId}"]`
+          );
+          const icon = action.querySelector(".duplicatepageicon");
+          const backSquare = window.getComputedStyle(icon, "::before");
+          const frontSquare = window.getComputedStyle(icon, "::after");
+          return {
+            actionVisibility: window.getComputedStyle(action).visibility,
+            backContent: backSquare.content,
+            frontContent: frontSquare.content,
+            backZIndex: backSquare.zIndex,
+            frontZIndex: frontSquare.zIndex,
+          };
+        }, pageId);
+
+        expect(restingState.actionVisibility).toBe("visible");
+        expect(restingState.backContent).not.toBe("none");
+        expect(restingState.frontContent).not.toBe("none");
+        expect(restingState.backZIndex).not.toBe("-1");
+        expect(restingState.frontZIndex).not.toBe("-1");
+
+        await page.evaluate((currentPageId) => new Promise((resolve) => {
+          const thumb = document.querySelector(`.pagethumb[data-owner="${currentPageId}"]`);
+          const bounds = thumb.getBoundingClientRect();
+          thumb.dispatchEvent(new PointerEvent("pointerdown", {
+            bubbles: true,
+            cancelable: true,
+            clientX: bounds.left + (bounds.width / 2),
+            clientY: bounds.top + (bounds.height / 2),
+            pointerId: 1,
+            pointerType: "mouse",
+            isPrimary: true,
+          }));
+          window.setTimeout(resolve, 600);
+        }), pageId);
+        await page.waitForFunction((currentPageId) => {
+          const thumb = document.querySelector(`.pagethumb[data-owner="${currentPageId}"]`);
+          const action = document.querySelector(
+            `#pageactions .duplicatepage[data-owner="${currentPageId}"]`
+          );
+          return thumb.classList.contains("shakeme")
+            && window.getComputedStyle(action).visibility === "hidden"
+            && window.getComputedStyle(thumb.querySelector(".deletethumb")).visibility === "visible";
+        }, { timeout: 5_000 }, pageId);
+
+        await page.evaluate(() => window.ScratchJr.clearSelection());
+        await page.waitForFunction((currentPageId) => {
+          const thumb = document.querySelector(`.pagethumb[data-owner="${currentPageId}"]`);
+          const action = document.querySelector(
+            `#pageactions .duplicatepage[data-owner="${currentPageId}"]`
+          );
+          return !thumb.classList.contains("shakeme")
+            && window.getComputedStyle(action).visibility === "visible";
+        }, { timeout: 5_000 }, pageId);
+        expect(errors).toEqual([]);
+      } finally {
+        await browser.close();
+      }
+    },
+    60_000
+  );
+});