This question is similar to the following:

1. Test dragging a Leaflet map in Cypress
2. Cypress & Google Maps dragging moves elements, not the map

I want to be able to simulate a user clicking and dragging to pan a Mapbox GL JS map a certain distance. While it seems like the proper way, using the cypress trigger function doesn't appear to work. For the Leaflet link, a separate plugin that manipulates html canvas was used. Is there a similar workaround for panning using Mapbox?

I have created a standalone repo here that has one other test for marker actions as well: https://github.com/brianbancroft/example-mapbox-cypress-e2e

Here's the test itself:

  it("drags ", () => {
    const map = cy.get("#map");
    map.should("exist");

    const canvas = cy.get(".mapboxgl-canvas");

    map
      .trigger("mouseenter", 700, 250)
      .trigger("mousedown", 700, 250, {
        bubbles: true,
        waitForAnimations: true,
        // which: 1,
        // pageX: 700,
        // pageY: 250,
      })
      // .wait(100)
      .trigger("mousemove", {
        bubbles: true,
        waitForAnimations: true,
        pageX: 550,
        pageY: 250,
        which: 1,
      })
      .wait(100)
      .trigger("mouseup", {
        bubbles: true,
        waitForAnimations: true,
        which: 1,
        pageX: 550,
        pageY: 250,
      })
      .wait(100);

});
   

What I want to see: The map panning in the cypress browser environment What I see: The map not panning