Drag and Drop | Playwright - Part 15

[@bulutyesilyurtt]

I am working on a project where we use frames and we have dozens of drag and drop options. As an automation tester I have been suffering with not being able to do drag and drop with code since they are on frames and finally I came across with this video on KZbin! Sir, you are a gift from my god to me, how the f* I could not find out that mouse actions work both for main and subframes. I have been searching for this solutions for months ahaha! Thanks, and I am already subscribed. Keep up the good work please..

[@letcode]

Glad u like it, thanks 👍

[@krishnae5142]

Hi Koushik, How can we drag and drop elements between two windows ..I am able to drag an drop in the same window but not in 2 separate windows.Can you please suggest.

[@letcode]

Hi, not possible

[@CatalogueAddict]

hey is there a difference with the dragAndDrop method in Playwright now it has been released ? Thanks

[@letcode]

No major difference, new drag and drop method is a straight forward to do.

[@grasiboy6761]

@@letcode Sorry to ask, but i am a little bit confused what parameters (source, target) i should put into the page.dragAndDrop function. Do u have an example with correct source and target? Because if i want to put srcBound into it or an selector - these are not strings page.dragAndDrop(source, target[, options])# source # target #

[@letcode]

@@grasiboy6761 you can pass the selector as string. For example in line no. 16 and 17 I have the selector. So you can pass that directly.

[@R3V3R1]

I want to share. For those trying to follow this tutorial using react-beautiful-dnd, or maybe some other drag/drop libraries, you need to add the option "steps: 10" to the page.mouse.move() action. I believe this causes the move action to be performed slower so it doesn't leave slightly laggy components behind. await page.mouse.move(srcBound.x + srcBound.width / 2, srcBound.y + srcBound.height / 2) await page.mouse.down(); await page.mouse.move(dstBound.x + dstBound.width / 2, dstBound.y + dstBound.height / 2, {steps: 10}) await page.mouse.up();

[@letcode]

Appreciated, thanks for sharing ☺️

[@i.am.sameer]

drag and drop in this example is working on X,Y coordinates and these coordinates probably are with respect to page and not frame. So I think it is as expected that frame doesnt support mouse move since solution is just mouse movement and not related to any particular webEelement ( I am just guessing :) )

[@letcode]

Yeah may be ☺️

[@rohanpatil7200]

Hi Sir, Is it possible to drag an image which is stored at my project / local storage? TIA

[@letcode]

Hi, that's not possible.

[@lywatanak8594]

can have an example for drag and drop pin location on map brother?

[@letcode]

Not sure if that will work, but I will check.

[@lywatanak8594]

@@letcode please help me a bit admin. I need your help.

[@AnkitaSaha-fv1yz]

Hi, Koushik, I am facing some problem in drag and drop I have done all the methods you have shown. Please hep me.

[@letcode]

What is the issue?

[@Maxarlo-p1y]

Hi koushik, Thanku for this video. It's really helpful. I am working in a project and one scenario is also related to drag and drop but these things is not working .Can you please share more things/url about drag and drop

[@letcode]

Hi, what is the issue?

[@Maxarlo-p1y]

@@letcode I have apply all those method which you have mention in this video but i am not able to drag the element and drop the element to another place

[@letcode]

There is also a direct method dragto can u check that.

[@KumarS-cz1lh]

Great video Kaushik...just a question about the thing you hate with using if conditions....if the `#draggable` id is not there then you get null for `src`, true but then your `srcBound` would get this error: "Cannot read property 'boundingBox' of null" so I think there is no need for the if conditions, no? Please correct me if I am wrong as I have not looked at it too deeply. Thank you and please keep up the excellent work on Playwright Tutorials.

[@letcode]

Yeah correct if element is not there then it wil be null. But while getting bounding box like x and y it can be also null. So to check that I'm using condition. Without condition u cannot get the x and y, typescript won't allowed as the return type is value or null.

[@KumarS-cz1lh]

@@letcode Just trying to understand since I am writing something very similar following your tutorial.....so the "if" condition in your line number 18 (minute 9:36) is not necessary since if the "src" is null, playwright will throw an error by default when you try to get the boundingBox of null. But you are saying the "if" condition in line number 21 is necessary since even a not null "src" could have a null "srcBound"?

[@letcode]

Both are necessary, I hope you are using typescript, try to execute with and without condition. You'll see the difference.

[@letcode]

Ele can be null if there is no element. Element is there but it don't have bounding box (hidden element) then also null.

[@KumarS-cz1lh]

@@letcode I am using Typescript...when I passed in a non existing element for `src` I get the "Cannot read property 'boundingBox' of null" error hence my assumption that the if condition is not necessary in line 18

[@TestOneDAMSV]

Can you please give an example for drag drop a file in the case of upload? I saw the upload example but it doesn't show dragdrop

[@letcode]

We cannot drag from window explore, that cannot be automated with playwright

[@jluisblee]

You are the best, thanks

[@letcode]

You're welcome!

[@UralIslamov]

Hello, why drag and drop don't work in firefox?

[@letcode]

In the recent version it will work

[@punyaiathwale6483]

Thanks for the video..it works

[@letcode]

Welcome 👍

[@akashk2190]

Bro is there any other method for drag and drop in puppeteer

[@letcode]

Not sure about puppeteer bro

[@jluisblee]

Hello my friend, thanks for share your knowledge. Can you make a tutorial of playwright and cucumber with typescript? thanks in advance

[@letcode]

Hello Jose, Sure, I'll do it.

[@shaikmuneer2241]

I have only source element, I don't have target element, I need to drag source element to any desired location of the div page.....I'm unable to do this scenario.... can any one have suggestions

[@letcode]

You can get the source locator points and increase the points and pass it to the drag and drop method.

[@shaikmuneer2241]

@@letcode increase the points: x and y co ordinates?

[@letcode]

@shaikmuneer2241 yes correct.

[@akashk2190]

Hey Koushik, Great work man and will pls say how to use this in Xpath not in CSS

[@letcode]

Thanks bro. Instead of css you can pass xpath directly.

[@akashk2190]

@@letcode Thanks bro

[@bafalo992]

is this TypeScript?

[@letcode]

Yes

[@nareshrathnam]

I want this code java...help?

[@letcode]

There is a Direct function for drag and drop u can check the documentation.

[@nareshrathnam]

@@letcode ya... I seen

[@nareshrathnam]

@@letcode class drapDrop { public static void main(String[] Args) { WebDriverManager.chromedriver().setup(); driver.get("selenium08.blogspot.com/2020/01/drag-drop.html"); WebElement elem1 = driver.findElement(By.id("draggable")); WebElement elem2 = driver.findElement(By.id("droppable")); Actions actions = new Actions(driver); actions.dragAndDrop(elem1, elem2); actions.build().perform(); Thread. steep( 2000); driver .quit(); } }

[@nareshrathnam]

But this is written on selenium... I want to write Playwright Java code for drag and drop

[@azhaguvel832]

Drag and drop is possible in another tab

[@letcode]

No I guess, scope will be restricted to current page only.

[@early_testing]

Thanks man :)

[@letcode]

Welcome 🤗

[@bhanu2814]

please make videos on java playwright

[@letcode]

Sure 😃

[@bhanu2814]

@@letcode can u give me scroll code in playwright with java

[@letcode]

kzbin.info/www/bejne/i4nNYX-Kd8uZbbs In this i have explained, you can use the same for java.

[@bhanu2814]

@@letcode Tq🙂

[@premkumarmani5905]

look like madhan gowri..oru vela brother hooo..

[@letcode]

Hahaha 😀