Merge pull request #706 from mduvall/assert-field-css-selector-redux

Add CSS selector support to assertField

@@ -160,9 +160,9 @@ Asserts that a given subject is `falsy <http://11heavens.com/falsy-and-truthy-in
 ``assertField()``
 -------------------------------------------------------------------------------
 
-**Signature:** ``assertField(String inputName, String expected[, String message, Object options])``
+**Signature:** ``assertField(String|Object input, String expected[, String message, Object options])``
 
-Asserts that a given form field has the provided value::
+Asserts that a given form field has the provided value with input name or :ref:`selector expression <selectors>`::
 
     casper.test.begin('assertField() tests', 1, function(test) {
         casper.start('http://www.google.fr/', function() {
@@ -173,6 +173,16 @@ Asserts that a given form field has the provided value::
         });
     });
 
+    // Path usage with type 'css'
+    casper.test.begin('assertField() tests', 1, function(test) {
+        casper.start('http://www.google.fr/', function() {
+            this.fill('form[name="gs"]', { q: 'plop' }, false);
+            test.assertField({type: 'css', path: '.q.foo'}, 'plop');
+        }).run(function() {
+            test.done();
+        });
+    });
+
 .. versionadded:: 1.0
 
 This also works with any input type: ``select``, ``textarea``, etc.
@@ -182,6 +192,63 @@ This also works with any input type: ``select``, ``textarea``, etc.
 The `options` parameter allows to set the options to use with
 :ref:`ClientUtils#getFieldValue() <clientutils_getfieldvalue>`.
 
+`input` parameter introspects whether or not a `type` key is passed in with `xpath` or `css` and a property `path` specified along with it.
+
+``assertFieldName()``
+-------------------------------------------------------------------------------
+
+**Signature:** ``assertFieldName(String inputName, String expected[, String message, Object options])``
+
+.. versionadded:: 1.1-beta3
+
+Asserts that a given form field has the provided value::
+
+    casper.test.begin('assertField() tests', 1, function(test) {
+        casper.start('http://www.google.fr/', function() {
+            this.fill('form[name="gs"]', { q: 'plop' }, false);
+            test.assertField('q', 'plop', 'did not plop', {formSelector: 'plopper'});
+        }).run(function() {
+            test.done();
+        });
+    });
+
+``assertFieldCSS()``
+-------------------------------------------------------------------------------
+
+**Signature:** ``assertFieldCSS(String cssSelector, String expected, String message)``
+
+.. versionadded:: 1.1
+
+Asserts that a given form field has the provided value given a CSS selector::
+
+    casper.test.begin('assertField() tests', 1, function(test) {
+        casper.start('http://www.google.fr/', function() {
+            this.fill('form[name="gs"]', { q: 'plop' }, false);
+            test.assertField('q', 'plop', 'did not plop', 'input.plop');
+        }).run(function() {
+            test.done();
+        });
+    });
+
+``assertFieldXPath()``
+-------------------------------------------------------------------------------
+
+**Signature:** ``assertFieldXPath(String xpathSelector, String expected, String message)``
+
+.. versionadded:: 1.1
+
+Asserts that a given form field has the provided value given a XPath selector::
+
+    casper.test.begin('assertField() tests', 1, function(test) {
+        casper.start('http://www.google.fr/', function() {
+            this.fill('form[name="gs"]', { q: 'plop' }, false);
+            test.assertField('q', 'plop', 'did not plop', '/html/body/form[0]/input[1]');
+        }).run(function() {
+            test.done();
+        });
+    });
+
+
 .. index:: HTTP, HTTP Status Code
 
 ``assertHttpStatus()``

@@ -290,7 +290,7 @@
          *
          * @param  String            selector  CSS3 selector
          * @param  HTMLElement|null  scope     Element to search child elements within
-         * @return NodeList|undefined
+         * @return Array|undefined
          */
         this.findAll = function findAll(selector, scope) {
             scope = scope || this.options.scope;
@@ -299,7 +299,7 @@
                 if (pSelector.type === 'xpath') {
                     return this.getElementsByXPath(pSelector.path, scope);
                 } else {
-                    return scope.querySelectorAll(pSelector.path);
+                    return Array.prototype.slice.call(scope.querySelectorAll(pSelector.path));
                 }
             } catch (e) {
                 this.log('findAll(): invalid selector provided "' + selector + '":' + e, "error");
@@ -560,10 +560,19 @@
                 }
             }
             var formSelector = '';
