fix element click selector and link popup selector couldn't select elements with numeric ids. close #77

Author: martinsbalodis

extension/scripts/Selector/SelectorElementClick.js

@@ -32,16 +32,33 @@ var SelectorElementClick = {
 		return $(element).closest("html").length !== 0;
 	},
 
+	getElementCSSSelector: function(element) {
+
+		var nthChild, prev;
+		for(nthChild = 1, prev = element.previousElementSibling; prev !== null;prev = prev.previousElementSibling, nthChild++);
+		var tagName = element.tagName.toLocaleLowerCase();
+		var cssSelector = tagName+":nth-child("+nthChild+")";
+
+		while(element.parentElement) {
+			element = element.parentElement;
+			var tagName = element.tagName.toLocaleLowerCase();
+			if(tagName === 'body' || tagName === 'html') {
+				cssSelector = tagName+">"+cssSelector;
+			}
+			else {
+				for(nthChild = 1, prev = element.previousElementSibling; prev !== null;prev = prev.previousElementSibling, nthChild++);
+				cssSelector = tagName+":nth-child("+nthChild+")>"+cssSelector;
+			}
+		}
+
+		return cssSelector;
+	},
+
 	triggerButtonClick: function(clickElement) {
 
-		var cs = new CssSelector({
-			enableSmartTableSelector: false,
-			parent: $("body")[0],
-			enableResultStripping:false
-		});
-		var cssSelector = cs.getCssSelector([clickElement]);
+		var cssSelector = this.getElementCSSSelector(clickElement);
 
-		// this function will catch window.open call and place the requested url as the elements data attribute
+		// this function will trigger the click from browser land
 		var script   = document.createElement("script");
 		script.type  = "text/javascript";
 		script.text  = "" +

extension/scripts/Selector/SelectorPopupLink.js

@@ -64,6 +64,28 @@ var SelectorPopupLink = {
 		return dfd.promise();
 	},
 
+	getElementCSSSelector: function(element) {
+
+		var nthChild, prev;
+		for(nthChild = 1, prev = element.previousElementSibling; prev !== null;prev = prev.previousElementSibling, nthChild++);
+		var tagName = element.tagName.toLocaleLowerCase();
+		var cssSelector = tagName+":nth-child("+nthChild+")";
+
+		while(element.parentElement) {
+			element = element.parentElement;
+			var tagName = element.tagName.toLocaleLowerCase();
+			if(tagName === 'body' || tagName === 'html') {
+				cssSelector = tagName+">"+cssSelector;
+			}
+			else {
+				for(nthChild = 1, prev = element.previousElementSibling; prev !== null;prev = prev.previousElementSibling, nthChild++);
+				cssSelector = tagName+":nth-child("+nthChild+")>"+cssSelector;
+			}
+		}
+
+		return cssSelector;
+	},
+
 	/**
 	 * Gets an url from a window.open call by mocking the window.open function
 	 * @param element
@@ -73,12 +95,7 @@ var SelectorPopupLink = {
 
 		// override window.open function. we need to execute this in page scope.
 		// we need to know how to find this element from page scope.
-		var cs = new CssSelector({
-			enableSmartTableSelector: false,
-			parent: $("body")[0],
-			enableResultStripping:false
-		});
-		var cssSelector = cs.getCssSelector([element]);
+		var cssSelector = this.getElementCSSSelector(element);
 
 		// this function will catch window.open call and place the requested url as the elements data attribute
 		var script   = document.createElement("script");

tests/spec/Selector/SelectorElementClickSpec.js

@@ -60,6 +60,39 @@ describe("Click Element Selector", function () {
 		});
 	});
 
+	it("should be able to click on elemenets with numeric id #123", function () {
+
+		$el.append($("<a id='123'>a</a>"));
+		$el.find("a").click(function() {
+			$el.append("<div>test</div>");
+		});
+
+		var selector = new Selector({
+			id: 'div',
+			type: 'SelectorElementClick',
+			multiple: true,
+			clickElementSelector: "a#123",
+			selector: "div",
+			clickType: 'clickOnce'
+		});
+
+		var dataDeferred = selector.getData($el[0]);
+
+		waitsFor(function() {
+			return dataDeferred.state() === 'resolved';
+		}, "wait for data extraction", 5000);
+
+		runs(function () {
+
+			var data;
+			dataDeferred.done(function(resultData) {
+				data = resultData;
+			});
+			expect(data.length).toEqual(1);
+			expect($(data).text()).toEqual("test");
+		});
+	});
+
 	it("should get elements that are available immediately after clicking", function() {
 
 		$el.append($("<a>a</a>"));

tests/spec/Selector/SelectorPopupLinkSpec.js

@@ -62,6 +62,27 @@ describe("Popup link Selector", function () {
 		]);
 	});
 
+	it("should extract click on a button with a numeric id #123", function () {
+
+		$el.append("<a id='123' onclick=\"window.open('http://example.com/a')\">a</a>");
+
+		var selector = new Selector({
+			id: 'a',
+			type: 'SelectorPopupLink',
+			multiple: false,
+			selector: "a#123"
+		});
+
+		var dataDeferred = selector.getData($el);
+
+		expect(dataDeferred).deferredToEqual([{
+			a: "a",
+			'a-href': "http://example.com/a",
+			_follow: "http://example.com/a",
+			_followSelectorId: "a"
+		}]);
+	});
+
 	it("should return data and url columns", function () {
 		var selector = new Selector({
 			id: 'id',