fix custom commands and assertions to work from page object's sections

Author: maxgalbu

coffee/assertions/elementHasChildren.coffee

@@ -20,6 +20,8 @@
 
 util = require('util');
 
+#=include ../getMultipleSelectors.coffee
+
 exports.assertion = (selector, children_selectors = "", msg = null) ->
 	@message = msg;
 	if !@message
@@ -36,17 +38,20 @@ exports.assertion = (selector, children_selectors = "", msg = null) ->
 		return !!result.value;
 
 	this.command = (callback) ->
+		selector = getMultipleSelectors(selector)
+		children_selectors = getMultipleSelectors(children_selectors)
 		params = [selector, children_selectors];
 		execute = (selector, children_selectors) ->
-			elements = document.querySelectorAll(selector);
-			if !elements.length
-				return false;
+			#=include ../getElementFromSelector.coffee
 
-			element = elements[0];
+			element = getElementFromSelector(selector);
+			if !element
+				return false
+			
 			if !children_selectors
 				return element.children.length != 0;
 			else
-				children = element.querySelectorAll(children_selectors);
+				children = getElementFromSelector(children_selectors, return_all: true, parent_element: element);
 				return children.length != 0;
 		execcallback = (result) =>
 			if callback

coffee/assertions/elementHasNoChildren.coffee

@@ -14,6 +14,8 @@
 
 util = require('util');
 
+#=include ../getMultipleSelectors.coffee
+
 exports.assertion = (selector, msg = null) ->
 	@message = msg || util.format('Testing if element <%s> doesn\'t have child nodes', selector);
 	@expected = true;
@@ -25,13 +27,14 @@ exports.assertion = (selector, msg = null) ->
 		return result.value;
 
 	this.command = (callback) ->
+		selector = getMultipleSelectors(selector)
 		params = [selector];
 		execute = (selector) ->
-			elements = document.querySelectorAll(selector);
-			if !elements.length
-				return false;
+			#=include ../getElementFromSelector.coffee
 
-			element = elements[0];
+			element = getElementFromSelector(selector);
+			if !element
+				return false
 			return element.children.length == 0;
 		execcallback = (result) =>
 			if callback

coffee/commands/jqueryClick.coffee

@@ -11,11 +11,16 @@
  * @param {Function} [callback] - function that will be called after the element is clicked
 ###
 
+#=include ../getMultipleSelectors.coffee
+
 module.exports.command = (selector, callback) ->
+	selector = getMultipleSelectors(selector)
 	params = [selector];
 
 	execute = (selector) ->
-		element = $(selector);
+		#=include ../getElementFromSelector.coffee
+
+		element = getElementFromSelector(selector, jquery: true);
 		element[0].click() if element.length
 		return true;
 	execcallback = =>

coffee/commands/jqueryElement.coffee

@@ -15,11 +15,17 @@
  * @param {Function} callback - function that will be called with the element as argument
 ###
 
+#=include ../getMultipleSelectors.coffee
+
 module.exports.command = (selector, callback) ->
+	selector = getMultipleSelectors(selector)
 	params = [selector];
 
 	execute = (selector) ->
-		return $(selector).get(0);
+		#=include ../getElementFromSelector.coffee
+
+		element = getElementFromSelector(selector, jquery: true);
+		return element.get(0);
 	execcallback = (result) =>
 		if callback
 			callback.call(this, result.value);

coffee/commands/setSelect2Data.coffee

@@ -11,12 +11,18 @@
  * @param {Function} [callback] - function that will be called after the element's value has been set
 ###
 
+#=include ../getMultipleSelectors.coffee
+
 module.exports.command = (selector, data, callback) ->
+	selector = getMultipleSelectors(selector)
 	params = [selector, data];
 
 	execute = (selector, data) ->
-		$(selector).select2("data", data);
-		$(selector).trigger("change");
+		#=include ../getElementFromSelector.coffee
+
+		element = getElementFromSelector(selector, jquery: true);
+		element.select2("data", data);
+		element.trigger("change");
 		return true;
 	execcallback = (result) =>
 		if callback

coffee/commands/setSelect2Value.coffee

@@ -11,12 +11,18 @@
  * @param {Function} [callback] - function that will be called after the element's value has been set
 ###
 
