Verifying a List Item's order in a Drag Drop List

[Loren]

I'm attempting to test drag and drop functionality on an Angular page.

I identified a List Item element with dynamicid by it's unique InnerText, and have a step to drag and drop this record to another row. No problems here.

In the below example, how can I perform a verification test to see that Cat1 Tag1 element has moved from row 1 in the unorderedlist to row 2?

 

The element Property AbsoluteSiblingTagIndex shows the index information that I need, but not sure how I can utilize this in a step. Is a coded step required? If so, idea on an approach for this?

I suppose I could create a new element with same innertext and include the new xpath location on it, but this seems more brittle to me. And I really wanted the index location as part of the verification and not the element itself.

[Nikolay Petrov]

Hello Loren,

All of the drag and drop and verification actions can be performed in a coded step. Try to adjust following lines to your test to verify the new order after the drag and drop.

add an using and a reference to the project settings:

using System.Drawing;

in coded step - adjust those lines to your case:

// locate the ul element
HtmlUnorderedList ulLiSortable = Find.ById<HtmlUnorderedList>("[the ul's id]");

// Drag the data from row 0 to row 1
ulLiSortable.Items[0].DragTo(ulLiSortable.Items[2]);

// refresh the new
ulLiSortable.Refresh();

// debug printing
Log.WriteLine(ulLiSortable.Items[0].InnerText);
Log.WriteLine(ulLiSortable.Items[1].InnerText);

// Verify the new order in elements
Assert.AreEqual(ulLiSortable.Items[0].InnerText, "Item 2");
Assert.AreEqual(ulLiSortable.Items[1].InnerText, "Item 1");

I hope this will solve the problem.

Regards,
Nikolay Petrov
Telerik by Progress