Testing combobox developed using ExtJS with CasperJS

0
votes

I have developed my application using ExtJs 4.1. I have a combobox which gets populated using Ajax call. Once the comobox is populated, I need to find an item by name and then first the select event for that item.

The problem is the way combo-box is rendered by ExtJS. I am not sure how to select an item in the right manner. CombBox is not really a <select> element but a text input with a detached drop-down list that's somewhere at the bottom of the document tree.

I do not want to hard code the id's as ExtJS randomly generate the id.

This is how the generated HTML looks

enter image description here

You can check the example of ExtJs combobox here

2
javascriptextjscss-selectorscasperjsbrowser-testing

2 Answers

0
votes

Without testing, I would suggest, 

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

You might also need to move the mouse into position before clicking. Use 

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

Since you have the ComboBox in a form, you could use the "name" property in the ComboBox definition and select it with:

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

Another option, use the "reference" property. In this case I'm not sure which is the correct way to select the ComoBox:

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

or

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