Capturing change in visual appearence of charts while drag & drop

[Mamata]

In our application, we have a dashboard view with couple of charts powered by HTML5/Javascript. The charts are basically bar charts where I need to make sure when dragging the bar , non-selected bars become transparent and tooltip shows up on the selected bar. The title on the tooltip changes dynamically as user drags to new intervals.I can verify drag and drop of any bar using your tool which inserts a desktop command during verification.This is as user clicks and drags the bar before dropping onto new location. Is there any way to verify this change in bar appearence and tooltip while dragging or is it already captured in drag/drop verification?

Thanks,
Mamata.

[Cody]

Hello Mamata,

I have to straight and up front with you and tell you that the type of testing you describe is what we term the "look and feel" of the application. Generally speaking the ROI for automating this "look and feel" is very low, sometimes even negative, i.e. you would spend more time trying to automate it and maintain the automation than if you did it manually. Test Studio is far better at functional/regression testing of the business logic contained in the web application e.g. are the calculations correct, did the new record get added, does it have the right data in the right fields, etc.

To answer your questions more directly, no Test Studio does not automatically test the tool-tip more the transparency of UI elements during a drag & drop action. The closest we could come to this is to write some code that would take screen shots as the drag & drop progressed then you would manually inspect the stored screen shots later after test run was completed.

The code would have to perform these steps individually:

1. Locate the element to be dragged.
2. Send a Mouse Down event at the right coordinate.
3. Move the mouse while it's still down a few pixels. This start the drag & drop operation, change the transparency of the UI elements and display the tool-tip.
4. Take and save a screen shot of the browsers current state.
5. Move the mouse to its final destination.
6. Send a Mouse Up event to end the Drag & Drop operation.
7. Take and save another screen shot of the browsers current state.

Still interested in pursuing this?

Regards,
Cody
Telerik