Visualize SXML

SXML Visualization is one of the great new productivity features in the TestSuite. By visualizing the underlying SXML constructs that were used to render a page, it proves just how powerful the SXML Rendering Engine is.  

You can toggle between normal rendering mode and SXML Visualization mode by pressing CTRL+SHIFT+V.

After enabling SXML Visualization, just hover over the rendered page to see what it does. You will see areas highlighted as you move your mouse. Click and see the SXML Instruction Tree in the lower third of the output tab synchronize to show the stack of instructions that led to the selected element.

How does it work

It is implemented by the Scf macro, so you'll need that one in your rendering SXML in order to activate the feature.

Technical details

What it does is add an event handler to the iXperion Render Engine, so it can hook Macro and Viper execution. Whenever a macro or viper method is executed, it tries to find any HTML tag outputed by the statement, and adds a 'rel' attribute to it, linking directly to the active SXML stack frame by internal id.

When the page rendering completes, an Scf behavior is added to the page. This behavior is defined in /scf/jquery/behavior/classes/Scf.Gui.SxmlVisualizationBehavior.js and has some css in /scf/jquery/behavior/classes/Scf.Gui.SxmlVisualizationBehavior.css

The behavior sets up some jQuery hooks in order to track mouse moves and visualization, displays the SXML Instruction Tree passed to the behavior as a Json object, and jumps to the related instruction by looking at the 'rel' attribute of the rendered HTML tags.