Cypress: clicking on an openlayers canvas doesn't trigger any events

[BasieP]

Hi,

When i have a test like this:

it('should draw little circle on a map', function () {
    cy.visit('http://openlayers.org/en/latest/examples/draw-features.html');
    cy.get('canvas').click();
    cy.get('canvas').click(100, 100);
});

it doesn't trigger any events (the openlayers example should draw dots on the map)
Perhaps this is because the mousemove and mouseover events are not triggered... i don't know the inner workings of openlayers on this... (although i do know they do stuff a little different)

the problem we now have i can't test any geo applications based on openlayers (which are most of them)

[brian-mann]

The simplest thing for you to do here is simply fire the underlying events you want / care about

cy.get('canvas').trigger('someEvent', props)

You'll have to understand what the canvas is wired up to. You can use the dev tools to see which DOM event listeners its bound to.

[hansagames]

Any news here? As I want to test my canvas based app and I need to trigger clicks on it bit right now, no clicks are registered on canvas

[BasieP]

Canvas is not a problem but Openlayers is..
Workaround is to use .trigger() mousedown and mouseup manually.

On 20 Feb 2018 4:10 pm, "Uldis Baurovskis" [e-mail] wrote:

Any news here? As I want to test my canvas based app and I need to trigger
clicks on it bit right now, no clicks are registered on canvas

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/cypress-io/cypress/issues/1016#issuecomment-367007649,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ab6pPY8KmnIT_nS26BhurIS22PTb7c_Vks5tWuBLgaJpZM4Q35n7
.

[Renaud009]

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

[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)
        } 
    });
  })

[tascioglu]

Hi @Renaud009 . This (cy.get('canvas').trigger('pointerdown').trigger('pointerup')) worked for me fine. Thanx for sharing this.. Now I can draw on maps with openlayer. One more question with it. I need to draw/trigger an extent on the map with ctrl-key. I tried something like below, but that isn't correctly I figured out.. :)

     cy.get('canvas')
        .trigger('{ctrl}mousedown', 250, 250)
        .trigger('{ctrl}mousemove', 500, 500)
        .trigger('{ctrl}mouseup', 500, 500)

Can you help me with this one?

[tascioglu]

@Renaud009 any ideas..?

[Bkucera]

Currently we do not fire pointerdown or pointerup events during cy.click(), this will be fixed with #2956

[cypress-bot[bot]]

The code for this is done in cypress-io/cypress#3030, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot[bot]]

Released in 3.5.0.