如何 select 使用 CasperJS 的选项

Question

我尝试将 select 选项属性设置为 selected。但我尽量避免在 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);

select 选项未更改。

此外，当我尝试使用

触发onblur()

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

在 setSelectedCountry() 函数中，什么也没有发生。

为什么会这样？

此外，当我尝试使用 XPath 表达式调用函数时，另一个正在使用 CSS select或者，我从 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 选项：

<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 选项：

<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 元素上该属性后面的属性。

在这种情况下，您需要更改 selected 索引。 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/option["+i+"]".

如何 select 使用 CasperJS 的选项

How to select an option with CasperJS

javascript

xpath

html-select

casperjs