Drag and drop not working through chrome debug protocol
Reported by
abraham....@gmail.com,
Jun 6 2018
|
||||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1 Safari/605.1.15
Steps to reproduce the problem:
1. Use for example chrome-remote-interface
2. Input.dispatchMouseEvent({
type: 'mousePressed', button: 'left', clickCount: 1, x: 50, y: 50
});
3. Input.dispatchMouseEvent({
type: 'mouseMoved', button: 'left', x: 600, y: 600
});
4. Input.dispatchMouseEvent({
type: 'mouseReleased', button: 'left', clickCount: 1, x: 600, y: 600
});
What is the expected behavior?
Emulate a drag and drop from starting at (50,50) and ending at (600,600)
What went wrong?
Did not generate a drag and drop.
Did this work before? N/A
Chrome version: 66.0.3359.181 Channel: n/a
OS Version: Linux ip-172-31-87-1 4.14.33-51.37.amzn1.x86_64
Flash Version:
Find a simple repro-case:
const CDP = require('chrome-remote-interface');
const html = `
<div style="position:absolute;width:100px;height:100px;background:red" id="from" draggable="true">DRAG ME</div>
<script>
function dump(event) {
const {type, clientX, clientY} = event;
if (type === 'dragover') {
event.preventDefault();
}
console.log(\`\${type} \${clientX} \${clientY}\`);
}
from.addEventListener('dragstart', dump);
document.body.addEventListener('dragover', dump);
document.body.addEventListener('drop', dump);
</script>
`;
async function test() {
try {
const client = await CDP();
const {Page, Input, Runtime} = client;
await Page.navigate({url: `data:text/html,${html}`});
Runtime.enable();
Runtime.consoleAPICalled(({args}) => {
console.log(args);
});
await Input.dispatchMouseEvent({
type: 'mousePressed', button: 'left', clickCount: 1, x: 50, y: 50
});
await Input.dispatchMouseEvent({
type: 'mouseMoved', button: 'left', x: 600, y: 600
});
await Input.dispatchMouseEvent({
type: 'mouseReleased', button: 'left', clickCount: 1, x: 600, y: 600
});
} catch (err) {
console.error(err);
}
}
test();
,
Jun 7 2018
abraham.nevado@ Thanks for the issue. Tested this issue on Windows 10 and Ubuntu 14.04 on the reported version 66.0.3359.181 and the latest Canary 69.0.3451.0 by following the below steps. 1. Added the simple repro-case code to a html file. 2. Launched Chrome and opened the html file. 3. Could observe a red square on the screen and unable to move the square while trying to drag and drop from one point to another. Attached is the screen cast for reference. Request you to check and confirm if anything is missed from our end in triaging the issue. Also request you to provide a screen cast of the steps followed which will be helpful in better understanding of the issue. Thanks..
,
Jun 7 2018
I am sorry I did not explain properly the issue. Let's start over.
Issue: Unable to simulate Drag&Drop using Chrome Debug Protocol, so using remote debugging options of chrome.
Steps to reproduce:
1. Create a file called, abr.js with the previously attached repro-case.
2. install all required dependencies: npm install chrome-remote-interface
2. Start chrome with option: --remote-debugging-port=9222
3. Execute the script: node abr.js
I would expect to get in the console the next:
[ { type: 'string', value: 'dragstart 50 50' } ]
[ { type: 'string', value: 'dragover 600 600' } ]
However we get red square moved to the current cursor position and not dragover event.
Same behavior when using canary, headless or non-headless modes.
Please find requested screen cast.
Thanks
,
Jun 7 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jun 11 2018
|
||||
►
Sign in to add a comment |
||||
Comment 1 by krajshree@chromium.org
, Jun 7 2018