Cypress: How to click and draw with openlayers. Possible or Not?

[tascioglu]

I asked this a lot of time on forms and chats.. But never get an answer back. So this time I'm writing it here as an issue.

I'm searching for weeks how to create some tests with openlayers. I can't find anything on the internet, but it should be possible right? So who can help me with this?

Situation:

There's created a map (sort of google maps) with angular / openlayers. What I need is to click on this map (coordinates) and draw on it (for example a polygon).

For example go to the website https://openlayers.org/en/latest/examples/draw-features.html. Select here by Geometry type for point to click on the map or polygon to draw a polygon on the map. It has to be possible to get this in my test right?

So the tests what I want to do is like:

Test 01:

1. Go to https://openlayers.org/en/latest/examples/draw-features.html
2. Choose Geometry type "point"
3. Click on map

Test 02:

1. Go to https://openlayers.org/en/latest/examples/draw-features.html
2. Choose Geometry type "polygon"
3. Draw a polygon on the map

ps: I always updated my cypress version, so got the last one now. Trying to test this on a mac and windows.

[jennifer-shehane]

Hey @tascioglu, could you provide some of the test code you already tried?

Drawing on the canvas likely requires triggering the events that the map is specifically listening for, so may take some trial and error.

[tascioglu]

hi @jennifer-shehane At this moment I don't have many code.. because after it didn't worked, I was frustated and deleted it.. :smiley:

but it's nothing else then:

1. Go to the site : cy.visit('http://openlayers.org/en/latest/examples/draw-features.html');
2. Click on map: cy.get('ol-viewport').click();

I tried different things like trigger etc.. but nothing helped..

[Renaud009]

Triggering the right OpenLayers events will actually work:

cy.visit('http://openlayers.org/en/latest/examples/draw-features.html')
cy.get('canvas')
            .trigger('pointerdown')
            .trigger('pointerup')

Note that I can provide you soon some additionnal code if you need to position the event relatively to the openlayers canvas positionning.

[Renaud009]

What you also can do is intercept ol3 global object and your map instance to capture informations, calculate things like layers features or trigger some other events

cy.window().then((window) => {
      cy.simulateOpenLayersEvent (window.ol, window.map, 'pointerdown', 50, 50)
      cy.simulateOpenLayersEvent (window.ol, window.map, 'pointerup', 50, 50)
})

My command file:

Cypress.Commands.add('simulateOpenLayersEvent', (ol, map, type, x, y, opt_shiftKey = undefined) => {
    var viewport = map.getViewport();
    let position = viewport.getBoundingClientRect();
    cy.log(`left: ${position.left}, top: ${position.top}, width: ${position.width}, height: ${position.height}`)
    cy.get('canvas').trigger(type, {
        clientX: position.left + x + (position.width / 2),
        clientY: position.top + y + (position.height / 2),
    })
})

Example code that makes me able to count how many polygons (selected regions) are loaded in a layer (won't work on draw-feature.htm tho...l)

cy.window().then((window) => {
      cy.hasOpenLayersSelectedRegion(window.ol, window.cyCurrentMap, 1) // 1 selected region attended
})

Cypress.Commands.add('hasOpenLayersSelectedRegion', (ol, map, count) => {
    console.log("Current ol3 global object: %o", ol)
    console.log("Current OLComponent.map instance: %o", map)

    let layers = map.getLayers().getArray()
    cy.wrap(layers).each ((layer)=> {
        if (layer instanceof ol.layer.Vector && layer.get('nameId') && layer.get('nameId') === LAYER_SELECTED_REGIONS_NAME) {
          cy.log('Found Vector Layer LAYER_SELECTED_REGIONS')
          cy.wrap(layer.getSource().getFeatures().length).should('eq', count)
        } 
    });
  })

[domlyons]

Just to add to this. If you want to simulate a drag event in openlayers using cypress we found that you need to specify isPrimary in the pointerdown trigger i.e

cy.get('canvas.ol-unselectable')
      .trigger('pointerdown', {
        x: 450, 
        y: 300,
        isPrimary: true,
      })
      .trigger('pointermove', { x: 380, y: 240 })
      .trigger('pointerup', { x: 380, y: 240 });

[jennifer-shehane]

Closing this issue as resolved as others have noted they have been able to draw on openlayers.

[nikonov91-dev]

Just to add to this. If you want to simulate a drag event in openlayers using cypress we found that you need to specify isPrimary in the pointerdown trigger i.e

cy.get('canvas.ol-unselectable')
      .trigger('pointerdown', {
        x: 450, 
        y: 300,
        isPrimary: true,
      })
      .trigger('pointermove', { x: 380, y: 240 })
      .trigger('pointerup', { x: 380, y: 240 });

weird but that didnt work for me, but i tried cy.get('canvas.ol-unselectable').click(100, 100) and it made a point on canvas

[bryanSME]

What you also can do is intercept ol3 global object and your map instance to capture informations, calculate things like layers features or trigger some other events

cy.window().then((window) => {
      cy.simulateOpenLayersEvent (window.ol, window.map, 'pointerdown', 50, 50)
      cy.simulateOpenLayersEvent (window.ol, window.map, 'pointerup', 50, 50)
})

My command file:

Cypress.Commands.add('simulateOpenLayersEvent', (ol, map, type, x, y, opt_shiftKey = undefined) => {
    var viewport = map.getViewport();
    let position = viewport.getBoundingClientRect();
    cy.log(`left: ${position.left}, top: ${position.top}, width: ${position.width}, height: ${position.height}`)
    cy.get('canvas').trigger(type, {
        clientX: position.left + x + (position.width / 2),
        clientY: position.top + y + (position.height / 2),
    })
})

Example code that makes me able to count how many polygons (selected regions) are loaded in a layer (won't work on draw-feature.htm tho...l)

cy.window().then((window) => {
      cy.hasOpenLayersSelectedRegion(window.ol, window.cyCurrentMap, 1) // 1 selected region attended
})

Cypress.Commands.add('hasOpenLayersSelectedRegion', (ol, map, count) => {
    console.log("Current ol3 global object: %o", ol)
    console.log("Current OLComponent.map instance: %o", map)

    let layers = map.getLayers().getArray()
    cy.wrap(layers).each ((layer)=> {
        if (layer instanceof ol.layer.Vector && layer.get('nameId') && layer.get('nameId') === LAYER_SELECTED_REGIONS_NAME) {
          cy.log('Found Vector Layer LAYER_SELECTED_REGIONS')
          cy.wrap(layer.getSource().getFeatures().length).should('eq', count)
        } 
    });
  })

window.ol and window.map do not exist. I'm on OL version 5.x.

As for the other method, listed above, I have not been able to get any of them to work.