如何使用CasperJS选择选项 [英] How to select an option with CasperJS

问题描述

我尝试将select选项属性设置为selected。但我尝试避免在CasperJS中使用nth-child，因为PhantomJS的nth-child中存在错误。
因此，我尝试将其用作jQuery（css_path）的替代。

 函数setSelectedCountry（i）{
 window .__ utils __。echo（ i： + i）; 
 var query = // * [@ id ='cboCountry'] / optgroup [2] / option [ + i +]; 
 __utils __。getElementByXPath（query）.setAttribute（ selected， selected）; 
} 
  

但是，当我以这种方式评估该代码时

  this.evaluate（setSelectedCountry，5）; 
  

选择选项未更改。

此外，当我尝试使用

来触发 onblur（）时 document.getElementById（ cboCountry）。onblur（）; 
  

内部 setSelectedCountry（）函数，有什么都没发生。

为什么会发生？

此外，当我尝试使用XPath表达式调用函数时，另一个使用CSS选择器，我从CasperJS返回了未定义的错误。

我使用此函数：

< pre class = lang-js prettyprint-override> function getCityName（i）{
var query = // * [@ id ='cboCity'] / option [ + i + ];
return __utils __。getElementByXPath（query）.innerText;
}


然后我得到了另一个：

  function setSelectedCountry（i）{
 var query = #cboCountry> optgroup：nth-​​child（3）>选项：nth-​​child（ + i +）; 
 jQuery（query）.attr（ selected， selected）。blur（）; 
} 
  

当我尝试同时运行它们时，这就是我要做的得到

  PAGE.ERROR：TypeError：'undefined'不是对象（评估
'__utils __。getElementByXPath（query）.innerText'）
  

能给我建议吗？

这是我的标记：
这是cboCountry选择选项：

 <选择名称= cboCountry id = cboCountry onkeypress = return selectItem（）; onkeyup = event.cancelbubble = true;返回false; onkeydown = return handleKey（）; onfocus = activeList = this; this.enteredText =’’； onchange = // hs.DropCity（）; onblur = hs.DropCity（）; class = txtBox> < option value =>--选择--< / option> < optgroup label =热门目的地> < option value = MA05110065>印度尼西亚< / option> < option value = MA05110067>马来西亚< / option> < option value = MA05110069>新加坡< / option> < option value = MA05110001>泰国< / option> < / optgroup> < optgroup label =其他目的地> < option value = MA05110083>阿富汗< / option> < option value = MA05110124>阿尔巴尼亚< / option> < option value = MA05110133>阿尔及利亚< / option> < option value = MA05110186>美属萨摩亚< / option> < option value = MA05110103>安道尔< / option> < option value = MA05110014>安哥拉< / option> < option value = MA05110135>安圭拉（英国）< / option> < option value = MA05110136>安提瓜和巴布达< / option> < option value = MA05110171>阿根廷< / option> < option value = MA05110206>亚美尼亚< / option> < option value = MA05110183>委内瑞拉< / option> < option value = MA05110070>越南< / option> < option value = MA05110013>西撒哈拉< / option> < option value = MA05110082>也门// option> < option value = MA05110027>赞比亚< / option> < option value = MA05110028>津巴布韦< / option> < / optgroup>< / select>  

对于cboCity选择选项：

 < select name = cboCity id = cboCity onkeypress = return selectItem（）; onkeyup = event.cancelbubble = true;返回false; onkeydown = return handleKey（）; onfocus = activeList = this; this.enteredText =’’； onchange = // hs.DropLocation（）; onblur = hs.DropLocation（）; class = txtBox> < option value =>--选择--< / option> < option value =>-选择-< / option> < option value = MA02022810> Ambarawa< / option> < option value = MA09090008> Ambon< / option> < option value = MA08090042> Anyer< / option> < option value = MA02022861> Wonosobo< / option> < option value = MA06060051> Yogyakarta< / option>< / select>  

解决方案

问题是属性和属性之间的区别。当您在DOM中更改属性时，浏览器通常不会重新评估属性。在这种情况下，您需要更改DOM元素上该属性后面的属性。

在这种情况下，您需要更改选定的索引。 select元素具有 selectedIndex 属性，您可以将其更改为预期的选项，可以通过 option.index 获得该选项：

 函数setSelectedCountry（i）{
 __utils __。echo（ i： +一世）; 
 var opt = // * [@ id ='cboCountry'] / optgroup [2] / option [ + i +]; 
 var select = document.getElementById（'cboCountry'）; 
 select.selectedIndex = __utils __。getElementByXPath（opt）.index; 
 select.onblur（）; //或`onchange（）`
} 
  

请参见此答案以获取有关期权指数的更多信息。

---

