fix two failing e2e tests (#4380)

* fix multi pcd e2e

* fix media visibility toggler e2e

app/packages/looker-3d/src/fo3d/Leva.tsx

@@ -69,9 +69,14 @@ function Leva() {
 
     const levaContainer =
       levaParentContainer.firstElementChild as HTMLDivElement;
+
+    levaContainer.setAttribute("data-cy", "leva-container");
+
     const levaContainerHeader =
       levaContainer.firstElementChild as HTMLDivElement;
 
+    levaContainerHeader.setAttribute("data-cy", "leva-container-header");
+
     levaContainerHeader.addEventListener("mousedown", mouseDownEventHandler);
     levaContainerHeader.addEventListener("mouseup", mouseUpEventHandler);
     levaContainerHeader.addEventListener("mousemove", mouseMoveEventHandler);

e2e-pw/src/oss/poms/fo3d/assets-panel/index.ts

@@ -0,0 +1,36 @@
+import { Locator, Page } from "src/oss/fixtures";
+
+export class Asset3dPanelPom {
+  readonly locator: Locator;
+  readonly headerLocator: Locator;
+
+  constructor(private readonly page: Page) {
+    this.locator = this.page.getByTestId("leva-container");
+    this.headerLocator = this.page.getByTestId("leva-container-header");
+  }
+
+  async dragToToLeftCorner() {
+    await this.headerLocator.waitFor({ state: "visible" });
+
+    const levaContainerBox = await this.locator.boundingBox();
+
+    if (!levaContainerBox) {
+      throw new Error("Unable to find bounding box on leva container");
+    }
+
+    const dragXOffset = -this.page.viewportSize().width / 2;
+    const dragYOffset = -10;
+
+    const levaCenterX = levaContainerBox.x + levaContainerBox.width / 2;
+    const levaCenterY = levaContainerBox.y + levaContainerBox.height / 2;
+
+    await this.headerLocator.hover();
+
+    await this.page.mouse.down();
+    await this.page.mouse.move(
+      levaCenterX + dragXOffset,
+      levaCenterY + dragYOffset
+    );
+    await this.page.mouse.up();
+  }
+}

e2e-pw/src/oss/specs/groups/modal-multi-pcd.spec.ts

@@ -14,18 +14,33 @@ const test = base.extend<{ grid: GridPom; modal: ModalPom }>({
 
 const datasetName = getUniqueDatasetNameWithPrefix(`modal-multi-pcd`);
 
-test.beforeAll(async ({ fiftyoneLoader }) => {
+const pcd1Path = `/tmp/test-pcd1-${datasetName}.pcd`;
+const pcd2Path = `/tmp/test-pcd2-${datasetName}.pcd`;
+
+test.beforeAll(async ({ fiftyoneLoader, mediaFactory }) => {
+  mediaFactory.createPcd({
+    outputPath: pcd1Path,
+    shape: "cube",
+    numPoints: 100,
+  });
+
+  mediaFactory.createPcd({
+    outputPath: pcd2Path,
+    shape: "diagonal",
+    numPoints: 5,
+  });
+
   await fiftyoneLoader.executePythonCode(`
-    import fiftyone.zoo as foz
+    import fiftyone as fo
 
-    dataset = foz.load_zoo_dataset(
-        "quickstart-groups", dataset_name="${datasetName}", max_samples=3
-    )
+    dataset = fo.Dataset("${datasetName}")
     dataset.persistent = True
-    dataset.group_slice = "pcd"
-    extra = dataset.first().copy()
-    extra.group.name = "extra"
-    dataset.add_sample(extra)`);
+
+    group = fo.Group()
+    sample1 = fo.Sample(filepath="${pcd1Path}", group=group.element("pcd1"))
+    sample2 = fo.Sample(filepath="${pcd2Path}", group=group.element("pcd2"))
+  
+    dataset.add_samples([sample1, sample2])`);
 });
 
 test.beforeEach(async ({ page, fiftyoneLoader }) => {
@@ -35,20 +50,22 @@ test.beforeEach(async ({ page, fiftyoneLoader }) => {
 test.describe("multi-pcd", () => {
   test("multi-pcd slice in modal", async ({ grid, modal }) => {
     await grid.openFirstSample();
-    await modal.group.toggleMedia("carousel");
-    await modal.group.toggleMedia("viewer");
+
     await modal.clickOnLooker3d();
 
-    await modal.toggleLooker3dSlice("extra");
+    await modal.toggleLooker3dSlice("pcd2");
 
-    await modal.sidebar.assert.verifySidebarEntryText("pcd-group.name", "pcd");
     await modal.sidebar.assert.verifySidebarEntryText(
-      "extra-group.name",
-      "extra"
+      "pcd1-group.name",
+      "pcd1"
+    );
+    await modal.sidebar.assert.verifySidebarEntryText(
+      "pcd2-group.name",
+      "pcd2"
     );
 
-    await modal.toggleLooker3dSlice("pcd");
+    await modal.toggleLooker3dSlice("pcd1");
 
-    await modal.sidebar.assert.verifySidebarEntryText("group.name", "extra");
+    await modal.sidebar.assert.verifySidebarEntryText("group.name", "pcd2");
   });
 });

e2e-pw/src/oss/specs/smoke-tests/quickstart-groups.spec.ts

@@ -1,4 +1,5 @@
 import { test as base, expect } from "src/oss/fixtures";
+import { Asset3dPanelPom } from "src/oss/poms/fo3d/assets-panel";
 import { GridPom } from "src/oss/poms/grid";
 import { ModalPom } from "src/oss/poms/modal";
 import { SidebarPom } from "src/oss/poms/sidebar";
@@ -13,6 +14,7 @@ const test = base.extend<{
   grid: GridPom;
   modal: ModalPom;
   sidebar: SidebarPom;
+  asset3dPanel: Asset3dPanelPom;
 }>({
   grid: async ({ page, eventUtils }, use) => {
     await use(new GridPom(page, eventUtils));
@@ -23,6 +25,9 @@ const test = base.extend<{
   sidebar: async ({ page }, use) => {
     await use(new SidebarPom(page));
   },
+  asset3dPanel: async ({ page }, use) => {
+    await use(new Asset3dPanelPom(page));
+  },
 });
 
 test.describe("quickstart-groups", () => {
@@ -89,9 +94,16 @@ test.describe("quickstart-groups", () => {
       );
     });
 
-    test("group media visibility toggle works", async ({ modal }) => {
+    test("group media visibility toggle works", async ({
+      modal,
+      asset3dPanel,
+    }) => {
+      // need to drag the asset3d panel to the left corner to make sure it doesn't overlap with the popout
+      await asset3dPanel.dragToToLeftCorner();
+
       // make sure popout is right aligned to the toggle button
       await modal.group.toggleMediaButton.click();
+
       const popoutBoundingBox =
         await modal.group.groupMediaVisibilityPopout.boundingBox();
       const toggleButtonBoundingBox =