Solve ExtJs dynamic Id generation problem when using Selenium Tool

Question

I am new-bie when it comes to testing and right now I am trying to test a web application and its UI is developed using EXTJS. The problem I am facing is 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 :

Since I am a novice 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.

P.S : I have already mentioned I am a novice. So you can make your answer as elaborate as possible. :-)

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

Answer 2

If I understand your question correctly, you only need to replace the changing URL part with * in your iMacros script. I am not sure if the same approach works in Selenium, too.

http://wiki.imacros.net/FAQ#Q:_A_link_changes_every_time_I_visit_the_web_page_.28.22session_ID.22.29.2C_how_can_I_replay_the_macro_without_error.3F