Perform Drag&Drop with Cypress

Question

I've tried for some days to perform an e2e test that performs a Drag&Drop event in Selenium, and after several ways to resolve this, someone told me about Cypress, so, here I am trying to learn this new stuff.

The question is, how could I get the x position and the y position from a certain element with Cypress? In the GitHub issues someone used this function

function moveElement(element, x, y) {
        cy.get(`${element}`)
            .trigger('mousedown', { which: 1 })
            .trigger('mousemove', { clientX: x, clientY: y })
            .trigger('mouseup', { force: true })
    }

BUT, I dont think that insert the x and y coordinates directly is the best way to work, so, in Selenium I got something like

int getXCoordinate(WebElement){
    location = WebElement.getLocation();
    x = location.getX();
    return X;
}

Is there any way to code a function similar to this?

UPDATE

For those interested in this, cypress runs plain ES6 so you can just use

element.left+window.scrollX

to retrieve X coordinate and

element.top+window.scrollY

to retrieve Y coordinate.

Answer 1

I am not sure what are you exactly trying out but if your goal is to provide a general drag and drop action through Cypress, there is an npm package npm install --save-dev cypress-file-upload

And you should import it to the cypress command.js

The details are stated at https://www.npmjs.com/package/cypress-file-upload and there is also an example with drag and drop there.

An example of how I implemented is:

it("should upload a file", () => {
        cy.fixture('afile.withanextension','base64').then(file => {
            cy.get('input') // or how you find that element
                .upload({
                            file,
                            fileName: 'afile.withanextension',
                            mimeType: 'propermimetype' // e.g. image/jpg
                        },
                        {
                            uploadType:'input'
                        }
            )
        });
    })