javascript - 如何填充选择框，选择名称和ID时包括 ":"

Question

我有如下 html 代码，其中选择名称带有 :(我需要填写更多包含在表单 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>       

我正在使用这段代码:

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

我有这个错误:

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

我也使用其他方式来填充选择，但似乎我无法使用我的脚本识别选择名称。

好的，现在它可以工作了，我填写了我需要的所有选择。现在最后一步是单击按钮 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> 

使用您的代码:

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

输出是正确的: id = mainForm:updateTrainPeriodCriteriaButton ? -> mainForm:updateTrainPeriodCriteriaButton

但是我无法点击它:

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');   
        });
    });    
});  

错误:

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

Answer 1

编辑:我尝试使用 'select[name="mainForm:projectSelectOneMenu"]' : "3"并且有效...

尝试使用它:

//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
    });
});     

或者也许是:

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
    });
});     

所以试试这个指令:

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

你应该有: 如果您没有 IDE，请在此处测试您的代码以确保您没有语法错误:http://esprima.org/demo/validate.html