如何填写选择框，选择名称和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: 填写表单时遇到错误：表单中没有匹配 css 选择器“select[name="mainForm:projectSelectOneMenu"]”的字段。

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

好的，现在它可以工作了，我填写了我需要的所有选择。现在最后一步是点击按钮 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：无法在不存在的选择器上调度 mousedown 事件：#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