How to make GWT - GXT applications testable with Selenium?

As you are working on your WEB application, you have learnt to use the GWT, then you wanted nicer UI controls (if you are a Java developer at core) from another framework, 'cause you have not time and interest to tweak (play) with .CSS styles. So, eventually you may end up, like many of us, with the GXT library from Sencha (fromer ExtJS).

And as long as you kept the development within the pure GWT, you managed the IDs and names of your controls. Doing this (all manually hard work) it pays back, because you can easily use the Selenium for testing your application.

"Selenium is a portable software testing framework for web applications. Selenium provides a record/playback tool for authoring tests without learning a test scripting language. Selenium provides a test domain specific language (DSL) to write tests in a number of popular programming languages, including C#, Java, Ruby, Groovy, Python, PHP, and Perl. Test playback is possible in most modern web browsers. Selenium deploys on Windows, Linux, and Macintosh platforms." from Wikipedia, the free encyclopedia.

Now if you use the GXT (official name is called Ext GWT, not to be confused with the old dead framework GWT-Ext) you'll see that all controls have an automatic generated ID (i.e. "x-auto-234") in the class "Component", which is the base of all GXT UI widgets, using the helper function XDOM.getUniqueId().

Now the problem is simple, because the UI widgets have these IDs auto-increment generated, depending of the workflow of your application (which dialogs, windows you open first)  you'll have for sure different IDs for the same controls. You can say, "no problem, we can always overide the IDs, or set the names of the controls" (which is true), but what about the built-in dialogs like MessageBox, which are very "enclosed", and you cannot override or set anything from its implementation?

I found not solution yet, but I'm still digging, so if you have any ideas or solutions, please don't be shy to share them with everybody here, in a small comment !

Cheers and happy testing!

3 comments:

  1. I know that the SmartGWT framework have declared that they support Selenium, so this could be a good example and inspiration for using Selenium with you GXT application.

    Cheers!

    ReplyDelete
  2. Due to the issues GXT alluded to with having multiple components with the same Id, we took the approach of building out all of our UIs with good, descriptive classnames. This not only makes testing easier, but also encourages devs to not add inline styles, but to create proper css declarations to keep things styled correctly.

    When building test cases with selenium, note that the record/playback interface will either only allow ids, or full classpaths. Clearly neither is appropriate for a dynamic application, so when building test cases users will need to either refer to the dom hierarchy in terms of classnames, or modify code to make sure every single component has a totally unique id, yet totally predictable id. This problem is also why it is hard to make magic ui-building interfaces - as long as it is kept very simple, you can sticky with predictable ids and layouts, but once you start to reuse a single component, trouble sets in...

    Look into Selenium 2/WebDriver - they are moving in a direction where the record/playback isn't really available, and instead PageObjects represent the interface, and tests work with those page objects as a sort of DSL. At least in our organization, this should allow devs to maintain components and the PageObjects that represent them, and the testers build out use cases with these components.

    ------------------------
    Colin Alworth

    ReplyDelete
    Replies
    1. Thank you Colin,

      Same thingy I did too -- started to override manually all the interested widget IDs... it's tedious work, but useful... Selenium is dandy.

      Cheers!

      Delete