CasperJS to test ExtJS 4.1 application - Ext.getCmp() always returns undefined

Question

I am using capserjs to test my ExtJS 4.1 application. This is how I have made reference to ext.js file

casperjs test --include=ext-all.js testFile.js

If I open console tab on chrome developer toolbar & type Ext.getCmp('id of component'); I get the component back.

But If I do the same thing with in my casperjs test, I always gets undefined.

I was initially trying to get a combobox using Ext.getCmp() which returned undefined, after that I tried finding textbox, labels using Ext.getCmp() and every-time it returned undefined.

I have also tried to use Component query and even that did not worked.

I also looked at this link for help but I am unable to produce desired result.

.then(function(){

     this.wait(5000, function(){
       this.capture('c:\\temp\\cmb.png');
         console.log('-----' + Ext);
       var sqCombo = Ext.getCmp('country-ddl'); // returns the ComboBox components

       sqCombo.setValue('UK'); // set the value
       sqCombo.fireEvent('select'); // because setValue() doesn't trigger the event
     })

   })

with injectJs()

    casper.start(baseUrl, function() {
      this.echo("TITLE : ====> " + this.getTitle());
    })
  casper.then(function(){
    var inject = this.page.injectJs('ext-all.js');
    if(inject){
      console.log('injected');
    }else{
      console.log('cant inject');
    }

     console.log('evaluating');
     this.evaluate(function(){
       console.log(Ext);
       var v = Ext.getCmp('shadowUser').text;
       this.echo('++++++++++++++++++++' + v);
     });
  })

After running the script, I see this on console:

   TITLE : ====> Test App
injected
evaluating
Console: [object Object]
Error: TypeError: 'undefined' is not an object (evaluating 'Ext.getCmp('shadowUser').text')
Error: Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required classes: myApp.view.OptionsView, myApp.view.HelpView, myApp.view.SupportView, myApp.view.AdminView
PASS Title is correct
TESTS COMPLETED

Answer 1

There is no such thing as --include=<script> option. It's called --includes=<scripts>, but this doesn't help you, because it would inject extjs into the outer context which doesn't has access to the page.

You would need to inject the Extjs script when you need it:

casper.then(function(){
    this.page.injectJs('ext-all.js');
    ...
});

If Extjs is already included in the page (judging by available Ext components) then you don't need to inject anything. You should then be able to use it from the page context:

.then(function(){
    this.wait(5000, function(){
        this.capture('c:\\temp\\cmb.png');
        console.log('-----' + Ext);

        this.evaluate(function(){
            var sqCombo = Ext.getCmp('country-ddl'); // returns the ComboBox components

            sqCombo.setValue('UK'); // set the value
            sqCombo.fireEvent('select'); // because setValue() doesn't trigger the event
        });
    })
    .wait(5000, function(){
        this.capture('c:\\temp\\cmb2.png');
    });
})

Keep in mind that Ext is only available in the page context which can be accessed through the sandboxed evaluate() function.