如何使用 CodeceptJs 实现拖放（拖放重新排序）答案

【问题标题】：How to implement drag and drop (drag to reorder) with CodeceptJs如何使用 CodeceptJs 实现拖放（拖放重新排序）
【发布时间】：2021-09-13 13:48:46
【问题描述】：

我有这个要求在两张卡片之间实现拖放，以便它们交换位置，更具体地说是“拖动重新排序”。考虑到当我将新项目放入容器时容器不会为空，不确定如何解决这种情况？我看到了 Selenium 和 Protractor 的示例，但找不到 CodeceptJs 的示例。

我在这里试过了

await I.dragAndDrop('//*[@id="myAssessments"]/main/div/div[7]/div[2]/div[1]/li', '//*[@id="myAssessments"]/main/div/div[7]/div[2]',);

我认为相当于

I.dragAndDrop('#dragHandle', '#container');

来自https://codecept.io/helpers/WebDriver/#draganddrop，使用 xpath 作为容器，使用 xpath 作为第一个列表项，但元素没有拖动，我收到错误 Element "{null: undefined}" was not found by text|CSS|XPath

【问题讨论】：

标签： javascript drag-and-drop webdriver codeceptjs

【解决方案1】：

我们现在开始工作了。我们需要使用自定义函数。

似乎可能是由于我们的元素有圆角，没有到达0,0位置，所以我们需要尝试找到元素的中间位置。 p>

因此，这是我们需要做的。

await I.dragDown(
  {
    css:
      '#myAssessments > main > div > * > div:nth-child(2) > div:nth-child(1)',
  },
  200,
); 

async dragDown(locator, pixels) {
  await this.dragInDirection('down', locator, pixels);
}

async dragInDirection(direction, locator, pixels) {
  const queryString = resolveLocator(locator);
  const location = await this.getElementLocation(queryString);
  const x = parseInt(location.x + location.width / 2, 10);
  const y = parseInt(location.y + location.height / 2, 10);
  await this.performBrowserActions([
    createActionSet({ x, y }, direction, pixels),
  ]);
}

function resolveLocator(locator) {
  let queryString;
  if (locator.dataTestId) {
    queryString = `[data-testid=${locator.dataTestId}]`;
  } else if (locator.test) {
    queryString = `[data-test-id=${locator.test}]`;
  } else if (locator.css) {
    queryString = locator.css;
  } else {
    queryString = locator;
  }
  return queryString;
}

function createActionSet(origin, direction, length) {
 const { x, y } = origin;

 let xMoveTo = 0;
 let yMoveTo = 0;

 switch (direction) {
    case 'up':
      yMoveTo = -length;
      break;
    case 'down':
      yMoveTo = length;
      break;
    case 'right':
      xMoveTo = length;
      break;
    case 'left':
      xMoveTo = -length;
      break;
    default:
      return new Error('Direction passed was wrong or no direction passed');
  }

return {
    type: 'pointer',
    id: 'finger1',
    parameters: { pointerType: 'touch' },
    actions: [
      { type: 'pointerMove', duration: 0, x, y },
      { type: 'pointerDown', button: 0 },
      { type: 'pause', duration: 500 },
      {
        type: 'pointerMove',
        duration: 1000,
        origin: 'pointer',
        x: xMoveTo,
        y: yMoveTo,
      },
      { type: 'pointerUp', button: 0 },
    ],
  };
}

如果不使用自定义定位器，您也许可以简化并这样做：

async dragInDirection(direction, locator, pixels) {
  const location = await this.getElementLocation(locator);
  const x = parseInt(location.x + location.width / 2, 10);
  const y = parseInt(location.y + location.height / 2, 10);
  await this.performBrowserActions([
    createActionSet({ x, y }, direction, pixels),
  ]);
}

这是带有键盘标签的版本：

await I.pressKey('Tab');
await I.pressKey('Tab'); // Tabbing to focus the card
await I.pressKey('Space'); // "Jump" item
await I.pressKey('ArrowDown'); // Move item
await I.pressKey('Space'); // Drop item

【讨论】：