Unable to Trigger Mapbox GL JS "drag" Event GL in Cypress

[brianbancroft]

I am not able to trigger a map dragging action through the Cypress API over a Mapbox GL Map. Cypress is a fantastic e2e suite, and I appreciate all the help it gives me with the non-map things. Its feedback and video playbacks are wonderful.

Before writing here, I've asked SO, as well as looked at some other examples in cypress and outside:

• dragging events with Leaflet, another mapping library
• dragging events with D3

Test Video and Code

e2e-outcome.mov

The cursor point appears at the correct location, but no actions were detected by the mapboxgl map.

describe("simple map example", () => {
  beforeEach(() => {
    cy.visit("https://cypress-mapboxgl-click-event.netlify.app/");
  });

  describe("using map canvas class", () => {
    // Works fine

    // Does not work
    it("has working pan actions", () => {
      cy.window().then((win) => {
        cy.get("canvas.mapboxgl-canvas")
          .trigger("mouseDown", {
            position: "center",
            view: win,
          })
          .trigger("mousemove", 200, 200, {
            force: true,
          })
          .trigger("mouseup", 200, 200, {
            force: true,
            view: win,
          });
        cy.get("#panCheck").contains("yes");
      });
    });
  });
});

Live site

I've created a test site here: https://cypress-mapboxgl-click-event.netlify.app/

The test site has a map that detects both "drag" and "mousemove" events over the canvas and sets the text into a span with a unique ID to "yes".

map-site-demo.mov

Repo

The repo for this site is here: https://github.com/brianbancroft/question-cypress-mapboxgl

to run the repo, just clone, install, and npx cypress open. It tests against the live site.

[Philipp-Bischoff]

Did you ever get an answer for this? I've been running into the same issue.