a locator selector

I found it's very difficult to write a locator of element.
like

command	mousedown
target	//div[@id="a"]

I have to know the id or xpath of element. If the dom is complex, it is unable to write a locator.
So I write a extension of locator selector.

We can use the extension like this:

First,double click the target textField.
Second,move your mouse on the window,the selector will high light the target element and you can see the locator.
Then press the "Ctrl + V" keys ,you can input the locator into the target textField.

Let's look at the code.

var targetText = document.getElementById("commandTarget");
//the target textField id is commandTarget
targetText.addEventListener("dblclick", function(event) { //add dblclick function
	var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
			.getService(Components.interfaces.nsIWindowMediator);
	var contentWindow = wm.getMostRecentWindow('navigator:browser')
			.getBrowser().contentWindow;
	var contentDocument = contentWindow.document;
	var highLightStyle = createStyleSheet(contentDocument,
			".__highlight{border:1px solid red}");
	var textDiv = contentDocument.createElement("div");
	contentDocument.body.appendChild(textDiv);
	textDiv.style.border = "1px solid blue";
	textDiv.style.display = "none";
	textDiv.style.backgroundColor = "#f1f1f1";
	textDiv.style.position = "absolute";
	textDiv.style.fontSize = "12px";
	textDiv.style.height = "16px";
	var currElem = null;
	function mouseOverListener(event) {
		event.preventDefault();
		event.stopPropagation();
		var elem = event.target;
		removeClass(currElem, "__highlight");
		addClass(elem, "__highlight");
		currElem = elem;
		textDiv.style.display = "";
		textDiv.style.top = event.clientY + 5 + contentWindow.scrollY;
		textDiv.style.left = event.clientX + 5 + contentWindow.scrollX;
		var locator = Recorder.get(contentWindow).findLocator(elem);
		textDiv.innerHTML = locator;
	}
	function keyPressListener(event) {
		if (event.ctrlKey && event.charCode == 118) {
			event.preventDefault();
			event.stopPropagation();
			targetText.value = textDiv.innerHTML;
			clearListener();
		}
	}
	function clearListener() {
		contentDocument.body.removeEventListener("mouseover",
				mouseOverListener, true);
		targetText.removeEventListener("keypress", keyPressListener, true);
		targetText.removeEventListener("blur", clearListener, true);
		textDiv.parentNode.removeChild(textDiv);
		removeClass(currElem, "__highlight");
		highLightStyle.parentNode.removeChild(highLightStyle);
	}
	contentDocument.body.addEventListener("mouseover", mouseOverListener, true);
	targetText.addEventListener("keypress", keyPressListener, true);
	targetText.addEventListener("blur", clearListener, true);
}, true);
// create a style element use css code
function createStyleSheet(doc, cssText) {
	var style = doc.createElement("style");
	style.setAttribute("type", "text/css");
	style.innerHTML = cssText;
	doc.body.appendChild(style);
	return style;
}
//add a class to a element
function addClass(elem, className) {
	if (elem) {
		if (elem.className) {
			elem.className = elem.className + " " + className;
		} else {
			elem.className = className;
		}
	}
}
//remove a class to a element
function removeClass(elem, className) {
	if (elem) {
		if (elem.className) {
			elem.className = (" " + elem.className + " ").replace(" "
					+ className + " ", " ");
		} else {
			elem.className = className;
		}
	}
}

article writing services

a locator selector

Labels