-            if (options && options.formSelector) {
+            if (options.formSelector) {
                 formSelector = options.formSelector + ' ';
             }
             var inputs = this.findAll(formSelector + '[name="' + inputName + '"]');
+
+            if (options.inputSelector) {
+                inputs = inputs.concat(this.findAll(options.inputSelector));
+            }
+
+            if (options.inputXPath) {
+                inputs = inputs.concat(this.getElementsByXPath(options.inputXPath));
+            }
+
             switch (inputs.length) {
                 case 0:  return undefined;
                 case 1:  return getSingleValue(inputs[0]);

@@ -449,6 +449,21 @@ Tester.prototype.assertEvalEqual = function assertEvalEquals(fn, expected, messa
     });
 };
 
+function baseFieldAssert(inputName, expected, actual, message) {
+    /*jshint validthis:true */
+    "use strict";
+
+    return this.assert(utils.equals(actual, expected),  message, {
+        type: 'assertField',
+        standard: f('"%s" input field has the value "%s"', inputName, expected),
+        values: {
+            inputName: inputName,
+            actual: actual,
+            expected: expected
+         }
+    });
+}
+
 /**
  * Asserts that the provided assertion fails (used for internal testing).
  *
@@ -473,26 +488,67 @@ Tester.prototype.assertFail = function assertFail(fn, message) {
 /**
  * Asserts that a given input field has the provided value.
  *
- * @param  String   inputName  The name attribute of the input element
+ * @param  String|Object   input      The name attribute of the input element
+ *                                    or an object with the selector
  * @param  String          expected   The expected value of the input element
  * @param  String          message    Test description
  * @param  Object          options    ClientUtils#getFieldValue options (optional)
  * @return Object                     An assertion result object
  */
