diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js index bc3c5a394..1681c7452 100644 --- a/cypress/support/e2e.js +++ b/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) =>