如何使用 CasperJS 选择选项

Question

我尝试将选择选项属性设置为选中。但我尽量避免在 CasperJS 中使用 nth-child，因为 PhantomJS 的 nth-child 中存在错误。 所以我尝试用它作为 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");
}

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

this.evaluate(setSelectedCountry, 5);

选择选项没有改变。

此外，当我尝试使用触发onblur() 时

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

在setSelectedCountry()函数内部，什么也没发生。

为什么会这样？

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

我使用这个功能：

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

然后我得到了另一个：

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

当我尝试同时运行它们时，这就是我所拥有的

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

你能给我一些建议吗？

[编辑]

这是我的标记： 这一个用于 cboCountry 选择选项：

<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>

还有这个用于 cboCity 选择选项：

<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>

Answer 1

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

在这种情况下，您需要更改所选索引。选择元素具有selectedIndex 属性，您可以将其更改为您可以通过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()`
}

有关期权索引的更多信息，请参阅this answer。

---

"//*[@id='cboCity']/option["+i+"]" 无法工作，因为此表达式将匹配作为 #cboCity 元素的直接子元素的选项，但您之间有一个 optgroup。使用"//*[@id='cboCity']//option["+i+"]" 或"//*[@id='cboCity']/optgroup/option["+i+"]"。