I’m working on a project where I’m using Cypress for E2E testing on a web application that includes a 3D point cloud rendered with DeckGL’s PointCloud layer. The workflow involves clicking on specific points in the canvas, expecting those points to appear in a list afterwards.

Problem
Sometimes, after clicking on the canvas, no points are added to the list, even though the click action seems to be successfully performed. I implemented Cypress recursion to retry the click if the points do not appear in the list, but the issue persists. Strangly this flakyness is only happening in CI tried multiple times running it to reproduce it on local but didnt got any luck, till now its only happening in CI

Here’s a simplified version of my code:

const hoverAndClickPoint = (canvasSelector, point) => {
    cy.get(canvasSelector)
        .trigger("mousemove", { clientX: point.x, clientY: point.y, force: true })
        .wait(500) // This wait is sometimes necessary but also flagged by ESLint
        .click(point.x, point.y, { force: true });
};

cy.recurse(
    () => cy.get('.pointListContainer hds-list-item').its("length"),
    (length) => length > 0, 
    {
        log: true,
        timeout: 15000,
        delay: 1000,
    }
);

I have already raise a discussion cypress-recurse repo #326. Please check this for more info.

I tried using cypress-recurse plugin to click on points recursively. However, I feel still I am missing something. I want whatever point click is happening that behviour same should be there in CI. Quite interested in solving this.