如何使用 CodeceptJs 实现拖放拖动以重新排序

如何解决如何使用 CodeceptJs 实现拖放拖动以重新排序

我有这个要求在两张卡之间实现拖放，以便它们交换位置，更具体地说是“拖放重新排序”。考虑到当我将新物品放入容器时容器不会是空的，不知道如何解决这种情况？我看到了 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

解决方法

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

看起来可能是因为我们的元素有圆角，没有到达 0,0 位置，所以我们需要尝试获得元素的中间位置。 >

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

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,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,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,{ type: 'pointerDown',button: 0 },{ type: 'pause',duration: 500 },{
        type: 'pointerMove',duration: 1000,origin: 'pointer',x: xMoveTo,y: yMoveTo,{ type: 'pointerUp',],};
}

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

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

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

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