HTML 5 Canvas issue

Technology specific object identification, supported applications, web technologies, and 3rd party controls.
Posts: 24
Joined: Tue Nov 04, 2014 3:13 pm

HTML 5 Canvas issue

Post by nico » Wed Jan 25, 2017 1:40 pm

I am trying to automate this website:
A big portion of the view is a HTML 5 Canvas element.

I read some stuff about Canvas being just an image, but in this image viewer you can click left/right to see the previous image and there are a few links on this element.

However the Ranorex Spy can only see the canvas tag without any context nested underneath.

Is there a way to make the individual elements visible our should we rely on image based testing and/or manual inputs to control the viewer?

Used for the viewer is HTML5 (canvas element), jquery.

Windows 10
Ranorex 6.2.1

Snapshot is coming, too big for attachment.

Posts: 24
Joined: Tue Nov 04, 2014 3:13 pm

Re: HTML 5 Canvas issue

Post by nico » Wed Jan 25, 2017 1:47 pm

User avatar
Ranorex Guru
Ranorex Guru
Posts: 7469
Joined: Mon Aug 13, 2012 9:54 am
Location: Zilina, Slovakia

Re: HTML 5 Canvas issue

Post by odklizec » Wed Jan 25, 2017 2:17 pm


I'm afraid, there is no out-of-the-box solution for this problem. I would suggest to read this post, where you can find some suggestions from Ranorex support: ... t8341.html
Pavel Kudrys
Ranorex explorer at Descartes Systems

Please add these details to your questions:
  • Ranorex Snapshot. Learn how to create one >here<
  • Ranorex xPath of problematic element(s)
  • Ranorex version
  • OS version
  • HW configuration

Posts: 2683
Joined: Tue Feb 07, 2012 4:14 pm
Location: Austin, Texas, USA

Re: HTML 5 Canvas issue

Post by krstcs » Wed Jan 25, 2017 2:18 pm

As you said, a Canvas element is just an image. There are no elements inside it as far as the browser and Ranorex are concerned.

You can still use the Ranorex Mouse actions against the canvas element if you know that left/right clicking is supposed to work. It should still work correctly.

If you mean that there are left and right arrows on the canvas, then you can still use relative coordinate-based clicking. To do this, choose Center-Left or Center-Right, etc., from the list on the mouse click action.

I would use image-based automation only as a very last resort.
Shortcuts usually aren't...