We Keep Coding

How to inspect element of Zebkit UI

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

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");

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)

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.

"mouse:over" not firing and "mouse:down" returning undefined target using fabricJS

Here is my issue; I am trying to display "markers" and on mouse over/out/click give some actions.
The problem is that no event gets fired on over at all and when on click (down) in the console I get some feedback, but not of the element per say (target == undefined).
My different shapes are groups in a group called "marker".
And I group everything with the following:
marker.add(plateShape, plateLabel, line, indicator);
When using
marker.addWithUpdate(plateShape, plateLabel, line, indicator);
I get some feedback (over being finicky at best) but the layout get completely messed up.
You can comment/uncomment Line 86 to check the behaviour in the following fiddle.
https://jsfiddle.net/u7x7az1j/5/
Thank you for your help! :)

The problem comes from your use of add.
Replace add with addWithUpdate and be aware that addWithUpdate takes one parameter at time.
marker.addWithUpdate(plateShape);
marker.addWithUpdate(plateLabel);
marker.addWithUpdate(line);
marker.addWithUpdate(indicator);
i tried on your fiddle and it works.
Consider replacing rect + triangle + line with a simple parametric fabric.Path you can easily build.

hide one of the axes of a parallel-coordinates plot

i'm representing some data with the parallel coordinates library (based on d3.js) ( https://github.com/syntagmatic/parallel-coordinates#parallel-coordinates )
main functional part of the code is the following:
var parcoords = d3.parcoords()("#example") //#example is the div for the drowing
.data(eingabe) // eingabe is the var, which contains the data
.render()
.reorderable()
.shadows()
.brushMode("1D-axes")
so far it works fine :)
but now i want to hide one specific axis of the parallel coordinates; i only don't want to show it.
I want that the axis is completeley removed, so that it takes no place and the lines don't be affected of the values of this dimension, but i don´t want to do that by manipulating the data. i only want to manipulate the plot (thats the reason i called it hide).
i've searched on the api description but didn't find something. I searched in the internet but didn't find anything, too. But i think i remember that i've seen a peace of code, where the first axis was hidden, but i can't find it again.
Can anybody tell me, how i can hide an axis or where i can find the solution?
thank you, greetings
Jones

You're missing a .hideAxis(array) method call, where the array is a list of keys of the exact column names in your dataset that you want to hide. This method does exactly what you said you wanted:
"...hide one specific axis of the parallel coordinates; i only don't want to show it."
"I want that the axis is completley [sic] removed, so that it takes no place"
"the lines dont [sic] be affected of the values of this dimension, but i don´t want to do that by manupulating [sic] the data. i only want to manipulate the plot."
To implement this method, your code would need to be
var parcoords = d3.parcoords()("#example") //#example is the div for the drowing
.data(eingabe) // eingabe is the var, which contains the data
.hideAxis(["col1", "col2"])
.render()
.reorderable()
.shadows()
.brushMode("1D-axes")
Note: .hideAxis can take in a blank array if you don't want to hide any axis, i.e. .hideAxis([])
You can implement this method in some sort of update/redraw function if you want to allow the user to specify which axis(es) to remove; else, removing it completely via the DOM is impossible. This, performing the axis(es) hide via code, is your only option to implement what you want.
To see this method in action, take a look at the API documentation, specifically, their "example1" graph and code at http://syntagmatic.github.io/parallel-coordinates/index.html#example1

Assuming you just want to hide the axes (i.e. make it invisible) and not remove it completely
d3.selectAll("#example0 > svg > g > g.dimension:nth-child(3)").attr("opacity", "0");
Assuming example0 is the id of the wrapper around your svg element. You could also do the same thing directly on your svg element if you have it.
The above would still leave you able to interact with the filter of the hidden axis. To make it non-interactable, use .attr("display", "none");
Don't have a fiddle, but you should be able to copy paste the above line and run it from the console at http://syntagmatic.github.io/parallel-coordinates/ and see the effect on the chart in the Bundling section.
Here is the effect - before and after respectively

d3 get rect attribute by id

I just stuck on a problem when trying to select an attribute of a rect object within a svg.
This is the rectangle I want to get a value from:
<rect id="2" x="13.761467889908257" y="50" width="49.31192660550459" height="50" fill="rgb(43,0,0)"></rect>
in order to calculate the x-position of another rectangle I need the x-value.
I tried some different ideas like:
svg.selectAll("rect")
.select("id",2); // 1st version
.select("id","2"); // 2nd version
.select("#2"); // found in another d3 tutorial -> not working for me
and a lot more. Is there any way to do this?
// If you need more of my code just write it in a comment I wasnt sure how much to write in order to NOT write too much

According to HTML 4, id's can't start with a number. HTML 5 did change that, but CSS and d3 still don't really support that. So if it's not necessary, it may be easier to just change the id value to not start with a number. This problem is why the #2 selector isn't working, I think.
If you did want to keep id = 2, you can probably use the attribute selector to do it in one line, like this:
svg.select("rect[id='2']")
You can read what Mike Bostock has to say about id's starting with numbers here.
Then, once you have your selection, just do .attr("x").

Try calling directly d3.select('#2');

How to add SVGPan support to raphael

i'm using a library that creates svg content using raphael library. I would now like to add zooming functionality. I found following library:
http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/
This is how the svg part looks:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
//...the image
The issue is that this library expects a script tag and a g tag surrounding the whole image. It should look like this after manipulation:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<script xlink:href="SVGPan.js"/>
<g id="viewport" transform="translate(200,200)">
...//the image
</g>
I would need to add the script tag but the real problem is to put a g element with id="viewport" around the whole rest of the image.
How can i do that with JQuery or plan JavaScript?
EDIT:
I got a bit ahead of myself. It turns out that adding the script tag does not seem to work:
var svg = $('svg');
svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink'); // else error in firefox with links
var scriptElement = document.createElementNS('http://www.w3.org/2000/svg','script');
scriptElement.setAttribute('xlink:href','js/SVGPan.js');
svg.prepend(scriptElement);
I don't get an error and the script runs completely but the tag is not added. I have verified that $('svg') selects the desired element and I can do stuff with it except prepending the script tag for whatever resaon i do not understand.

I don't think Raphael allows you to manipulate the SVG element but you could try a similar Raphael-specific library. This one may provide what you are looking for: https://github.com/semiaddict/raphael-zpd
Edit: Actually it is possible to manipulate SVG elements: Raphael exposes a Node property. So if you could get hold of the Raphael paper object you could try something like:
paper.node.setAttribute("id", "viewport")

Thanks Clafou for pointing me to raphael-zpd. This lead me to the solution.
The issue is that I was able to get the raphael object but zpd only works if nothing has been drawn yet which is not the case.
I'm using http://www.jsphylosvg.com which makes use of raphael. The solution is to edit the javascript file jsphylosvg.js directly:
search for this.svg = Raphael(sDivId, this.canvasSize[0], this.canvasSize[1]); (line 1217 in my case)
add: this.svg.ZPD({ zoom: true, pan: true, drag: true }); directly below that line
save jsphylosvg.js
done. It works!
(Of course you need to have a reference to raphael-zpd in your web page)

Have you tried getting it via a jQuery selector? You could for example try setting the id on the child g element by doing this (after your library has constructed the SVG element):
$('svg > g').attr('id', 'viewport');