Skip to content

John McEleney / casperjs

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 10a54ff0 10a54ff0e4d8dfc99ab41fe1349ea37696feb9bc by Karan Batra-Daitch
Options

Add ability to fill multiselects using fill() method

1 parent b76a1cf5
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::
this.echo('message sent').exit();
});
The ``fill()`` method supports single selects in the same way as text input.
For multiple selects, supply an array of values to match against:
.. code-block :: html
<form action="/contact" id="contact-form" enctype="multipart/form-data">
<select multiple name="category">
<option value=​"0">Friends​</option>​
<option value=​"1">​Family​</option>​
<option value=​"2">​Acquitances​</option>​
<option value=​"3">​Colleagues</option>​
</select>
</form>
A script to select multiple options for category in this form:
.. code-block :: javascript
casper.then(function() {
this.fill('form#contact-form', {
'categories': ['0', '1'] // Friends and Family
});
});
.. warning::
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::
});
casper.run();
......
......@@ -558,6 +558,15 @@
} catch (e) {
type = 'other';
}
if (input.type === 'select-multiple') {
return [].filter.call(input.options, function(option) {
return !!option.selected;
}).map(function(option) {
return option.value;
});
}
if (['checkbox', 'radio'].indexOf(type) === -1) {
return input.value;
}
......@@ -855,6 +864,14 @@
}
break;
case "select":
if (field.multiple) {
[].forEach.call(field.options, function(option) {
option.selected = value.indexOf(option.value) !== -1;
});
} else {
field.value = value;
}
break;
case "textarea":
field.value = value;
break;
......
......@@ -15,6 +15,11 @@
<option>foo</option>
<option value="bar">baz</option>
</select>
<select multiple name="multitopic">
<option>foo</option>
<option value="bar">baz</option>
<option value="car">caz</option>
</select>
<input type="checkbox" name="check">
<input type="radio" name="choice" value="yes">
<input type="radio" name="choice" value="no">
......
......@@ -11,6 +11,8 @@ function testFormValues(test) {
'can fill a textarea form field');
test.assertField('topic', 'bar',
'can pick a value from a select form field');
test.assertField('multitopic', ['bar', 'car'],
'can pick a set of values from a multiselect form field');
test.assertField('check', true,
'can check a form checkbox');
test.assertEvalEquals(function() {
......@@ -36,7 +38,7 @@ function testUrl(test) {
test.assertUrlMatch(/strange=very/, 'strangely typed input field was submitted');
}
casper.test.begin('fill() & fillNames() tests', 16, function(test) {
casper.test.begin('fill() & fillNames() tests', 17, function(test) {
var fpath = fs.pathJoin(phantom.casperPath, 'README.md');
casper.start('tests/site/form.html', function() {
......@@ -47,6 +49,7 @@ casper.test.begin('fill() & fillNames() tests', 16, function(test) {
check: true,
choice: 'no',
topic: 'bar',
multitopic: ['bar', 'car'],
file: fpath,
'checklist[]': ['1', '3'],
strange: "very"
......@@ -64,7 +67,7 @@ casper.test.begin('fill() & fillNames() tests', 16, function(test) {
});
});
casper.test.begin('fillSelectors() tests', 16, function(test) {
casper.test.begin('fillSelectors() tests', 17, function(test) {
var fpath = fs.pathJoin(phantom.casperPath, 'README.md');
casper.start('tests/site/form.html', function() {
......@@ -75,6 +78,7 @@ casper.test.begin('fillSelectors() tests', 16, function(test) {
"input[name='check']": true,
"input[name='choice']": 'no',
"select[name='topic']": 'bar',
"select[name='multitopic']": ['bar', 'car'],
"input[name='file']": fpath,
"input[name='checklist[]']": ['1', '3'],
"input[name='strange']": "very"
......@@ -92,7 +96,7 @@ casper.test.begin('fillSelectors() tests', 16, function(test) {
});
});
casper.test.begin('fillXPath() tests', 15, function(test) {
casper.test.begin('fillXPath() tests', 16, function(test) {
casper.start('tests/site/form.html', function() {
this.fillXPath('form[action="result.html"]', {
'//input[@name="email"]': 'chuck@norris.com',
......@@ -101,6 +105,7 @@ casper.test.begin('fillXPath() tests', 15, function(test) {
'//input[@name="check"]': true,
'//input[@name="choice"]': 'no',
'//select[@name="topic"]': 'bar',
'//select[@name="multitopic"]': ['bar', 'car'],
'//input[@name="checklist[]"]': ['1', '3'],
'//input[@name="strange"]': "very"
});
......@@ -173,6 +178,7 @@ casper.test.begin('getFormValues() tests', 2, function(test) {
check: true,
choice: 'no',
topic: 'bar',
multitopic: ['bar', 'car'],
file: fpath,
'checklist[]': ['1', '3'],
strange: "very"
......@@ -190,6 +196,7 @@ casper.test.begin('getFormValues() tests', 2, function(test) {
"submit": "submit",
"language": "english",
"topic": "bar",
"multitopic": ["bar", "car"],
"strange": "very"
}, 'Casper.getFormValues() retrieves filled values');
});
......@@ -202,6 +209,7 @@ casper.test.begin('getFormValues() tests', 2, function(test) {
check: true,
choice: 'yes',
topic: 'bar',
multitopic: ["bar", "car"],
file: fpath,
'checklist[]': ['1', '3'],
strange: "very"
......@@ -219,6 +227,7 @@ casper.test.begin('getFormValues() tests', 2, function(test) {
"language": "english",
"submit": "submit",
"topic": "bar",
"multitopic": ["bar", "car"],
"strange": "very"
}, 'Casper.getFormValues() correctly retrieves values from radio inputs regardless of order');
});
......