Skip to content

John McEleney / casperjs

Go to a project
Toggle navigation
Toggle navigation pinning
Commit c55c2670 c55c267015aaee3f92381c9943c1c0babfc6d8da by Nicolas Perriault
Options

Merge pull request #862 from kbdaitch/master 

Add ability to fill multiselect in forms
2 parents b76a1cf5 10a54ff0
Inline Side-by-side
Showing 4 changed files with 58 additions and 4 deletions
...@@ -933,6 +933,30 @@ A script to fill and submit this form:: ...@@ -933,6 +933,30 @@ A script to fill and submit this form::
933 this.echo('message sent').exit(); 933 this.echo('message sent').exit();
934 }); 934 });
935 935
936 The ``fill()`` method supports single selects in the same way as text input.
937 For multiple selects, supply an array of values to match against:
938
939 .. code-block :: html
940
941 <form action="/contact" id="contact-form" enctype="multipart/form-data">
942 <select multiple name="category">
943 <option value=​"0">Friends​</option>​
944 <option value=​"1">​Family​</option>​
945 <option value=​"2">​Acquitances​</option>​
946 <option value=​"3">​Colleagues</option>​
947 </select>
948 </form>
949
950 A script to select multiple options for category in this form:
951
952 .. code-block :: javascript
953
954 casper.then(function() {
955 this.fill('form#contact-form', {
956 'categories': ['0', '1'] // Friends and Family
957 });
958 });
959
936 .. warning:: 960 .. warning::
937 961
938 1. The ``fill()`` method currently can't fill **file fields using XPath selectors**; PhantomJS natively only allows the use of CSS3 selectors in its ``uploadFile()`` method, hence this limitation. 962 1. The ``fill()`` method currently can't fill **file fields using XPath selectors**; PhantomJS natively only allows the use of CSS3 selectors in its ``uploadFile()`` method, hence this limitation.
...@@ -2309,4 +2333,3 @@ Sets the current page zoom factor:: ...@@ -2309,4 +2333,3 @@ Sets the current page zoom factor::
2309 }); 2333 });
2310 2334
2311 casper.run(); 2335 casper.run();
2312
......
...@@ -558,6 +558,15 @@ ...@@ -558,6 +558,15 @@
558 } catch (e) { 558 } catch (e) {
559 type = 'other'; 559 type = 'other';
560 } 560 }
561
562 if (input.type === 'select-multiple') {
563 return [].filter.call(input.options, function(option) {
564 return !!option.selected;
565 }).map(function(option) {
566 return option.value;
567 });
568 }
569
561 if (['checkbox', 'radio'].indexOf(type) === -1) { 570 if (['checkbox', 'radio'].indexOf(type) === -1) {
562 return input.value; 571 return input.value;
563 } 572 }
...@@ -855,6 +864,14 @@ ...@@ -855,6 +864,14 @@
855 } 864 }
856 break; 865 break;
857 case "select": 866 case "select":
867 if (field.multiple) {
868 [].forEach.call(field.options, function(option) {
869 option.selected = value.indexOf(option.value) !== -1;
870 });
871 } else {
872 field.value = value;
873 }
874 break;
858 case "textarea": 875 case "textarea":
859 field.value = value; 876 field.value = value;
860 break; 877 break;
......
...@@ -15,6 +15,11 @@ ...@@ -15,6 +15,11 @@
15 <option>foo</option> 15 <option>foo</option>
16 <option value="bar">baz</option> 16 <option value="bar">baz</option>
17 </select> 17 </select>
18 <select multiple name="multitopic">
19 <option>foo</option>
20 <option value="bar">baz</option>
21 <option value="car">caz</option>
22 </select>
18 <input type="checkbox" name="check"> 23 <input type="checkbox" name="check">
19 <input type="radio" name="choice" value="yes"> 24 <input type="radio" name="choice" value="yes">
20 <input type="radio" name="choice" value="no"> 25 <input type="radio" name="choice" value="no">
......
...@@ -11,6 +11,8 @@ function testFormValues(test) { ...@@ -11,6 +11,8 @@ function testFormValues(test) {
11 'can fill a textarea form field'); 11 'can fill a textarea form field');
12 test.assertField('topic', 'bar', 12 test.assertField('topic', 'bar',
13 'can pick a value from a select form field'); 13 'can pick a value from a select form field');
14 test.assertField('multitopic', ['bar', 'car'],
15 'can pick a set of values from a multiselect form field');
14 test.assertField('check', true, 16 test.assertField('check', true,
15 'can check a form checkbox'); 17 'can check a form checkbox');
16 test.assertEvalEquals(function() { 18 test.assertEvalEquals(function() {
...@@ -36,7 +38,7 @@ function testUrl(test) { ...@@ -36,7 +38,7 @@ function testUrl(test) {
36 test.assertUrlMatch(/strange=very/, 'strangely typed input field was submitted'); 38 test.assertUrlMatch(/strange=very/, 'strangely typed input field was submitted');
37 } 39 }
38 40
39 casper.test.begin('fill() & fillNames() tests', 16, function(test) { 41 casper.test.begin('fill() & fillNames() tests', 17, function(test) {
40 var fpath = fs.pathJoin(phantom.casperPath, 'README.md'); 42 var fpath = fs.pathJoin(phantom.casperPath, 'README.md');
41 43
42 casper.start('tests/site/form.html', function() { 44 casper.start('tests/site/form.html', function() {
...@@ -47,6 +49,7 @@ casper.test.begin('fill() & fillNames() tests', 16, function(test) { ...@@ -47,6 +49,7 @@ casper.test.begin('fill() & fillNames() tests', 16, function(test) {
47 check: true, 49 check: true,
48 choice: 'no', 50 choice: 'no',
49 topic: 'bar', 51 topic: 'bar',
52 multitopic: ['bar', 'car'],
50 file: fpath, 53 file: fpath,
51 'checklist[]': ['1', '3'], 54 'checklist[]': ['1', '3'],
52 strange: "very" 55 strange: "very"
...@@ -64,7 +67,7 @@ casper.test.begin('fill() & fillNames() tests', 16, function(test) { ...@@ -64,7 +67,7 @@ casper.test.begin('fill() & fillNames() tests', 16, function(test) {
64 }); 67 });
65 }); 68 });
66 69
67 casper.test.begin('fillSelectors() tests', 16, function(test) { 70 casper.test.begin('fillSelectors() tests', 17, function(test) {
68 var fpath = fs.pathJoin(phantom.casperPath, 'README.md'); 71 var fpath = fs.pathJoin(phantom.casperPath, 'README.md');
69 72
70 casper.start('tests/site/form.html', function() { 73 casper.start('tests/site/form.html', function() {
...@@ -75,6 +78,7 @@ casper.test.begin('fillSelectors() tests', 16, function(test) { ...@@ -75,6 +78,7 @@ casper.test.begin('fillSelectors() tests', 16, function(test) {
75 "input[name='check']": true, 78 "input[name='check']": true,
76 "input[name='choice']": 'no', 79 "input[name='choice']": 'no',
77 "select[name='topic']": 'bar', 80 "select[name='topic']": 'bar',
81 "select[name='multitopic']": ['bar', 'car'],
78 "input[name='file']": fpath, 82 "input[name='file']": fpath,
79 "input[name='checklist[]']": ['1', '3'], 83 "input[name='checklist[]']": ['1', '3'],
80 "input[name='strange']": "very" 84 "input[name='strange']": "very"
...@@ -92,7 +96,7 @@ casper.test.begin('fillSelectors() tests', 16, function(test) { ...@@ -92,7 +96,7 @@ casper.test.begin('fillSelectors() tests', 16, function(test) {
92 }); 96 });
93 }); 97 });
94 98
95 casper.test.begin('fillXPath() tests', 15, function(test) { 99 casper.test.begin('fillXPath() tests', 16, function(test) {
96 casper.start('tests/site/form.html', function() { 100 casper.start('tests/site/form.html', function() {
97 this.fillXPath('form[action="result.html"]', { 101 this.fillXPath('form[action="result.html"]', {
98 '//input[@name="email"]': 'chuck@norris.com', 102 '//input[@name="email"]': 'chuck@norris.com',
...@@ -101,6 +105,7 @@ casper.test.begin('fillXPath() tests', 15, function(test) { ...@@ -101,6 +105,7 @@ casper.test.begin('fillXPath() tests', 15, function(test) {
101 '//input[@name="check"]': true, 105 '//input[@name="check"]': true,
102 '//input[@name="choice"]': 'no', 106 '//input[@name="choice"]': 'no',
103 '//select[@name="topic"]': 'bar', 107 '//select[@name="topic"]': 'bar',
108 '//select[@name="multitopic"]': ['bar', 'car'],
104 '//input[@name="checklist[]"]': ['1', '3'], 109 '//input[@name="checklist[]"]': ['1', '3'],
105 '//input[@name="strange"]': "very" 110 '//input[@name="strange"]': "very"
106 }); 111 });
...@@ -173,6 +178,7 @@ casper.test.begin('getFormValues() tests', 2, function(test) { ...@@ -173,6 +178,7 @@ casper.test.begin('getFormValues() tests', 2, function(test) {
173 check: true, 178 check: true,
174 choice: 'no', 179 choice: 'no',
175 topic: 'bar', 180 topic: 'bar',
181 multitopic: ['bar', 'car'],
176 file: fpath, 182 file: fpath,
177 'checklist[]': ['1', '3'], 183 'checklist[]': ['1', '3'],
178 strange: "very" 184 strange: "very"
...@@ -190,6 +196,7 @@ casper.test.begin('getFormValues() tests', 2, function(test) { ...@@ -190,6 +196,7 @@ casper.test.begin('getFormValues() tests', 2, function(test) {
190 "submit": "submit", 196 "submit": "submit",
191 "language": "english", 197 "language": "english",
192 "topic": "bar", 198 "topic": "bar",
199 "multitopic": ["bar", "car"],
193 "strange": "very" 200 "strange": "very"
194 }, 'Casper.getFormValues() retrieves filled values'); 201 }, 'Casper.getFormValues() retrieves filled values');
195 }); 202 });
...@@ -202,6 +209,7 @@ casper.test.begin('getFormValues() tests', 2, function(test) { ...@@ -202,6 +209,7 @@ casper.test.begin('getFormValues() tests', 2, function(test) {
202 check: true, 209 check: true,
203 choice: 'yes', 210 choice: 'yes',
204 topic: 'bar', 211 topic: 'bar',
212 multitopic: ["bar", "car"],
205 file: fpath, 213 file: fpath,
206 'checklist[]': ['1', '3'], 214 'checklist[]': ['1', '3'],
207 strange: "very" 215 strange: "very"
...@@ -219,6 +227,7 @@ casper.test.begin('getFormValues() tests', 2, function(test) { ...@@ -219,6 +227,7 @@ casper.test.begin('getFormValues() tests', 2, function(test) {
219 "language": "english", 227 "language": "english",
220 "submit": "submit", 228 "submit": "submit",
221 "topic": "bar", 229 "topic": "bar",
230 "multitopic": ["bar", "car"],
222 "strange": "very" 231 "strange": "very"
223 }, 'Casper.getFormValues() correctly retrieves values from radio inputs regardless of order'); 232 }, 'Casper.getFormValues() correctly retrieves values from radio inputs regardless of order');
224 }); 233 });
......