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

【问题标题】：Testing combobox developed using ExtJS with CasperJS测试使用 ExtJS 和 CasperJS 开发的组合框
【发布时间】：2016-03-04 17:15:56
【问题描述】：

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

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

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

这就是生成的 HTML 的样子

你可以查看ExtJs组合框here的例子

【问题讨论】：

标签： javascript extjs css-selectors casperjs browser-testing

【解决方案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)
});

【讨论】：

【解决方案2】：

由于您在 form 中拥有 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');

【讨论】：

这就是我包含 extjs 的方式。 casperjs test --include=ext-all.js testFile.js。在包括 ext 参考之后，我可以说var component = Ext.getCmp('component-id')。但是component 仍然是undefined。