how to drag an element up/down some px?
I am using playwright, there is a component similar to select, you can press and hold the left mouse button and drag up and down, so that the element is in the window, and the element in the window is the selected element; now I use playwright to do this, I Use page.mouse.move, page.mouse.down, page.mouse.up to simulate user operations, but it doesn't work, can someone help me?
This thread is trying to answer question "How to simulate a drag and drop operation on a select component using playwright when only the number of pixels to drag up or down is known?"
Might get your code out of an IIFE()? Also without knowing the page you're automating how sure are you you are getting the elements to drag/draw to/from correctly. Great example why blindly assuming div:nth-child(5) is correct, first guess but i'm not certain to be honest but i might put money down and bet you're not getting the elements you think.
Also why do you continue instead of throwing if your goto fails?
Also i'm not a fan, if i'm seeing what you're doing you are giving the point offsets when invoking the dragAndDrop(,.,., -5, 10); Think in your drag drop sizing the element and going for the hieight/width /2 is fine.... Put the responsibility of the dragDrop() to handle that, passing adjustmenst blindly (never got the control size as you do in the DragDrop(), might ony be asking for trouble?) And to get it going just have one mouse down, move and mouse up... Then add incremental move from fromPt to the toPt...?
Thank you for you kindly reply,I'm simulating the user's selection of a city. You can see that this is a customized select component. The user can press and hold and drag up and down to select an city,the component use rotate to show all cities, I want to simulate this process using playwright; There are two problems, The first is: I cannot drag a city in brower manual,I can only drag only in mobile mode,just (press F12(in mac,it is option+command+i) and click the mobile/web switch button),show in the pic attached ;If i use playwright, select mobile such as iphone 7 plus,can accurate simulate this? The second is: Unlike usual use of playwright's drag and drop api,it need the source element and the target element,but in my case ,I don't know the target element, I can only give a number of pixels,which I need drap up 50px,or drag down 100px, to simulate this i just drag 10 times with per time 5px(when darg up,it's nagtive -5px,when down ,it's positive 5px).
I'm curious if this ultimately there is a graphical canvas which the control is rendered on? I'm thinking that is the problem, not sure i can help, i might think ultimately it is the canvas is where the mouse events will need to go, and i'm not sure how to interact with a cavas if this is the case. If my guess is correct looks like you are using vuplex or some unity control library? Total guess on my part, but if that is right it seems this page mentions the controls you are suing don't support drag/drop out of the box. https://support.vuplex.com/articles/how-to-enable-dragging But if so seems there will still be a game between interacting from PW to the graphical portion...
Thank you for you kindly reply, fortunately the component is not in cavas, as show in the video and pic above, it just using rotate3D to show the selected one and looks like the user rotate a wheel within 360°， if i manually edit the degree in the html elment tree,the selected one will changed corresponding to the correct select option,(int playwright, i can do this just use page.evaluate,to exec some javascript to change the degree to show the wanted option), but this cannot emit the event that the component needed, so do you have any idea of doing this?
Sorry this is beyond what i might help with, it just seems the animation is graphical seeing rotate3D sure sounds like graphics to me and graphics == canvas. And you miight be representing everything in html, what is rendered is a graphics behind the scene, much like an SVG is xml, when rendered it is a graphics.... ?
The question might be can you see what the "Selected Value" is? Possibly you might need to get prehistoric and have routine that you execute javascript all the while reading what the current values is and then use scroll up/down as you specify from the routine? Don't think PW would be involved in manipulating the control at all then...
Yes,you got it,now the only thing for me is how to trigger all the events use javascript considering PW are not support this very well;There are someone here [https://github.com/microsoft/playwright/issues/1094] who try to do this,but not stable solution for me ; And also i just need supports of touch events,see here: [https://github.com/microsoft/playwright/issues/2903];
Related Ask AI answer for "How do I simulate a drag operation on a select component using Playwright when I only have the number of pixels?".
Answer
Sure, let's simulate a drag operation on a select component using Playwright. We'll use the mouse class methods provided by Playwright.
First, hover over the element you want to drag. Use the locator's hover method like this:
await page.locator('#item-to-be-dragged').hover();Next, press down the left mouse button:
await page.mouse.down();Now, move your mouse to simulate dragging. You can specify the number of pixels instead of a target element. Here's how to move 100 pixels down:
await page.mouse.move(0, 100);Finally, release your mouse button:
await page.mouse.up();This sequence simulates dragging an item downwards by 100 pixels. If your page relies on dispatching 'dragover' event, you'll need at least two mouse moves for it to trigger reliably. In such case, repeat the last two steps.
Remember, these operations are asynchronous, so make sure they're awaited or handled properly with promises. Playwright provides high level APIs for common actions like click or type into input fields, but it also provides low level APIs for more control when needed.
For more insights on Playwright, check out this blog post.
Related Discord Threads
- Each call to test incurs 5-6 second waitandarp asked on · 10 messages · resolved
- I want to reuse same page for my websites Login, run all the tests inside the describe block, logout.zeroan asked on · 3 messages · unresolved
- Unable to connect to remote browser instancededsec_30718 asked on · 1 messages · unresolved
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.