HTML5 canvas rotating (3D) image automation with Selenium?

[David]

There's a known issue & given workaround for HTML5 drag & drop support in Selenium WebDriver: 

https://code.google.com/p/selenium/issues/detail?id=3604

I was wondering if anyone has attempted to automate rotating (3D) image in an HTML5 canvas. And how one might go about that. I would believe it's a single canvas element, question is how do you simulate mouse events to drag & drop it (within same element, just different offset/coordinates). Maybe as a variant on the HTML5 drag & drop solution.

Any thoughts or tips here?

[Madhuri Sanap]

Hello David

Any update on this. were you able yo automate it?

Regards,

Madhuri S.

--
You received this message because you are subscribed to the Google Groups "Selenium Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to selenium-user...@googlegroups.com.
To post to this group, send email to seleniu...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/30ac2051-1ec6-4272-b063-3bff999ed604%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--

Regards,
Madhuri S.

[David]

No, it is unfortunate that others have not chimed in and that no one has had to deal with this issue besides us.

What I ended up doing was move the slider in our UI via Selenium to rotate the 3D image in the canvas. Our UI offers a slider bar to rotate as alternate option to using the mouse to drag/drop rotate. However, even the slider technique didn't really work (moved slider, but didn't trigger rotation) but I talked to our developer and he exposed a javascript method for me to call that would force the slider to specific value (e.g. like moving it), which would also trigger the rotation. The method was only available when you set a flag/variable in javascript to enable the hidden automation hook.

One might wonder how I validate the rotation in automation then. My plan was to grab the base 64 encoded data URI off the canvas, which represents the image at the current rotation state, then save it to file (as PNG) and do an image comparison against a known image, using our internal image comparison solution (not exact file byte or pixel comparison, has some fuzzy logic). In the end, I had the solution in place but didn't deploy it in our tests because of cross-browser compatibility issues - it didn't work across all browsers and/or it didn't work perfectly all the time, in terms of fetching the base 64 data and converting to image (it didn't always extract/render right as a PNG) or something like that. It's been a while since then and I left that company, so I don't recall the exact problem details encountered there.

So I suggest you try my approach as well for your needs if you can - contact your developers to expose automation hook to deal with this 3D HTML5 canvas, and validate by export base 64 data URI of canvas to image file and do some comparison against that. You could also do direct base 64 text comparison of actual vs expected if you know you should be able to expect the same content each time, or consult your developers on how you might validate the 3D canvas state for other ideas.