javascript - 如何使用 CasperJS 选择选项

Question

我尝试将选择选项属性设置为已选择。但我尽量避免在CasperJS中使用nth-child，因为PhantomJS的nth-child存在bug。所以我尝试用它来替代 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 元素上该属性后面的属性。

在这种情况下，您需要更改所选索引。 select 元素具有 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/选项[“+i+”]“。