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