Geo-Express: Whirlwind Guide to Mapping Geometries with Cypress and cypress-real-events plugin

Creating Geometries with Ease (Points, Polylines, and Polygons) on a Sample Map using Cypress and the cypress-real-events Plugin

(Cover image from pexels.com by Gotta Be Worth It)

---

ACT 1: EXPOSITION

Welcome to the first article of the new series "Cupressus Turbatus: Cypress Whirlwind" 🌪️, a series where we will dive swiftly and impactfully —like a tornado— into implementing certain types of tests that may assist you in your daily job, as well as some that might be out of the ordinary.

In this first article, we will explore how to easily create geometries (points, polylines, and polygons) on a map using Cypress, with the very powerful cypress-real-events plugin.

Why did I decide to start the series with a subject like this? Well, there are two reasons: first, the other day, there was a question in the Cypress Discord about how to draw a polygon on a map, and I thought it was an interesting one; second, I love maps and have worked with maps and maps APIs for over 20 years. 🙂🗺️

Today, we'll utilize the map provided by Geojson.io, an online tool for creating GeoJSON objects, powered by Mapbox—one of the best map technologies out there! It's sleek, user-friendly, and superb for spatial data visualization. Alongside, we'll leverage the Cypress plugin cypress-real-events by Dmitriy Kovalenko, which triggers authentic browser events, giving it an advantage over simulated events from cy.trigger() command.

---

ACT 2: CONFRONTATION

The map page that we will visit is https://geojson.io/#map=9.45/45.487/-122.6908, centered in Portland, OR:

Begin your journey by installing cypress-real-events:

npm install cypress-real-events
yarn add cypress-real-events

Configure Cypress by importing the plugin in your cypress/support/e2e.js:

import "cypress-real-events";

And here is a self-explanatory Cypress code snippet for drawing points, polylines, and polygons using the UI edit tool provided in the Geojson.io map:

/// <reference types="cypress" />

describe('Map Suite', () => {

    beforeEach(() => {
        // Visit map page (centered in Portland, OR)
        cy.visit('https://geojson.io/#map=9.45/45.487/-122.6908')

        // Give the map some time to load (not recommended the use of
        // cy.wait(TIME), replace with a better approach depending on the case)
        cy.wait(2500)

        // Alias for map to reuse in all the tests
        cy.get('canvas.mapboxgl-canvas').as('map')
    })

    /**
     * NOTE: The map drawing tools expect clicks on the canvas in pixel coordinates,
     *       like a real user would do.
     */

    it('Draw Geometries', () => {
        // DRAW POINT
        // Enable tool to draw a point
        cy.get('button[title="Draw Point (m)"]').click()
        // Draw point
        cy.get('@map').realClick({ x: 150, y: 300 })


        // DRAW POLYLINE
        // Enable tool to draw a polyline 
        cy.get('button[title="Draw LineString (l)"]').click()
        // Draw polyline (500ms between clicks to see the interaction)
        cy.get('@map').realClick({ x: 350, y: 200 })
        cy.wait(500)
        cy.get('@map').realClick({ x: 500, y: 350 })
        cy.wait(500)
        cy.get('@map').realClick({ x: 350, y: 500 })


        // DRAW POLYGON
        // Enable tool to draw a polygon
        cy.get('button[title="Draw Polygon (p)"]').click()
        // Draw polygon (500ms between clicks to see the interaction)
        cy.get('@map').realClick({ x: 650, y: 200 })
        cy.wait(500)
        cy.get('@map').realClick({ x: 650, y: 500 })
        cy.wait(500)
        cy.get('@map').realClick({ x: 800, y: 500 })
        cy.wait(500)
        cy.get('@map').realClick({ x: 800, y: 200 })
        cy.wait(500)
        cy.get('@map').realClick({ x: 650, y: 200 })
    });
});

And here are the results for the test snippet:

---

ACT3: RESOLUTION

And there you have it—your map is a masterpiece, and your geometries are a triumph! Embrace the quirks and twists of real events over simulations.

Tune into the next "Cypress Whirlwinds" for more bite-sized cool testing adventures!

---

I'd love to hear from you! Please don't forget to follow me, leave a comment, or a reaction if you found this article useful or insightful. ❤️ 🦄 🤯 🙌 🔥

You can also connect with me on my new YouTube channel: https://www.youtube.com/@SebastianClavijoSuero

If you'd like to support my work, consider buying me a coffee or contributing to a training session, so I can keep learning and sharing cool stuff with all of you.
Thank you for your support!