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

Question

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

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

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

这是生成的 HTML 的样子

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

Answer 1

由于您在form中有 ComboBox ，因此您可以使用 ComboBox 定义中的“名称”属性并选择它：

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

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

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

或者

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

Answer 2

如果没有测试，我会建议，

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