javascript - Cypress - 拖放在基于 react 的网站上不起作用

Question

我正在为 Cypress 在基于 react 的网站上进行任何拖放操作而苦苦挣扎。 Cypress 仪表板中的操作不会失败，但项目根本不会被拖动。
我所拥有的是一组 div，它们是“在菜单中”的页面列表(因此它们对用户可见)，以及另一组“不在菜单中”的 div(因此它们对用户不可见)。我想要做的是将“不在菜单中”页面移动到“在菜单中”部分。
这些是网站中的元素:
“可拖动”项目:

<div data-testid='pages-section-not-in-menu-list' data-rbd-droppable-id="notInMenu" data-rbd-droppable-context-id="0" class="draggable-place">
    <div class="page1">Page1</div>
    <div class="page2">Page2</div>
    <div class="page3">Page3</div>
</div>

“可放置”区域:

<div data-testid='pages-section-in-menu-list' data-rbd-droppable-id="inMenu" data-rbd-droppable-context-id="0" class="droppable-place">
</div>

我的代码:

public dragAndDropPagesToInMenu(): void {

        const dataTransfer = new DataTransfer();
        cy.wait(3000);
        cy.log("Dragging one page to `In Menu` section");
        cy.get("div[class='page3']")
            .first()
            .trigger('dragstart', { dataTransfer });
        cy.get("div[data-testid='pages-section-in-menu-list']")
            .eq(0)
            .trigger('drop', { dataTransfer });
        cy.get("div[class='page3']")
            .last()
            .trigger('dragend');

    }

我也尝试了以下解决方案，但到目前为止都没有奏效:

How to implement drag and drop in cypress test?

https://applitools.com/event/drag-and-drop-in-cypress/

https://docs.cypress.io/api/commands/trigger#Arguments

有任何想法吗？

Answer 1

我有同样的问题，我找到了这个解决方案。希望这对你有用:

将以下代码添加到您的 cypress/support/commands.js文件

Cypress.Commands.add('dragAndDrop', (subject, target) => {
    Cypress.log({
        name: 'DRAGNDROP',
        message: `Dragging element ${subject} to ${target}`,
        consoleProps: () => {
            return {
                subject: subject,
                target: target
            };
        }
    });
    const BUTTON_INDEX = 0;
    const SLOPPY_CLICK_THRESHOLD = 10;
    cy.get(target)
        .first()
        .then($target => {
            let coordsDrop = $target[0].getBoundingClientRect();
            cy.get(subject)
                .first()
                .then(subject => {
                    const coordsDrag = subject[0].getBoundingClientRect();
                    cy.wrap(subject)
                        .trigger('mousedown', {
                            button: BUTTON_INDEX,
                            clientX: coordsDrag.x,
                            clientY: coordsDrag.y,
                            force: true
                        })
                        .trigger('mousemove', {
                            button: BUTTON_INDEX,
                            clientX: coordsDrag.x + SLOPPY_CLICK_THRESHOLD,
                            clientY: coordsDrag.y,
                            force: true
                        });
                    cy.get('body')
                        .trigger('mousemove', {
                            button: BUTTON_INDEX,
                            clientX: coordsDrop.x,
                            clientY: coordsDrop.y,
                            force: true            
                        })
                        .trigger('mouseup');
                });
        });
});

那么你可以在你的测试中做这样的事情

describe('example to drag & drop in react web app', () => {
 it('drag & drop', () => {
   cy.visit(
     'https://react-beautiful-dnd.netlify.app/iframe.html?id=single-vertical-list--basic'
   )
   cy.get('[data-rbd-draggable-id="1"]').dragAndDrop(
     '[data-rbd-draggable-id="1"]',
     '[data-rbd-draggable-id="4"]'
   )
 })
})