Mapbox/Canvas testing with Cypress

[anaynayak]

Hello,

I've been using cypress 6.0.1 and it has been working perfectly. I am now trying to test interactive features with Mapbox and based on existing issues/articles on the web I tried the following and it still didn't work.

Minimal example:

describe('Maps', () => {
  it('can hover on a canvas', () => {
    cy.visit('https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/')
    cy.wait(2000)
    cy.get("#demo").trigger('mousemove', { x: 320, y: 250, force: true })
  });
});

Checked against Chrome 87 as well as Electron.

Expectation:
On trigger of the event, it should highlight the border for the state. I'm planning to assert the state visually using image snapshots.

Am I missing anything ? Or does Cypress not support this ?

mapbox.spec.js.mp4

[brianbancroft]

A couple years later, I've copied and pasted your code @anaynayak into a cypress test environment running on version 9.3.1 and I'm running into the same trouble. I went a bit further and added some small motions of the mouse as well, but what I saw was similar to the video you have shared no matter how much I fiddle with Δx,Δy and Δt.

describe("cursor", () => {
  it("can hover on a canvas", () => {
    cy.visit("https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/");
    cy.wait(2000);
    cy.get("#demo").trigger("mousemove", { x: 320, y: 250, force: true });
    cy.wait(10);
    cy.get("#demo").trigger("mousemove", { x: 320, y: 245, force: true });
    cy.wait(10);
    cy.get("#demo").trigger("mousemove", { x: 320, y: 240, force: true });
    cy.wait(10);
    cy.get("#demo").trigger("mousemove", { x: 320, y: 235, force: true });
    cy.wait(10);
    cy.get("#demo").trigger("mousemove", { x: 320, y: 230, force: true });
  });
});

A possible answer

In the pursuit of another problem, I've made a test environment over at

https://cypress-mapboxgl-click-event.netlify.app/

I was able to get the following code to trigger a mouse move event detection on the map:

it("detects mouse action", () => {
      cy.get("canvas.mapboxgl-canvas").trigger("mousemove", {
        x: 320,
        y: 250,
        force: true,
      });
      cy.wait(100);
      cy.get("canvas.mapboxgl-canvas").trigger("mousemove", {
        x: 320,
        y: 245,
        force: true,
      });
 

      cy.get("#mouseMoveCheck").contains("yes");
    });

This still won't generate a hover event for the polygon, but maybe you can use this and look at a way of detecting whether the mouse has entered the polygon aside a visual cue.

[maynguyenn]

Hi @anaynayak I now face to the same problem. Do you have real answer for this thread?

[anaynayak]

Sadly no. I don't think this has been fixed.