Helper for grid-related e2e tests (#3424)

* Helper for grid-related e2e tests

* Helper

* Conflicts

cypress/support/e2e.js

@@ -18,11 +18,11 @@ import "@percy/cypress";
 
 import { commandTimings } from "cypress-timings";
 
+import { SHARED_ELEMENTS } from "../elements/shared/sharedElements";
 import { urlList } from "../fixtures/urlList";
 import cypressGrep from "../support/cypress-grep/support";
 
 commandTimings();
-
 cypressGrep();
 
 Cypress.Commands.add("clearSessionData", () => {
@@ -75,6 +75,52 @@ Cypress.Commands.add(
   },
 );
 
+Cypress.Commands.add("getGridCellInfo", (col, row) =>
+  /*
+    It seeks for react fiber node to obtain Glide grid instance.
+    Within its ref, we have getBounds API which returns an info about given cell.
+
+    Browsing over the three starts from canvas. In case of changing that selector,
+    this function must be adjusted as well.
+  */
+  cy
+    .get(SHARED_ELEMENTS.dataGridTable)
+    .should("be.visible")
+    .wait(3000)
+    .then(node => {
+      const fiberKey = Object.keys(node[0]).find(x =>
+        x.includes("__reactFiber"),
+      );
+
+      const bounds = node[0].parentNode[
+        fiberKey
+      ].pendingProps.children.props.gridRef.current.getBounds(col, row);
+
+      return {
+        ...bounds,
+        center: {
+          x: bounds.x + bounds.width / 2,
+          y: bounds.y + bounds.height / 2,
+        },
+      };
+    }),
+);
+
+Cypress.Commands.add("clickGridCell", (col, row) => {
+  cy.getGridCellInfo(col, row).then(bounds => {
+    cy.get("body").click(bounds.center.x, bounds.center.y);
+  });
+});
+
+Cypress.Commands.add("clickGridHeader", col => {
+  cy.getGridCellInfo(col, 0).then(bounds => {
+    const headerXCenter = bounds.x + bounds.width / 2;
+    const headerYCenter = bounds.y - bounds.height / 2;
+
+    cy.get("body").click(headerXCenter, headerYCenter);
+  });
+});
+
 Cypress.on(
   "uncaught:exception",
   (_err, _runnable) =>