-2

As part of automation testing, we want to inspect the element in a website which is made of using the Zebkit UI framework.

We are unable to find the element using zebra.ui

examples can be found here

Can someone help us on inspecting the element

Srinivas M
  • 223
  • 2
  • 11
  • 1
    How you tried to "find" element? Which exact element you want to "find"/"inspect"? How does `selenium` related to this issue? – Andersson Mar 22 '17 at 11:53
  • Our QA team is planning on implementing automation by using selenium, so thought like any solution in selenium will also work for them. And I have tried by running and checking the properties after running the commands like zebra.ui and also by using the namespace of zebra that they used. – Srinivas M Mar 22 '17 at 11:58

3 Answers3

3

Zebkit UI components are rendered on HTML5 Canvas. So they are not part of browser DOM tree what can be a problem for a test tool that expects DOM as an input. But it doesn't mean you cannot go over zebkit UI stuff to perform test cases.

First of all keep in mind zebkit components are a hierarchy/tree like DOM is. Every rendered on a canvas zebkit UI component has a related JS instance of appropriate class. There are number of API methods you can use to travel over UI components tree. These methods expect path (XPath-like) since path (from my point of view) is less "encrypted" way than CSS selector.

The API methods you probably need:

  • byPath(path [,callback]) - traversing UI components tree by the given path

    var zcanvas = new zebkit.ui.zCanvas(); ... // travel over all UI components in tree zcanvas.byPath("//*", function(comp) { // perform test cases here ... });

  • properties([path,] properties) applies the specified properties set to component or number of components requested by the given path

    var zcanvas = new zebkit.ui.zCanvas(); ... // set color property to black value for all labels zcanvas.properties("//zebkit.ui.Label", { color: "black" });

  • on([eventName], [path], handler) add listener method(s) for the given event (or all events) of the given component or components identified with the path:

    var zcanvas = new zebkit.ui.zCanvas(); ... // register event listener for all found buttons zcanvas.on("//zebkit.ui.Button", function (src) { // handle button press event here ... });

  • fire([eventName,] [path,] [argument]) fire the given event to the given component or to components identified with the path:

    var zcanvas = new zebkit.ui.zCanvas(); ... // fire button pressed event to button with id equals "testButton" zcanvas.fire("//[@id='testButton']"); ... // or the same with a shortcut zcanvas.fire("#testButton");

barmalei
  • 46
  • 3
0

I'm not sure I understand correctly your issue, but assume you cannot click right button on canvas to open context menu and select "Inspect element" option.

You can

  • press F12 in browser
  • switch to "Elements"/"HTML" tab
  • in search field (CTRL + F) print "canvas"/"<canvas" and press Enter
  • Continue pressing Enter until required canvas found (current element should be highlighted)
Andersson
  • 47,234
  • 13
  • 52
  • 101
  • Thanks for your reply. But we want to inspect the form elements inside of the canvas. – Srinivas M Mar 22 '17 at 12:03
  • Do you mean element that looks like `input` with, for example, `"rgb(185,188,192)"`? – Andersson Mar 22 '17 at 12:05
  • No. We are seeing the only canvas in the Html. But all the input elements are wrapped inside of the canvas by using the Zebkit – Srinivas M Mar 22 '17 at 12:09
  • They not seem to be "real" inputs and you cannot handle them as separate web-elements. I guess you can somehow use `Actions()`, but you should note that for now it's not working with `Firefox`. Also you might find this useful https://qxf2.com/blog/selenium-html5-canvas-verify-what-was-drawn/ – Andersson Mar 22 '17 at 12:27
  • Ok..can you please have a look at this. http://repo.zebkit.org/latest/samples/uidemo.html# There in Basic UI, they are having the input elements. We want to capture such kind of elements – Srinivas M Mar 22 '17 at 12:31
  • There might be a good way to do this, but I can suggest only using `Actions()` to manipulate items on canvas and then compare expected and actual screenshots – Andersson Mar 22 '17 at 12:42
0

These controls are implemented using an HTML5 CANVAS tag. Selenium cannot see "inside" this tag because it doesn't contain HTML. It's like an app inside the page. From the page you linked, it looks like you should be able to use JS to access elements inside the control. When I've done things with CANVAS tags in the past, I generally find JS that does or returns what I want and then wrap that code in a function that I can call. It will work but you will likely have to do some research on Zebkit to find out what JS you will need to validate, etc. all the different things you will want to validate... and it may end up that you won't be able to validate some things.

JeffC
  • 18,375
  • 5
  • 25
  • 47