使用 Cypress 执行拖放操作

Question

我已经尝试了几天来执行在 Selenium 中执行拖放事件的 e2e 测试，在通过几种方法解决这个问题之后，有人告诉我有关 Cypress 的信息，所以，我在这里尝试学习这个新东西.

问题是，如何使用Cypress从某个元素获取x位置和y位置？在 GitHub 问题中有人使用了此功能

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

但是，我不认为直接插入 x 和 y 坐标是最好的工作方式，所以，在 Selenium 中我得到了类似

的东西

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

有什么方法可以编写类似于此的函数吗？

更新

对于那些对此感兴趣的人，cypress 运行纯 ES6，因此您可以使用

element.left+window.scrollX

检索 X 坐标和

element.top+window.scrollY

检索 Y 坐标。

Answer 1

我不确定你到底在尝试什么，但如果你的目标是通过 Cypress 提供一般的拖放操作，那么有一个 npm 包 npm install --save-dev cypress-file-upload

并且您应该将其导入 cypress command.js

详细信息在 https://www.npmjs.com/package/cypress-file-upload 中说明，那里还有一个拖放示例。

我如何实施的一个例子是：

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

使用 Cypress 执行拖放操作

Perform Drag&Drop with Cypress

testing

automation

cypress