How to fill a select box, when select name and id include ":"

Question

I have html code as below where the select names are with : (I have the need to fill more select included into the form mainForm):

<select id="mainForm:projectSelectOneMenu" name="mainForm:projectSelectOneMenu" class="selectOne" size="1" onchange="A4J.AJAX.Submit('mainForm',event,{'similarityGroupingId':'mainForm:j_id416','parameters':{'mainForm:j_id416':'mainForm:j_id416'} ,'containerId':'mainForm:trainPeriodCriteriaRegion'} )">
    <option value="">--- All ---</option>

I'm using this code:

this.fillSelectors('form#mainForm', {
    'select[name="mainForm:projectSelectOneMenu"]' :  "3"
}, false);
this.wait(6000,function(){  
    this.echo("i saw my new value");
});

I have this error:

CasperError: Errors encountered while filling form: no field matching css selector "select[name="mainForm:projectSelectOneMenu"]" in form.

I used also others way to fill the select but seems I'm not able with my script to recognize the select name.

OK now it works, i filled all the select i needed. Now the last step is to click on the button mainForm:updateTrainPeriodCriteriaButton:

</table>
<br><input id="mainForm:updateTrainPeriodCriteriaButton"     
name="mainForm:updateTrainPeriodCriteriaButton" value="Apply" onclick="A4J.AJAX.Submit('mainForm',event,{'similarityGroupingId':'mainForm:j_id459','parameters':    {'mainForm:j_id459':'mainForm:j_id459'} ,'containerId':'mainForm:trainPeriodCriteriaRegion'} )" type="submit">
<hr>

Using your code:

 console.log("id = mainForm:updateTrainPeriodCriteriaButton ? -> "+this.getElementAttribute('input[name="mainForm:updateTrainPeriodCriteriaButton"]','id'));

the output is correct: id = mainForm:updateTrainPeriodCriteriaButton ? -> mainForm:updateTrainPeriodCriteriaButton

But I'm not able to click on it:

casper.then(function(){    
    this.waitUntilVisible('#mainForm', function(){
    this.fill('form#mainForm', {
        'mainForm:criteriaStartCalendarInputDate':    "2014/03/27 05:00",
        'mainForm:criteriaEndCalendarInputDate':    "2014/03/27 07:59",
    }, false);
});
 //Click
this.thenClick('#mainForm:updateTrainPeriodCriteriaButton');
    this.then(function(){
        this.wait(10000, function(){
            this.capture('After_click.png');   
        });
    });    
});

Error:

CasperError: Cannot dispatch mousedown event on nonexistent selector: #mainForm:updateTrainPeriodCriteriaButton

Fanch · Accepted Answer · 2014-03-25T15:41:51.733

2

Edit : I tried with 'select[name="mainForm:projectSelectOneMenu"]' : "3" and it works...

Try using that :

//Emitted when a screenshot image has been captured.
casper.on('capture.saved', function(targetFile) {
    this.echo('screen properly done at ' + targetFile);
});

this.fillSelectors('form#mainForm', {
    'select[name*="mainForm"]' :  "3"
    }, false);
this.wait(2000,function(){  
    this.echo("i saw my new value");
    this.capture('imgFormCasper.jpg', undefined, {
        format: 'jpg',
        quality: 75
    });
});

or maybe that :

this.fillSelectors('form#mainForm', {
    'select[name*="projectSelectOneMenu"]' :  "3"
    }, false);
this.wait(2000,function(){  
    this.echo("i saw my new value");
    this.capture('imgFormCasper.jpg', undefined, {
        format: 'jpg',
        quality: 75
    });
});

So try this instruction :

console.log("id = mainForm:projectSelectOneMenu ? -> "+this.getElementAttribute('select[name="mainForm:projectSelectOneMenu"]','id'))‌;

You should have : bug casper And if you haven't an IDE, test your code here to be sure you haven't a syntax error : http://esprima.org/demo/validate.html

edited Mar 25 '14 at 15:41

answered Mar 25 '14 at 11:06

Fanch

3,274
3
20
51

Thanks @Fanch for your answer but seems the 2 solutions are not working: CasperError: Errors encountered while filling form: no field matching css selector "select[name*="mainForm"]" in form CasperError: Errors encountered while filling form: no field matching css selector "select[name*="projectSelectOneMenu"]" in form – Quentin Mar 25 '14 at 11:46
I tried with 'select[name="mainForm:projectSelectOneMenu"]' : "3" and it works...so it's not the problem, your selector seems ok. Do you have only one form on your page with id = mainForm ? – Fanch Mar 25 '14 at 13:30
Yes but there are many items (selectors etc..) called like mainForm:something_else. The mainForm is only one :

– Quentin Mar 25 '14 at 13:48
Try that in your wait : console.log("id = mainForm:projectSelectOneMenu ? -> "+this.getElementAttribute('select[name="mainForm:projectSelectOneMenu"]','id')); Is your element recognized? – Fanch Mar 25 '14 at 13:57
Sorry maybe i miss something but your line inserted into the wait is giving me a syntax error. – Quentin Mar 25 '14 at 14:51
Thanks a lot all select are working now, but i'm not able to click on the "final" button. I've edited my post to show the errors. That's the last step of my project.Thanks. – Quentin Mar 27 '14 at 10:26
Your selector is wrong, try that : this.thenClick('#mainForm:updateTrainPeriodCriteriaButton'); '#' means you select the id attribute, '.' means you select the class attribute, for the others : [attribute="attributeValue"] – Fanch Mar 27 '14 at 13:06
I have the same: CasperError: Cannot dispatch mousedown event on nonexistent selector: #mainForm:updateTrainPeriodCriteriaButton......is strange because on the login page i do the same thing with '#' and is working. – Quentin Mar 28 '14 at 10:20
Maybe this.thenClick('input#mainForm:updateTrainPeriodCriteriaButton'); or this.thenClick('input[id="mainForm:updateTrainPeriodCriteriaButton"][type="submit"]'); – Fanch Mar 28 '14 at 12:12

How to fill a select box, when select name and id include ":"

1 Answers1