5

我有一个基于似乎对人们有用的命令的拖放测试。react-beautiful-dnd该命令触发可以理解为拖放交互的鼠标事件。它在 Cypress GUI 中运行良好。我可以看到列表项正确拖放并且测试通过。但是，当我运行我们在 CI 中使用的 Cypress Electron 浏览器时，它不起作用。尽管赛普拉斯通过我的选择器正确地找到了可拖动元素并调用了相同的鼠标事件触发器，但没有报告任何类型的错误，但我没有看到列表项移动。

我的假设是 Cypresstrigger方法在触发 Electron 浏览器中的某些事件时存在一些问题。非常感谢任何提示或建议！

依赖项：

"cypress": "^3.1.4",
"react-beautiful-dnd": "^10.0.3",
"react": "^16.6.0"

代码：

/*
 * Drag and Drop
 *
 * Based on https://github.com/atlassian/react-beautiful-dnd/issues/162#issuecomment-448982174
 */
Cypress.Commands.add(
  'dragAndDrop',
  { prevSubject: 'optional' },
  (subject, offset = { x: 0, y: 0 }) => {
    const BUTTON_INDEX = 0;
    const SLOPPY_CLICK_THRESHOLD = 10;

    cy
      .wrap(subject)
      .first()
      .then(element => {
        const coords = element[0].getBoundingClientRect();

        // Use { force: true } to prevent Cypress from scrolling and interfering with the drag behavior.
        cy
          .wrap(element)
          .trigger('mousedown', {
            button: BUTTON_INDEX,
            clientX: coords.x,
            clientY: coords.y,
            force: true
          })
          .trigger('mousemove', {
            button: BUTTON_INDEX,
            clientX: coords.x + SLOPPY_CLICK_THRESHOLD,
            clientY: coords.y,
            force: true
          });

        cy.get('body', { force: true }).trigger('mousemove', {
          button: BUTTON_INDEX,
          clientX: coords.x + offset.x,
          clientY: coords.y + offset.y,
          force: true
        });

        cy.get('body', { force: true }).trigger('mouseup');
      });
  }
);
4

0 回答 0