我使用CasperJS提交表格,一切正常。
表单代码:
<form method="post" action="validation.htm">
<input id="name" type="text" value="" name="dataname"></input>
<input id="url" type="text" value="" name="dataurl"></input>
<textarea id="desc" cols="30" rows="4" name="description"></textarea>
<select id="color" size="1" name="datacolor">
<option value="Red">Red</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
</form>
casperjs代码:
casper.fill('form',
dataname: 'Anton',
dataurl: 'http://example.com',
description: 'testing text...',
datacolor: 'Blue'
, 1);
但现在我需要将值推到页面上没有列出的datacolor
。
所以,像这样:
casper.fill('form',
dataname: 'Anton',
dataurl: 'http://example.com',
description: 'testing text...',
datacolor: 'Yellow'
,1);
但当然它不起作用,有什么办法可以用CasperJS来完成吗?
答案 0 :(得分:1)
这实际上是HTML无法提供的选项。您无法为下拉列表提供自定义值。
阅读:HTML select form with option to enter custom value
但是,您可以放置一个隐藏的输入(带有所需的名称)并通过该输入传递自定义颜色。
<input type="hidden" name="datacolor" />
<select id="color" size="1" name="_datacolor">
<option value="Red">Red</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
更改<select>
的名称并使用fill
。
casper.fill('form',{
dataname: 'Anton',
dataurl: 'http://example.com',
description: 'testing text...',
datacolor: 'mycolor'
}
, true);
注意:使用客户端JavaScript填充时需要更多处理 选择下拉列表中的值时隐藏输入。
答案 1 :(得分:1)
在提交之前,您可以使用casper.evaluate
向option
添加新的select
。您可以在页面中执行纯JavaScript,并根据自己的喜好进行操作。
casper.evaluate(function(){
var o = document.createElement("option");
o.setAttribute("value", "Yellow"); // what is sent to the server
o.innerHTML = "Yellow"; // what is shown to the user
document.querySelector("#color").appendChild(o);
});
casper.fill('form', {
dataname: 'Anton',
dataurl: 'http://example.com',
description: 'testing text...',
datacolor: 'Yellow'
}, true);
注意:您的语法有点偏差,您忘记了casperjs代码段中表单字段周围的{ ... }
。