How to “Outbrain” Selenium Tests with Ext framework

Many of our internal applications were developed using the Extjs framework.

Extjs Is a very powerful JavaScript framework and one of the most popular javascript users interface open source framework, however when it comes to automated test with selenium the real challenge begin.

It is very difficult to write an automated test to Ext application with selenium because Ext generates many <div> and <span> tags with an automatically-generated ID (something like “ext-comp-11xx”). Accessing these tags through Selenium is the big challenge we are trying to solve. We wanted to find a way to get these automatically-generated IDs automatically.
How do we approach this?

Ext has a component manager, where all of the developers’ components are being saved.  We can “ask” the component manager for the component ID by sending it a descriptor of the component. To simplify – we (the selenium server) tell the component manager “I need the ID of the currently visible window which, btw, is labeled as ‘campaign editor'”.

This will look something like:

ComponentLocatorFactory  extjsCmpLoc = new ComponentLocatorFactory(selenuim);

Window testWin = new Window(extjsCmpLoc.createLocator(”campaign editor”Xtype.WINDOW));
Then we can to use Ext window method like close -> testWin.close();

Anther Example :

ComponentLocatorFactory  extjsCmpLoc = new ComponentLocatorFactory(selenuim);

Button newButton = new  Button(extjsCmpLoc.createLocator(“Add Campaign”, ExtjsUtils.Xtype.BUTTON));

newButton.click();

Button newButto

 

You can ask for all of the visible components by type, by label or both:

 

Button newButto

TextField flyfromdate = new TextField( extjsCmpLoc.createLocator(ExtjsUtils.Xtype.DATEFIELD, 0));

flyfromdate.setValue(“10/12/2011”);

TextField flytodate = new TextField(extjsCmpLoc.createLocator(ExtjsUtils.Xtype.DATEFIELD,  1));

flytodate.setValue(“10/31/2011”);

 

Here’s a simple diagram of our solution:

diagram of our solution

link to project in git-hub : https://github.com/simbal/SelenuimExtend

This solution is Open Source. In the meantime, if you have any questions, feel free to contact me directly.

Asaf Levy

27 Comments
  1. Eli

    Very clever. I have struggled in the past to integrate selenium testing with ExtJS and this looks like it neatly solves the problem.

    Can’t wait to see it be released.

    1. asaf

      i never test it on extjs 4 but i think it’s should work because i use extjs-core to find components ids

  2. mano

    Hi

    Is there any demo video or any steps that explains the framework. I am completely new to this and I have downloaded this to my workspace and I saw the whole things in it.

    Could please let me know hoe to get started with it ?

    thanks

    1. asaf

      Hey Ranjit.
      the idea is to use Java class to test extjs with selenium.
      because extjs change the component id and the component hierarchy all the time, you can’t use selenium ide record with my project

  3. Ranjit

    Asaf Thanks for quick reply.

    Really great work.

    ok. Is there ant way to achieve the dynamic id issue through selenium IDE, or any plans around this ?

    Yes agree, but to use this tester must have knowledge of java coding, which is not the case always.

    Can you guide to setup the environment to use this.

    Thanks lot again

  4. Chris

    Asaf,

    Thanks for posting the awesome work! This looks to be a promising automation solution to the Ext bases web application.

    However it does not seem to be working at the moment. I am getting error from Selenium server:

    window.findComponentByText is not a function

    How soon do you think you will be able to finish the implementation? Will you move to Selenium 2.0?

    Thanks,
    Chris

    1. asaf

      we are working on it here in outbrain so i believe in the next 3 weak you will commit a new version with selenium 2 support

  5. Anjana

    Hi Asaf,
    Can you please let us know if this framework supports web driver, coz injectSupportingJavaScript not available for web driver

    Thanks in advance
    Anjana

    1. asaf

      the framework as is not support web driver (selenium 2) .but some one on open source community send me an update code with web-driver support.
      so now i am over it and i will commit it very soon

  6. Ash

    Hi Asaf,

    Great work on the framework!!

    i am getting this error : window.findComponentByText is not a function

    can you help.

    Regards,
    Ash

    1. asaf

      i guess that you use that you use selenium 2 (with webdriver).
      i familiar with this error. and i have solution that i testing.
      you can use older version of selnuim or wait for the next update.(i believe next week)

  7. Farish

    Hey Asaf,

    Is this project still under development? There doesnt seem to be an update since quite some time. A guide on how to use it with WebDriver would be very helpful for beginners.

  8. Pavan

    Hi Asaf,

    Great work man!!
    Can u please let me know when you will supporting the Webdriver.. Very much curious to know.

    Thanks..
    keep up the good work.. 🙂

  9. Bellal Hossain

    Dear Asaf,

    This is major issue to test using extjs application with selenium.
    Main problem is auto generated IDs. I have tired with your plan but I could not solve this problem.
    If you give us a video tutorial than I can solve this problem.

    Best wishes,
    Bellal Hossain

  10. Suma Patil

    Hi Asaf,

    Please Update the status of your effort on the same. Can we use webdriver for this ? Please upload the steps for the setup. I am new to selenium. WE have web application using extjs. i want to do Automation using selenium webdriver for our project. is it possible ?

    Thanks,
    Suma

Leave a Reply to mano Cancel reply

Your email address will not be published.