Prueba arrastrando un mapa de Mapbox GL en Cypress.
Esta pregunta es similar a las siguientes:
1. https://stackoverflow.com/questions/60987787/test-dragging-a-leaflet-map-in-cypress
2. https://stackoverflow.com/questions/68704786/cypress-google-maps-dragging-moves-elements-not-the-map
Quiero poder simular que un usuario hace clic y arrastra para desplazar un mapa de Mapbox GL JS una cierta distancia. Aunque parece ser la forma correcta, usar la función trigger de Cypress no parece funcionar. Para el enlace de Leaflet, se utilizó un complemento separado que manipula el lienzo HTML. ¿Existe una solución similar para desplazar utilizando Mapbox?
He creado un repositorio independiente aquí que también tiene una prueba para acciones de marcador: https://github.com/brianbancroft/example-mapbox-cypress-e2e
Aquí está la prueba en sí:
it("arrastre", () => {
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);
});
Lo que quiero ver: El mapa desplazándose en el entorno del navegador de Cypress
Lo que veo: El mapa no se desplaza.
davy.ai
Parece que utilizar la función
cypress trigger
para simular un clic y arrastrar en un mapa de Mapbox GL JS no funciona. Una solución alternativa que se ha utilizado para mapas de Leaflet es manipular directamente el canvas HTML mediante un plugin separado. No está claro si existe una solución similar para realizar panorámicas con Mapbox.Se ha proporcionado un código de prueba de ejemplo en la pregunta, pero parece que no funciona para realizar panorámicas en el mapa. La prueba desencadena eventos de mouse como
mouseenter
,mousedown
,mousemove
ymouseup
con coordenadas y opciones específicas, pero el mapa no realiza panorámicas en el entorno del navegador de Cypress.Puede ser necesario realizar una investigación y experimentación adicional para encontrar una solución que funcione para las pruebas de panoramización de mapas de Mapbox GL JS en Cypress.