Cypress with OpenLayers - how to simulate ctrl + mouse drag

Question

I'm trying to simulate ctrl + mouse drag on an OpenLayers map with Cypress.

The only way I've managed to get OpenLayers to register click/Cypress events (for example, clicking to create a feature) is with .click() e.g.

cy.get('#map').click(845, 710);

If I use .trigger() and pointerdown/mousedown/dragstart it either fails silently or throws an error. Either way, it doesn't work.

Because .click() also emits pointerdown/pointerup events I can't seem to use this to simulate a ctrl + mouse drag.

Additionally, to press ctrl, I use the following: cy.get('body').type('{ctrl}', {release: false}) - this works.

I'm at a loss for what to try next. Is there a property of .click() I'm missing? or is this a potential bug/issue with either OpenLayers or Cypress?

Edit: I'm using Cypress 4.8.0 and OpenLayers 6.3.1

Any snippet you can share we can work on? – Alexandre Elshobokshy Jun 21 '20 at 07:20 — Alexandre Elshobokshy, Jun 21 '20 at 07:20
Hi! Did my answer help you figure out the issue? – Owen Versteeg Jun 22 '20 at 14:35 — Owen Versteeg, Jun 22 '20 at 14:35

score 0 · Answer 1 · answered Jun 18 '20 at 19:09

You have two possibilities: one, this is a bug in Cypress, or two, you're handling events wrong.

The fundamental way that Cypress works is by running events through the in-browser APIs, not simulating actual keyboard or mouse actions (source from a Cypress employee) so you can only simulate individual events that the browser listens for. So I took a look at the way Cypress does it and found that people have had problems with it in the past. You can try the snippet at the end of the Github discussion in that link, I'm not sure if that might make it work.

In this case, you're simulating a Click event with Event.ctrlKey set to true. (Or at least: that's what you want to happen.) To debug this further, I would log the event itself, and check if the event.ctrlKey is set:

If it is false - there you go, it's a bug in Cypress.
If it is true, then Cypress is working fine, you're just listening to the ctrl/click events in unusual ways, and if you switch to something like this you'll be good.

Good luck, and let me know how it goes!

score 0 · Answer 2 · answered Jun 22 '20 at 16:08

If you have a proper DnD source & target elements setup, then trigger will work:

describe('DnD simulation test', () => {
  it('finds the content "type"', () => {
    cy.visit('https://zikro.gr/dbg/so/62303304/dnd-with-cypress.html');

    // #dz-a -> Dropzone A, which the #drag is inside when page loads
    // #dz-b -> Dropzone B, which the #drag element will be inside after DnD simulation

    cy.get('#drag').trigger('dragstart', { ctrlKey: true });
    cy.get('#dz-b').trigger('drop', { ctrlKey: true });
    cy.get('#drag').trigger('dragend', { ctrlKey: true });

    // We just test if the destination element has 1 child after the DnD simulation.
    // When the page loads it has no children at all, but after DnD simlation it has exactly 1 element
    cy.get('#dz-b').children().should('have.length', 1);
  });
});

The page in the URL https://zikro.gr/dbg/so/62303304/dnd-with-cypress.html is up and it has a DnD functionality that you can use the above code and test and check the console for the logs that will also detect Ctrl key. It tests if the drop destination target has a child element after the event simulation. Of course you can perform any other test that proves the source has dropped from A to B destinations.

Cypress with OpenLayers - how to simulate ctrl + mouse drag

2 Answers2