Question

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

我的假设是Cypress trigger方法在触发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');
      });
  }
);

拖放赛普拉斯测试仅在Electron浏览器中失败

0 个答案: