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

Question

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

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

我不想对ID进行硬编码，因为ExtJS会随机生成ID。

这就是生成的HTML的外观

您可以在此处查看ExtJs组合框的示例

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');

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

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

要么

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