Drag a card through different columns by name

[nedbacan]

Hello .  Can someone help?

I have a web application that contains 3 columns, in each column the user can drag the card horizontally to any of the 3 columns. 

Each column can hold as many cards, but the user can only drag one card at a time in the column.

Qns1 > I would like to create a test script that will drag the card to a certain column, can it be done without using coordinates? 

Qns 2 > Also, if there are multiple cards in one column, how can I find the card that I want to drag by the content text name?

I was thinking of adding the card name into a variable when the card is created and added to the 1st column, and then call that variable to find the card in the column to drag the card to the next column (i.e.  2nd column), can it be done? 

Can you provide a sample in JavaScript, I am not proficient in programming but good at learning by samples?

Attached is the script (Card) that is created by TestComplete when I drag the card from column 1 to column 2. 

I used the Spy to capture the properties for each column (1st, 2nd and 3rd).

[KB1 · Accepted solution]

1. Yes, it is possible to drag a card to a certain column without using coordinates. You can use the TestComplete DOM methods to find the card element and then use the "Drag" method to drag it to the desired column.

2. To find the card that you want to drag by its content text name, you can use the TestComplete DOM methods to find the card element based on its text content. You can use the "FindChild" or "FindChildren" method to search for the element with the desired text content and then use the "Drag" method to drag it to the desired column.

Here is a sample JavaScript code that demonstrates how to drag a card from the first column to the second column based on its text content:

// Find the first column element
 var column1 = Sys.Browser("").Page("").FindChild("id", "column1", 10);

// Find the card element in the first column with the desired text content
 var cardToMove = column1.FindChild("textContent", "Card 1", 10);

// Find the second column element
var column2 = Sys.Browser("").Page("").FindChild("id", "column2", 10);

// Drag the card to the second column
 cardToMove.Drag(column2);

I hope this helps! Let me know if you have any questions.

[tvklovesu]

@KB1 , I am also looking for something similar to this, but I need to do in keyword test. Do you have a sample of this test in keyword test. My scenario, this is like a gmail and I need to drag an email from one folder to another folder. So, I can provide the folders xpath selectors. Please let me know if this can be done using keyword test.

[KB1]

@tvklovesu 
Yes, it is possible to perform this drag and drop operation using a keyword test in TestComplete. You can use the "Drag" keyword and specify the source element (the card or email that you want to move) and the target element (the column or folder that you want to move the card or email to).

Here is an example of how you can do this using the "Drag" keyword and the XPath selectors for the source and target elements:

1. Navigate to the page or application that contains the elements that you want to drag and drop.
2. Use the "Wait" keyword to wait for the page or application to load.
3. Use the "Find Element" keyword to find the source element (the card or email) by its XPath selector. For example:
   • Find Element id=column1//*[text()='Card 1']
4. Use the "Find Element" keyword to find the target element (the column or folder) by its XPath selector. For example:
   • Find Element id=column2
5. Use the "Drag" keyword to drag the source element to the target element. For example:
   • Drag id=column1//*[text()='Card 1'] id=column2

This will drag the element with the text "Card 1" from the element with the ID "column1" to the element with the ID "column2".

You can also use other methods to find the elements, such as the "Find Element By Class Name" keyword or the "Find Element By Tag Name" keyword, depending on the attributes of the elements that you want to find.

[tvklovesu]

@KB1, I tried as following but I am getting Type mismatch at the drag step. Can you please let me know what wrong I did here

Thanks

[KB1]

Going to send you a private message