+#=include ../getMultipleSelectors.coffee
+
 module.exports.command = (selector, value, callback) ->
+	selector = getMultipleSelectors(selector)
 	params = [selector, value];
 
 	execute = (selector, value) ->
-		$(selector).select2("val", value);
-		$(selector).trigger("change");
+		#=include ../getElementFromSelector.coffee
+
+		element = getElementFromSelector(selector, jquery: true);
+		element.select2("val", value);
+		element.trigger("change");
 		return true;
 	execcallback = (result) =>
 		if callback

coffee/commands/setValueAndTrigger.coffee

@@ -11,12 +11,18 @@
  * @param {Function} [callback] - function that will be called after the change event is triggered
 ###
 
+#=include ../getMultipleSelectors.coffee
+
 module.exports.command = (selector, value, callback) ->
+	selector = getMultipleSelectors(selector)
 	params = [selector, value];
 
 	execute = (selector, value) ->
-		$(selector).val(value);
-		$(selector).trigger("change");
+		#=include ../getElementFromSelector.coffee
+
+		element = getElementFromSelector(selector, jquery: true);
+		element.val(value);
+		element.trigger("change");
 		return true;
 	execcallback = (result) =>
 		if callback

coffee/getElementFromSelector.coffee

@@ -0,0 +1,35 @@
+#The param "selector" can be an array of selectors, or a string.
+#If there's an array i get the parent element, then use jQuery.find()
+#or element.querySelectorAll() to find the actual element
+getElementFromSelector = (selector, options = {jquery: false}) ->
+	if Array.isArray(selector)
+		section_selector = selector[0]
+		selector = selector[1]
+
+		if options.jquery
+			return $(section_selector).find(selector)
+		else
+			section_element = document.querySelectorAll(section_selector)
+			if !section_element.length
+				return null;
+
+			section_element = section_element[0]
+			if options.parent_element
+				section_element = parent_element
+
+			elements = section_element.querySelectorAll(selector)
+			if elements.length
+				if options.return_all
+					return elements
+				return elements[0]
+	else
+		if options.jquery
+			return $(selector)
+		else
+			elements = document.querySelectorAll(selector)
+			if elements.length
+				if options.return_all
+					return elements
+				return elements[0]
+
+	return null

coffee/getMultipleSelectors.coffee

@@ -0,0 +1,14 @@
+#The param "selector" that is passed to a custom command or assertion
+#can be an array of selector, or a string.
+#It's an array when a custom command is called from a section, and
+#this array cannot be used straight away in a command, because nightwatch
+#or selenium encode it in JSON, but the array itself has circular references
+#that json doesn't like. So I simply extract the selectors for each item
+#of the array and return it
+getMultipleSelectors = (selector) ->
+	if Array.isArray(selector)
+		section_selector = selector[0].selector
+		selector = selector[1].selector
+		return [section_selector,selector]
+	else
+		return selector

gulpfile.js

@@ -3,7 +3,8 @@ var gulp = require("gulp"),
 	coffeescript = require("gulp-coffee"),
 	plumber = require("gulp-plumber"),
 	markdox = require("gulp-markdox"),
-	rename = require("gulp-rename");
+	rename = require("gulp-rename"),
+	include = require("gulp-include");
 
 gulp.task("default", ["assertions", "commands"]);
 
@@ -15,6 +16,7 @@ gulp.task("assertions", function() {
 				gulputil.log(error.stack);
 			this.emit("end");
 		}))
+		.pipe(include())
 		.pipe(coffeescript({bare: true}))
 		.pipe(gulp.dest("js/assertions/"));
 });
@@ -27,6 +29,7 @@ gulp.task("commands", function() {
 				gulputil.log(error.stack);
 			this.emit("end");
 		}))
+		.pipe(include())
 		.pipe(coffeescript({bare: true}))
 		.pipe(gulp.dest("js/commands/"));
 });
@@ -48,6 +51,7 @@ gulp.task("docs", function() {
 });
 
 gulp.task("watch", function() {
+	gulp.watch('coffee/*.coffee', ['assertions', 'commands']);
 	gulp.watch('coffee/assertions/**', ['assertions']);
 	gulp.watch('coffee/commands/**', ['commands']);