使用ExtJS和CasperJS開發測試combobox

Question

我使用ExtJs 4.1開發了我的應用程序。我有一個使用Ajax調用填充的組合框。一旦組合框填充後，我需要按名稱找到一個項目，然後首先選擇該項目的選擇事件。

問題是組合框由ExtJS呈現的方式。我不知道如何以正確的方式選擇一個項目。 CombBox實際上不是<select>元素，而是text input，它具有位於文檔樹底部的分離下拉列表。

我不想硬編碼的ID作爲ExtJS隨機生成的ID。

這是生成的HTML的外觀

您可以檢查here

Answer 1

未經測試，我建議ExtJS的組合框的例子，

var x = require("casper").selectXPath; 

casper.thenClick(".x-form-trigger.x-form-arrow-trigger") 
    .wait(100) 
    .thenClick(x("//li[contains(@class,'x-boundlist-item') and contains(text(),'Alaska')]")) 
    .wait(100, function(){ 
     this.capture("screenshot.png"); 
    }); 

您也可能在點擊之前需要將鼠標移動到位置。使用

casper.then(function(){ 
    this.mouse.move(selector) 
}); 

Answer 2

既然你有一個形式組合框，你可以在ComboBox定義中使用「名」財產，並選擇它：

Ext.getCmp("idOfThePanel").down('form').getForm().findField('name'); 

另一種選擇，使用「參考」財產。在這種情況下，我不知道這是選擇ComoBox正確的方法：

Ext.getCmp("idOfThePanel").down('form').getForm().lookupReference('reference'); 

或

Ext.getCmp("idOfThePanel").lookupReference('reference');