JavaScript Function doc.Support LQDN banner

@floriancargoet (whom i meet at @ParisJS) come with a nice idea : automating some elements screenshot in a WebApps/WebPages powered with #PhantomJS  (headless WebKit with JavaScript API). He’s idea is to generate multilingual documentation for a complexe application (Ext JS / Sencha).


In his example, the use of Ext.js give some constrain finding the element offset in the page…


 * page.evaluate() is sandboxed
 * so that 'component' is not defined.
 * It should be possible to pass variables in phantomjs 1.5
 * but for now, workaround!
eval('function workaround(){ window.componentSelector = "' + component.selector + '";}')
var rect = page.evaluate(function(){
	// find the component
	var comp = Ext.ComponentQuery.query(window.componentSelector)[0];
	// get its bounding box
	var box = comp.el.getBox();
	// box is {x, y, width, height}
	// we want {top, left, width, height}  = box.y;
	box.left = box.x;
	return box;
page.clipRect = rect;

But with jQuery it could be as simple as this…


page.clipRect = $('ul#menu').offset();


See the blog post for more infos


2 Responses to Automated WebApps UI elements screenshot (ex. : documentation) with #PhantomJS

Leave a Reply