feat : drag using pixels

[4teamwork]

feat : drag using pixels

[bierik]

So to not mix the concept of .drag with our new approach. I would suggest providing a child command that looks like this:
cy.get('.sourceitem').move({ x: 200, y: 20 }). Because the target element makes no sense in that case, right?

[bierik]

@Kamar-Meddah So you mean when grabbing an element with cy.get('.sourceitem').drag('.targetitem', { x: 200, y: 20 }) means that you drag the source element and move it 200px in x direction and 20px in y direction relative to the position of the sourceitem. Am I understanding this correctly?

[bierik]

@Kamar-Meddah @nnaidenov @tobiasbueschel I opened a PR implementing the move feature: #27
Please feel free to try out if it suits your needs. I would also appreciate feedback and comments in the PR. Thank you all.

[bierik]

Maybe closed thru #27

[bierik]

@Kamar-Meddah thank you for the improvement proposal.
According to the cypress docs it is possible to pass coordinates to the trigger method: https://docs.cypress.io/api/commands/trigger.html#Coordinates
But the coordinates are always relative to the top left corner. But in your example, you pass the position relative to the bottom left.
Do you have a concrete use case? Maybe there's an other solution.

[bierik]

@Kamar-Meddah Any update here?

[tobiasbueschel]

Thanks for raising this @Kamar-Meddah --> I'm also looking for the same functionality. The use case that I have is a calendar element and I want to test that I can drag and drop events in a canvas container.

[Kamar-Meddah]

you're welcome @tobiasbueschel and @bierik your library work greate thx but what i asked you is that instead of using words like (topLeft, top, topRight, left, center, right, bottomLeft, bottom, and bottomRight.)
we use cordinates it doesn't matter if it is relative to the top left corner

[bierik]

@Kamar-Meddah @tobiasbueschel Sorry for the late response.
What about having something like this:

cy.get('.sourceitem').drag('.targetitem', {
  x: 30,
  y: 60
});

// or
cy.get('.sourceitem').drag('.targetitem', { position: 'topLeft' });

This way we would have a similar behavior of https://docs.cypress.io/api/commands/trigger.html#Syntax.
And when providing both x, y and position an error should be thrown.

[bierik]

@Kamar-Meddah @tobiasbueschel In #11 I am discussing a similar issue. But there we want to control the position where to grab the element. To make this work with both drag and drop I would better suggest having something like:

cy.get('.sourceitem').drag('.targetitem', { drag: { x: 30, y: 60 } });

// or
cy.get('.sourceitem').drag('.targetitem', { drag: { position: 'topLeft' } });

// or
cy.get('.sourceitem').drag('.targetitem', { drop: { x: 30, y: 60 } });

// or
cy.get('.sourceitem').drag('.targetitem', { drag: { x: 30, y: 60 }, drop: { x: 30, y: 60 } });

This way we could cover both options.

[Kamar-Meddah]

@bierik think of it as translate(x,y) in css

[Kamar-Meddah]

@bierik yes that's it

[bierik]

@Kamar-Meddah What do you think about my suggestion? Would this help?

[Kamar-Meddah]

@Kamar-Meddah What do you think about my suggestion? Would this help?

yes a lot

[nnaidenov]

I will be very happy to see this functionality. We need this in our projects and for now we need to implement drag and drop with pure Cypress functions.

[lucidity-joe]

I am trying to use position as shown in the docs and it does not appear to affect the part of the element cypress is interacting with.

My code is similar to:
cy.get(element).drag(targetElement, { position: 'center' })

Running the test using cypress browser, if I highlight the steps associated with this code it shows the cursor in the 'top' position

[bierik]

@lucidity-joe According to my tests, this is working.
Example with center

Example with left

You may want to try the newest version.