// * [@ id ='cboCity'] / option [ + i +] 不起作用，因为此表达式将匹配作为a的直接子代的选项 #cboCity 元素，但是它们之间有一个 optgroup 。使用 // * [@ id ='cboCity'] // option [ + i +] 或 // * [@ id ='cboCity'] / optgroup / option [ + i +] 。

I try to set select option attribute to selected. But I try to avoid using nth-child in CasperJS because there are bugs in PhantomJS's nth-child. So I try to use this as the subtitution of jQuery(css_path).

function setSelectedCountry(i){
    window.__utils__.echo("i :"+i);
    var query = "//*[@id='cboCountry']/optgroup[2]/option["+i+"]";
    __utils__.getElementByXPath(query).setAttribute("selected","selected");
}

But, when I evaluate that code by this way

this.evaluate(setSelectedCountry, 5);

The select option is not changed.

Moreover, when I try to trigger onblur() using

document.getElementById("cboCountry").onblur();

inside setSelectedCountry() funtion, there were nothing happened.

Why this happened?

Also, when I try to call the function with XPath expression, and the other one is using CSS selector, I got undefined error returned from CasperJS.

I use this function :

function getCityName(i){
    var query = "//*[@id='cboCity']/option["+i+"]";
    return __utils__.getElementByXPath(query).innerText;
}

then I got the other one:

function setSelectedCountry(i){
    var query = "#cboCountry > optgroup:nth-child(3) > option:nth-child("+i+")";
    jQuery(query).attr("selected", "selected").blur();
}

When I try to run both of them, then this is what I've got

PAGE.ERROR: TypeError: 'undefined' is not an object (evaluating
'__utils__.getElementByXPath(query).innerText')

Can you give me suggestions?

[EDITED]

Here is my markup : This one for cboCountry select option :

<select name="cboCountry" id="cboCountry" onkeypress="return selectItem();" onkeyup="event.cancelbubble=true;return false;" onkeydown="return handleKey();" onfocus="activeList=this;this.enteredText='';" onchange="//hs.DropCity();" onblur="hs.DropCity();"
class="txtBox">
  <option value="">-- --Select-- --</option>
  <optgroup label="Popular Destinations">
    <option value="MA05110065">Indonesia</option>
    <option value="MA05110067">Malaysia</option>
    <option value="MA05110069">Singapore</option>
    <option value="MA05110001">Thailand</option>
  </optgroup>
  <optgroup label="Other Destinations">
    <option value="MA05110083">Afghanistan</option>
    <option value="MA05110124">Albania</option>
    <option value="MA05110133">Algeria</option>
    <option value="MA05110186">American Samoa</option>
    <option value="MA05110103">Andorra</option>
    <option value="MA05110014">Angola</option>
    <option value="MA05110135">Anguilla (UK)</option>
    <option value="MA05110136">Antigua and Barbuda</option>
    <option value="MA05110171">Argentina</option>
    <option value="MA05110206">Armenia</option>
    <option value="MA05110183">Venezuela</option>
    <option value="MA05110070">Vietnam</option>
    <option value="MA05110013">Western Sahara</option>
    <option value="MA05110082">Yemen</option>
    <option value="MA05110027">Zambia</option>
    <option value="MA05110028">Zimbabwe</option>
  </optgroup>
</select>

And this one for cboCity select option :

<select name="cboCity" id="cboCity" onkeypress="return selectItem();" onkeyup="event.cancelbubble=true;return false;" onkeydown="return handleKey();" onfocus="activeList=this;this.enteredText='';" onchange="//hs.DropLocation();" onblur="hs.DropLocation();"
class="txtBox">
  <option value="">-- --Select-- --</option>
  <option value="">-- Select --</option>
  <option value="MA02022810">Ambarawa</option>
  <option value="MA09090008">Ambon</option>
  <option value="MA08090042">Anyer</option>
  <option value="MA02022861">Wonosobo</option>
  <option value="MA06060051">Yogyakarta</option>
</select>

解决方案

The problem is the distinction between property and attribute. Browsers usually don't re-evaluate attributes when you change them in the DOM. In those cases, you would need to change the property behind that attribute on the DOM element.

In this case, you need to change the selected index. The select element has the selectedIndex property that you can change to the intended option which you can get through option.index:

function setSelectedCountry(i){
    __utils__.echo("i :"+i);
    var opt = "//*[@id='cboCountry']/optgroup[2]/option["+i+"]";
    var select = document.getElementById('cboCountry');
    select.selectedIndex = __utils__.getElementByXPath(opt).index;
    select.onblur(); // or `onchange()`
}

See this answer for more information on the option index.

---

"//*[@id='cboCity']/option["+i+"]" cannot work, because this expression will match options that are direct children of a #cboCity element, but you have an optgroup inbetween. Either use "//*[@id='cboCity']//option["+i+"]" or "//*[@id='cboCity']/optgroup/option["+i+"]".

这篇关于如何使用CasperJS选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！