Ввести дополнительные значения для выбора перед отправкой формы с помощью CasperJS

Question

Я использую 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?

Answer 1

Это фактически вариант, который HTML не предоставил. Вы не можете предоставить настраиваемое значение для раскрывающегося списка.

Read: 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.

Answer 2

Вы можете использовать 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 фрагмент коды.