I’ve tried several dragndrop method that are shared in this group…and custom keywords as well… but doesn’t seem to work on our FE which uses a react dnd package.
I scouted the internet and found this async function that is the exact package our react FE uses. But i’m kind of unsure how to use that in Katalon. any help would be appreciated? I’ll likely just use the //test drag and drop block
// necessary libraries
const {Builder, By, Key, until} = require('selenium-webdriver');
const assert = require("assert");
//Setup the driver
let driver;
beforeEach(async function(){
driver = await new Builder().forBrowser("chrome").build();
})
//Test if the library is loading/setup correctly
test('React-Beautiful-DND loads correctly', async () => {
await driver.get("react-beautiful-dnd example");
await driver.findElement(By.id('example-react-beautiful-dnd'));
assert.equal((await (await driver.findElement(By.id('example-react-beautiful-dnd'))).isDisplayed(), true);
});
//Test drag and drop
test('Sorting list with react-beautdnd', async () => {
await driver.get("react-beautiful-dnd example");
await driver.findElement(By.css('.list .item')).click();
await driver.findElement(By.xpath('//[@id="example-react-beautiful-dnd"]/div[3]/div/div[2]/div/div[2]/div/div/div')).sendKeys(Key.ARROW_DOWN);
await driver.findElement(By.css('.list .item')).click();
assert.equal((await (await driver.findElement(By.xpath('//[@id="example-react-beautiful-dnd"]/div[3]/div/div[2]/div/div[2]/div/div/div[2]'))).getText(), 'list item 1')
});
//Finally close the driver
afterEach(async function() {
await driver.quit();
});
What does this has to do with what I asked? I know the codeblock I posted is just selenium with an arrow function…
Katalon drag and drop doesn’t work, and this was asking if anyone else has another way for the react dragndrop to work…
i don’t see how your response is related to the question I asked, or was that a subtle way of trying to thow shade and insuniate I don’t know jack about katalon basic? smh
i do know that. That’s why I asked how can that arrow function be converted in Katalon whether with groovy or java. I can easily do that my way but was asking if anyone else has a better way. You acting like just cuz you know some coding, you can tell people off and disrespect them? Come on man… this is uncalled for.
“if you are not willing to learn Groovy, then you should choose another tool”
Ok, I guess that statement is coming from Katalon executives? Let me talk to them to see if we should take our thousands of dollars to somewhere else since Kazurayam thinks so.
Groovy language has nothing equivalent to JavaScript’s arrow function (=>) guarded by async and await keywords. So I am not able to answer to your question how to quickly translate the JavaScript code into Groovy. All you can do is to write a Test Case in Groovy from scratch with a lot of try-and-error to mimic the aforementioned JavaScript example.
Hi @ashraf.madina, thank you for sharing the concern with us. Currently, we only support Groovy and Java. We are also collecting other users’ feedback to prepare for our roadmap in supporting other languages but not confirmed any soon. If you need any assistance from our community about Katalon adoption and usage, please let me know.
Hi @kazurayam, thank you for sharing the Certification Program, that’s a great start for most new users.
We also understand that given the text-base community that we are having now, text without full context could result in some hasty arguments. I hope we continue upholding the community values Community Guidelines - Katalon Community of support, respect and be kind to everyone.
Hi,
don’t have direct experience of this framework but I’ve used Selenium Actions in the past. A suggestion that there needs to be a small movement within the boundary of the element before you actually drag it - I found a link to this explanation. See if it helps:
I’ve tried several methods…
This was the closets one to it. it does grab the item… but just drops it in the same location instead of grab and releasing it at the target location…
so far no luck… i can look into the one you posted.
Actions actions = new Actions(DriverFactory.getWebDriver())
WebElement element = WebUiCommonHelper.findWebElement(findTestObject('tm_dnd source'), 10)
actions.clickAndHold(element).perform()
WebUI.mouseOver(findTestObject('tm_dnd target'))
actions.release(element).perform()
MY MAN!
I found a comment in that thread that got my gears rolling! it was pretty simple yet tricky… it looks like the source element needed to be moved a bit offset and then to the target location.
So this is the code that actually worked on the DragNDrop…where selenium actually grabs it, moves it, and releases it on top of target object. (as you said).
thank you @ashraf.madina and @Dan_Bown for great collaboration here! Already pinned it on our product start page for more attention. Thanks again for sharing this.