-Tester.prototype.assertField = function assertField(inputName, expected,  message, options) {
+Tester.prototype.assertField = function assertField(input, expected, message, options) {
     "use strict";
+
+    if (typeof input === 'object') {
+        switch (input.type) {
+            case 'css':
+                return this.assertFieldCSS(input.path, expected, message);
+            case 'xpath':
+                return this.assertFieldXPath(input.path, expected, message);
+            default:
+                throw new CasperError('Invalid regexp.');
+            // no default
+        }
+    }
+
     var actual = this.casper.evaluate(function(inputName, options) {
         return __utils__.getFieldValue(inputName, options);
-    }, inputName, options);
-    return this.assert(utils.equals(actual, expected),  message, {
-        type: 'assertField',
-        standard: f('"%s" input field has the value "%s"', inputName, expected),
-        values: {
-            inputName: inputName,
-            actual: actual,
-            expected: expected
-         }
-    });
+    }, input, options);
+
+    return baseFieldAssert.call(this, input, expected, actual, message);
+};
+
+/**
+ * Asserts that a given input field by CSS selector has the provided value.
+ *
+ * @param  Object   cssSelector The CSS selector to use for the assert field value
+ * @param  String   expected    The expected value of the input element
+ * @param  String   message     Test description
+ * @return Object               An assertion result object
+ */
+Tester.prototype.assertFieldCSS = function assertFieldCSS(cssSelector, expected, message) {
+    "use strict";
+    var actual = this.casper.evaluate(function(inputName, cssSelector) {
+        return __utils__.getFieldValue(inputName, {inputSelector: cssSelector});
+    }, null, cssSelector);
+
+    return baseFieldAssert.call(this, null, expected, actual, message);
+};
+
+/**
+ * Asserts that a given input field by XPath selector has the provided value.
+ *
+ * @param  Object   xPathSelector The XPath selector to use for the assert field value
+ * @param  String   expected      The expected value of the input element
+ * @param  String   message       Test description
+ * @return Object                 An assertion result object
+ */
+Tester.prototype.assertFieldXPath = function assertFieldXPath(xPathSelector, expected, message) {
+    "use strict";
+    var actual = this.casper.evaluate(function(inputName, xPathSelector) {
+        return __utils__.getFieldValue(inputName, {inputXPath: xPathSelector});
+    }, null, xPathSelector);
+
+    return baseFieldAssert.call(this, null, expected, actual, message);
 };
 
 /**

@@ -6,7 +6,7 @@
     </head>
     <body>
         <form action="result.html" enctype="multipart/form-data">
-            <input type="text" name="email" placeholder="email">
+            <input type="text" name="email" placeholder="email" id="email">
             <input type="password" name="password" placeholder="password">
             <input type="text" name="language" placeholder="language">
             <input type="whatever" name="strange">

@@ -51,17 +51,17 @@ casper.test.begin('ClientUtils.exists() tests', 5, function(test) {
 casper.test.begin('ClientUtils.findAll() tests', 7, function(test) {
     var clientutils = require('clientutils').create();
     fakeDocument('<ul class="foo"><li>bar</li><li>baz</li></ul>');
-    test.assertType(clientutils.findAll('li'), 'nodelist',
+    test.assertType(clientutils.findAll('li'), 'array',
         'ClientUtils.findAll() can find matching DOM elements');
     test.assertEquals(clientutils.findAll('li').length, 2,
         'ClientUtils.findAll() can find matching DOM elements');
-    test.assertType(clientutils.findAll('ol'), 'nodelist',
+    test.assertType(clientutils.findAll('ol'), 'array',
         'ClientUtils.findAll() can find matching DOM elements');
     test.assertEquals(clientutils.findAll('ol').length, 0,
         'ClientUtils.findAll() can find matching DOM elements');
     // scoped
     var scope = clientutils.findOne('ul');
-    test.assertType(clientutils.findAll('li', scope), 'nodelist',
+    test.assertType(clientutils.findAll('li', scope), 'array',
         'ClientUtils.findAll() can find matching DOM elements within a given scope');
     test.assertEquals(clientutils.findAll('li', scope).length, 2,
         'ClientUtils.findAll() can find matching DOM elements within a given scope');

@@ -129,8 +129,94 @@ casper.test.begin('Tester.assertField(): nonexistent fields', 2, function(test)
         test.assertFail(function() {
             test.assertField('nonexistent', '');
         }, 'Tester.assertField() only checks for existing fields');
+    }).run(function() {
+        test.done();
+    });
+});
+
+casper.test.begin('Tester.assertField(): CSS selectors', 1, function(test) {
+    casper.start('tests/site/form.html', function() {
+        this.fill('form[action="result.html"]', {
+            'email': 'albert@camus.com'
+        });
+
+        test.assertField({
+            type: 'css',
+            path: '#email'
+        },
+            'albert@camus.com',
+            'Tester.assertField() works as expected with CSS selectors'
+        );
+    }).run(function() {
+        test.done();
+    });
+});
+
+casper.test.begin('Tester.assertField(): XPath selectors', 1, function(test) {
+    casper.start('tests/site/form.html', function() {
+        this.fill('form[action="result.html"]', {
+            'email': 'albert@camus.com'
         });
-    casper.run(function() {
+
+        test.assertField({
+            type: 'xpath',
+            path: '/html/body/form[1]/input[1]'
+        },
+             'albert@camus.com',
+             'Tester.assertField() works as expected with XPath selectors'
+        );
+    }).run(function() {
         test.done();
-    })
+    });
+});
+
+casper.test.begin('Tester.assertField(): invalid selectors', 1, function(test) {
+    casper.start('tests/site/form.html', function() {
+        this.fill('form[action="result.html"]', {
+            'email': 'albert@camus.com'
+        });
+
+        test.assertRaise(function() {
+            test.assertField({
+                type: 'albert'
+            },
+                 'albert@camus.com',
+                 'Tester.assertField() works as expected with XPath selectors'
+            );
+        }, [], 'should throw an error for an invalid selector');
+    }).run(function() {
+        test.done();
+    });
+});
+
+casper.test.begin('Tester.assertFieldCSS(): CSS selectors', 1, function(test) {
+    casper.start('tests/site/form.html', function() {
+        this.fill('form[action="result.html"]', {
+            'email': 'albert@camus.com'
+        });
+
+        test.assertFieldCSS(
+            '#email',
+            'albert@camus.com',
+            'Tester.assertFieldCSS() works as expected with CSS selectors'
+        );
+    }).run(function() {
+        test.done();
+    });
+});
+
+casper.test.begin('Tester.assertFieldXPath(): XPath selectors', 1, function(test) {
+    casper.start('tests/site/form.html', function() {
+        this.fill('form[action="result.html"]', {
+            'email': 'albert@camus.com'
+        });
+
+        test.assertFieldXPath(
+             '/html/body/form[1]/input[1]',
+             'albert@camus.com',
+             'Tester.assertFieldXPath() works as expected with XPath selectors'
+        );
+    }).run(function() {
+        test.done();
+    });
 });