使用ExtJS和CasperJS开发测试组合框

Question

我使用ExtJs 4.1开发了我的应用程序。我有一个使用Ajax调用填充的组合框。一旦填充了comobox，我需要按名称查找项目，然后首先查找该项目的select事件。

问题在于ExtJS呈现组合框的方式。我不确定如何以正确的方式选择项目。 CombBox实际上不是<select>元素，而是带有分离下拉列表的text input，它位于文档树底部的某个位置。

我不想硬编码id，因为ExtJS随机生成id。

这就是生成的HTML的外观

您可以查看ExtJs组合框here

的示例

Answer 1

没有测试，我会建议，

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，你可以使用ComboBox定义中的 “name”属性并选择它：

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

另一种选择，使用 “引用”属性。在这种情况下，我不确定选择ComoBox的正确方法是什么：

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

或

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