ExtJs dynamic Id generation when using Selenium Tool

Question

I am trying to test a web application that's UI is developed using EXTJS. The problem I am facing is that when I try to Record a Macro and automate the Test I have one major problem.

1. ExtJs Ids are dynamic (Say the first time when I record the macro the Id is extj-343 the next time when I try to play the recorded macro the Id does not remain same)

2. So I get a run time exception and the macro does not complete execution.

Solution tried:

I tried iMacro an alternate Testing tool for Selenium and faced the same problem.

As far as my understanding there should be some way to make this Ids static so that the problem can be solved or there should be some work around available.

Answer 1

We use the following overrides for Ext (ver 2.2.1) to get the ids to be what we specify instead of whatever Ext generates. Not sure where we found it, probably the Ext forums.

Ext.override(Ext.Button, {
initButtonEl : function(btn, btnEl){
    this.el = btn;
    btn.addClass("x-btn");

    if(this.id){
        //this.el.dom.id = this.el.id = this.id;
        // override
        btnEl.dom.id = btnEl.id = this.id;
        // end override
    }
    if(this.icon){
        btnEl.setStyle('background-image', 'url(' +this.icon +')');
    }
    if(this.iconCls){
        btnEl.addClass(this.iconCls);
        if(!this.cls){
            btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
        }
    }
    if(this.tabIndex !== undefined){
        btnEl.dom.tabIndex = this.tabIndex;
    }
    if(this.tooltip){
        if(typeof this.tooltip == 'object'){
            Ext.QuickTips.register(Ext.apply({
        target: btnEl.id
    }, this.tooltip));
    } else {
    btnEl.dom[this.tooltipType] = this.tooltip;
    }
    }

    if(this.pressed){
    this.el.addClass("x-btn-pressed");
    }

    if(this.handleMouseEvents){
    btn.on("mouseover", this.onMouseOver, this);
    // new functionality for monitoring on the document level
    //btn.on("mouseout", this.onMouseOut, this);
    btn.on("mousedown", this.onMouseDown, this);
    }

    if(this.menu){
    this.menu.on("show", this.onMenuShow, this);
    this.menu.on("hide", this.onMenuHide, this);
    }

    if(this.repeat){
    var repeater = new Ext.util.ClickRepeater(btn,
    typeof this.repeat == "object" ? this.repeat : {}
    );
    repeater.on("click", this.onClick,  this);
    }

    btn.on(this.clickEvent, this.onClick, this);
}
});
Ext.override(Ext.menu.Item, {
onRender : function(container, position){
    var el = document.createElement("a");
    el.hideFocus = true;
    el.unselectable = "on";
    el.href = this.href || "#";
    if(this.hrefTarget){
        el.target = this.hrefTarget;
    }
    el.className = this.itemCls + (this.menu ?  " x-menu-item-arrow" : "") + (this.cls ?  " " + this.cls : "");
    // override
    if (this.id){
        el.id = this.id;
    }
    // end override
    el.innerHTML = String.format(
            '<img src="{0}" class="x-menu-item-icon {2}" />{1}',
            this.icon || Ext.BLANK_IMAGE_URL, this.itemText||this.text, this.iconCls || '');
    this.el = el;
    Ext.menu.Item.superclass.onRender.call(this, container, position);
}    
});