Reactjs 如何模拟木偶戏中的拖放动作?
我在应用程序中使用了React DnD(拖放)。我想测试一下E2E 我想要模拟的是拖动一个特定的元素并将其放到一个特定的位置。我该怎么做 我得到的是:Reactjs 如何模拟木偶戏中的拖放动作?,reactjs,testing,e2e-testing,puppeteer,Reactjs,Testing,E2e Testing,Puppeteer,我在应用程序中使用了React DnD(拖放)。我想测试一下E2E 我想要模拟的是拖动一个特定的元素并将其放到一个特定的位置。我该怎么做 我得到的是: //test.js const mouse = page.mouse; await mouse.down(); await mouse.move(126, 19); await page.waitFor(400); 使用此代码,选择完成,但拖动不起作用。我应该如何实现这一点?以下方法将允许您在Puppeter中模拟拖放动作: const exa
//test.js
const mouse = page.mouse;
await mouse.down();
await mouse.move(126, 19);
await page.waitFor(400);
使用此代码,选择完成,但拖动不起作用。我应该如何实现这一点?以下方法将允许您在Puppeter中模拟拖放动作:
const example = await page.$('#example');
const bounding_box = await example.boundingBox();
await page.mouse.move(bounding_box.x + bounding_box.width / 2, bounding_box.y + bounding_box.height / 2);
await page.mouse.down();
await page.mouse.move(126, 19);
await page.mouse.up();
以下是我在《木偶演员》中用于拖放的片段:
//This assumes only one element will be found for selectors you provide, otherwise there's ambiguity on which element was selected.
//In my code I'm throwing on more than 1 element found
async dragAndDrop(page, originSelector, destinationSelector) {
await page.waitForSelector(originSelector)
await page.waitForSelector(destinationSelector)
const origin = await page.$(originSelector)
const destination = await page.$(destinationSelector)
const ob = await origin.boundingBox()
const db = await destination.boundingBox()
console.log(`Dragging from ${ob.x + ob.width / 2}, ${ob.y + ob.height / 2}`)
await page.mouse.move(ob.x + ob.width / 2, ob.y + ob.height / 2)
await page.mouse.down()
console.log(`Dropping at ${db.x + db.width / 2}, ${db.y + db.height / 2}`)
await page.mouse.move(db.x + db.width / 2, db.y + db.height / 2)
await page.mouse.up()
}
请注意,仍然实现了对Puppeter中拖放的支持。没有一个特定于Puppeter的解决方案适合我,因此我最终将本机javascript写入一个文件,并将其导入Puppeter(在我的例子中是Jest) 拖放.js
async function dragAndDrop(source, target) {
await page.evaluate((source, target) => {
source = document.querySelector('#'+source);
event = document.createEvent("CustomEvent");
event.initCustomEvent("mousedown", true, true, null);
event.clientX = source.getBoundingClientRect().top;
event.clientY = source.getBoundingClientRect().left;
source.dispatchEvent(event);
event = document.createEvent("CustomEvent");
event.initCustomEvent("dragstart", true, true, null);
event.clientX = source.getBoundingClientRect().top;
event.clientY = source.getBoundingClientRect().left;
source.dispatchEvent(event);
event = document.createEvent("CustomEvent");
event.initCustomEvent("drag", true, true, null);
event.clientX = source.getBoundingClientRect().top;
event.clientY = source.getBoundingClientRect().left;
source.dispatchEvent(event);
target = document.querySelector('#'+target);
event = document.createEvent("CustomEvent");
event.initCustomEvent("dragover", true, true, null);
event.clientX = target.getBoundingClientRect().top;
event.clientY = target.getBoundingClientRect().left;
target.dispatchEvent(event);
event = document.createEvent("CustomEvent");
event.initCustomEvent("drop", true, true, null);
event.clientX = target.getBoundingClientRect().top;
event.clientY = target.getBoundingClientRect().left;
target.dispatchEvent(event);
event = document.createEvent("CustomEvent");
event.initCustomEvent("dragend", true, true, null);
event.clientX = target.getBoundingClientRect().top;
event.clientY = target.getBoundingClientRect().left;
target.dispatchEvent(event);
}, source, target);
}
const dragAndDrop = require('./drag-and-drop')
describe('when dragging and dropping todo', () => {
it('should change order on DOM', async () => {
const firstTodo = await page.evaluate(() => document.querySelectorAll('.input-container .input')[0].id);
const secondTodo = await page.evaluate(() => document.querySelectorAll('.input-container .input')[1].id);
dragAndDrop(firstTodo, secondTodo);
const newFirstTodo = await page.evaluate(() => document.querySelectorAll('.input-container .input')[0].id);
const newSecondTodo = await page.evaluate(() => document.querySelectorAll('.input-container .input')[1].id);
expect(newFirstTodo).toEqual(secondTodo)
expect(newSecondTodo).toEqual(firstTodo)
});
});
test.js
async function dragAndDrop(source, target) {
await page.evaluate((source, target) => {
source = document.querySelector('#'+source);
event = document.createEvent("CustomEvent");
event.initCustomEvent("mousedown", true, true, null);
event.clientX = source.getBoundingClientRect().top;
event.clientY = source.getBoundingClientRect().left;
source.dispatchEvent(event);
event = document.createEvent("CustomEvent");
event.initCustomEvent("dragstart", true, true, null);
event.clientX = source.getBoundingClientRect().top;
event.clientY = source.getBoundingClientRect().left;
source.dispatchEvent(event);
event = document.createEvent("CustomEvent");
event.initCustomEvent("drag", true, true, null);
event.clientX = source.getBoundingClientRect().top;
event.clientY = source.getBoundingClientRect().left;
source.dispatchEvent(event);
target = document.querySelector('#'+target);
event = document.createEvent("CustomEvent");
event.initCustomEvent("dragover", true, true, null);
event.clientX = target.getBoundingClientRect().top;
event.clientY = target.getBoundingClientRect().left;
target.dispatchEvent(event);
event = document.createEvent("CustomEvent");
event.initCustomEvent("drop", true, true, null);
event.clientX = target.getBoundingClientRect().top;
event.clientY = target.getBoundingClientRect().left;
target.dispatchEvent(event);
event = document.createEvent("CustomEvent");
event.initCustomEvent("dragend", true, true, null);
event.clientX = target.getBoundingClientRect().top;
event.clientY = target.getBoundingClientRect().left;
target.dispatchEvent(event);
}, source, target);
}
const dragAndDrop = require('./drag-and-drop')
describe('when dragging and dropping todo', () => {
it('should change order on DOM', async () => {
const firstTodo = await page.evaluate(() => document.querySelectorAll('.input-container .input')[0].id);
const secondTodo = await page.evaluate(() => document.querySelectorAll('.input-container .input')[1].id);
dragAndDrop(firstTodo, secondTodo);
const newFirstTodo = await page.evaluate(() => document.querySelectorAll('.input-container .input')[0].id);
const newSecondTodo = await page.evaluate(() => document.querySelectorAll('.input-container .input')[1].id);
expect(newFirstTodo).toEqual(secondTodo)
expect(newSecondTodo).toEqual(firstTodo)
});
});
比内置的木偶演员功能稍微多一些,但希望这是一个足够简单的复制和粘贴解决方案,适用于需要更多拖放控制的任何其他人。您是否正在寻找类似的解决方案,但它不适用于我。您尝试过吗?是的。但这也没有解决我的问题issue@Khushi有什么最新消息吗?你解决了这个问题吗?clientX和clientY被替换为getBoundingClientRect()。顶部和左侧,但一旦我解决了这个问题,这对我很有效,谢谢!!