Ask a Question

How to work with Canvas Object

sriram1
Occasional Contributor

How to work with Canvas Object

How to automate the Speedometer Canvas object in HTML or HTML5 using testcomplete.

Specifically, 

 

download.jpgIn some test cases I need to verify the speed shown in the speedometer(varying for a particular period of time) is equal to the speed updated in any table(may be a DB).

 

Take the object attached in this question. The Speedometer needle moves from 0 to 140, Now the data updated in the table will be 140(take it as Milles or Kmph). I need to verify the needle position in the 140 and the table value as same. I mapped the object as a whole, But i didn't get the properties of the moving needle. I need to the meep the needle also as a value. So how to automate it?

 

Can u please give me solution

 

4 REPLIES 4
tristaanogre
Community Hero

Re: How to work with Canvas Object

What have you tried? 

Generally speaking, after checking Google, the speedometer canvas object is a Javascript object in HTML 5.  So, TestComplete can inspect it and determine properties and such.  However, you're not very specific as to what exactly you want to do with it.  Can you please be more specific?


Robert Martin
[Hall of Fame]
Please consider giving a Kudo if I write good stuff
----

Why automate?  I do automated testing because there's only so much a human being can do and remain healthy.  Sleep is a requirement.  So, while people sleep, automation that I create does what I've described above in order to make sure that nothing gets past the final defense of the testing group.
I love good food, good books, good friends, and good fun.

Mysterious Gremlin Master
Vegas Thrill Rider
Extensions available
AlexKaras
Community Hero

Re: How to work with Canvas Object

Hi,

 

Canvas contains just a pixel graphics drawn, usually, via some script executed on the page. Thus canvas does not expose any methods and properties that can be accessed by TestComplete and used in test code.

First option is to use image testing approach (searh for an image fragment within the bigger image, image comparisons, etc.).

Another possible approach that depends on your actual needs is to try new OCR functionality awailable in TC 12.60 Beta (https://community.smartbear.com/t5/TestComplete-General-Discussions/TestComplete-Beta-Program-Try-AI...).

 

P.S. Third possible option is to get tested page internals (https://support.smartbear.com/testcomplete/docs/app-testing/web/general/common-tasks/document-object..., https://support.smartbear.com/testcomplete/docs/app-testing/web/general/common-tasks/javascript.html), talk to developers and ask them what internal page data structures can be accessed, access them and verify that they contain expected values.

 

Regards,
  /Alex [Community Hero]
____
[Community Heroes] are not employed by SmartBear Software but
are just volunteers who have some experience with the tools by SmartBear Software
and a desire to help others. Posts made by [Community Heroes]
may differ from the official policies of SmartBear Software and should be treated
as the own private opinion of their authors and under no circumstances as an
official answer from SmartBear Software.
The [Community Hero] signature is used with permission by SmartBear Software.
https://community.smartbear.com/t5/custom/page/page-id/hall-of-fame
================================
sriram1
Occasional Contributor

Re: How to work with Canvas Object

In some test cases I need to verify the speed shown in the speedometer(varying for a particular period of time) is equal to the speed updated in any table(may be a DB).

 

Take the object attached in this question. The Speedometer needle moves from 0 to 140, Now the data updated in the table will be 140(take it as Milles or Kmph). I need to verify the needle position in the 140 and the table value as same. I mapped the object as a whole, But i didn't get the properties of the moving needle. I need to the meep the needle also as a value. So how to automate it?

 

Can u please give me solutiondownload.jpg

marinb
Contributor

Re: How to work with Canvas Object

Why would you need to automate a check on the needle? That seems like an unnecessary increase of complexity. The 140 is the most important thing. If it is not possible to get that from any of the properties in the object, I think you will indeed be stuck with image comparison. If there is a property somewhere in the object, I'd suggest just to skip the extra layer of complexity in your tests by also trying to check the needle itself.

cancel
Showing results for 
Search instead for 
Did you mean: