Forum Discussion

sriram1's avatar
sriram1
Occasional Contributor
7 years ago

How to work with Canvas Object

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

Specifically, 

 

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 solution

 

  • AlexKaras's avatar
    AlexKaras
    Champion Level 3
    7 years ago

    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-Driven-Visual-Testing/td-p/168632).

     

    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.html, 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.

     

  • tristaanogre's avatar
    tristaanogre
    Esteemed Contributor
    7 years ago

    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?

    • sriram1's avatar
      sriram1
      Occasional Contributor
      7 years ago

      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 solution

      • marinb's avatar
        marinb
        Contributor
        7 years ago

        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.