Testing ext.js Application

Hi guys,

I’m really new in test automation testing. I played around with Katalon Studio (Recording my interactions with the web application) and like it very much.

Now I got deeper testing our application. Sadly it’s build on ext.js (sorry don’t know the version) and so I have to deal with autogenerated IDs.

e.g. id=“pp-address-field-1497-inputEl”

(1497 is an autogenerated number which changes after every page refresh.)

I tried around with relative xpaths, but sadly the test execusion is not very stable. I mean after testing 4 or 6 times, Katalon couldn’t find the test objects anymore.

Is there a best practice solution how to deal with the autogenerated gui elements?

Thanks for any help you can give me.

hello,
there are 2 approaches that can be combined:
1. ask dev team to add custom attribute so you can refer to it
2. create xpath/css as short as possible starting from nearest stable element on page.
of course combination is best

Similar issue is here

This post is talking about React.js but the dissuccusion applies to other JavaScript frameworks as well including ext.js

1 Like

Thank you for your fast response.

What I understood from the post is that I have the option to discuss with my developer to get another element to identify the object and and the second is to start deep learning of xpath and css.
And that maybe the recorder tool is useless for my web app and I have to create my own test-objects.

Hm, I try to get a talk with my dev-team and then I’ll probably start to improve my xpath and css skills.

I found an very interesting read about Selenium testing of React app

The last post of this URL is most informative for me.

Sep '17
I just built out a whole UI test suite with Selenium. (React/Flux front-end, tests are in C#.)
After a bunch of research, I ended up using id attributes wherever possible, and role/ARIA attributes everywhere else. The benefits:

- no extra attributes to worry about adding and stripping
- role attributes are standardized, simple descriptions of layout structure
- you should have these attributes for accessibility anyway
- no reliance on CSS or tag types

I also like the idea that Selenium is then navigating similarly to potential live users.

Google search by “Selenium testing ext js app” showed me the following read. This article would be useful for you and your Ext.js app developers.

Locating elements in web applications created by Ext JS framework could be a total nightmare for UI automators, as Ext JS generates one of the most complex DOM structures which have dynamic IDs with a large amount of duplicate class names.

Unlike automating applications with simple DOM structures, Selenium WebDriver’s built-in methods like By.Id, By.ClassName, By.Name would barely identify anything in Ext JS applications. In most of the cases, By.CssSelector or By.XPathwill be neccessary, even though using them are not that straightforward either.

Hopefully this article would help developers write the most concise meaningful and human readable locators, so that maintenance cost can be kept minimum when automating ExtJS applications.

I was impressed with the following sentence at the end of this article, in the Ultimate Solution section:

Web designers can add class names to HTML in order to make styling easier. Developers should add class names to HTML for UI testing purposes too!

This would be a practical way for developers and testers to compromise and cooperate well.

Andreas,

And that maybe the recorder tool is useless for my web app and I have to create my own test-objects.

Not appropriate to say “the recorder tool is useless” any longer. Correction needed.

Yes, in later July 2018, I wrote “I think Katalon’s Recorder and Spy does not help much”. We had Katalon Studio 5.6.x at that time.

But soon after that, Katalon Studio 5.7.x was released. The 5.7.0 added support of “Smart XPath Generater”. The recorder tool empowered by “Smart XPath Generater” in 5.7.0 and later may be useful for testing your ext.js app, though I haven’t checked the “Smart XPath Generater” in depth for testing apps powered by javascript frameworks myself. I am not very sure about it.

Andreas,

If you do evaluate “Smart XPath Generator” against your ext.js based webapp, please share your experiences and findings here. It would be a great help for us.

Kazurayam,

yes I heard and read a lot about the Smart XPath Generater, about the relative XPaths.

I also thought, yes this would be great and my problem is solved, but I had the feeling that it helps for few testing sessions and after them the test objects couldn’t be identified anymore.

I guess my problem is, that the web gui doesn’t have any stable gui element, so it’s hard for the Smart XPath Generator to find the correct element. Sadly I have not documentation about my testing session with using the relative xpaths.

Our current solution is, that the developer overwrites the ext.js ID by setting a combination of classname and name to generate a unique ID.

e.g.
a combobox is now coded like:

<input id="pp-status-field_status__ES_Model.Models.ObjectCatalog.ReportingPlatform.Job-inputEl" type="text" role="combobox" class="x-form-field x-form-required-field x-form-text x-form-focus x-field-form-focus x-field-default-form-focus" autocomplete="off" name="status" data-errorqtip="" style="background-color: white; width: 100%;">

I know it doesn’t look nice and looks like a big hack, but so I’m able to identify the gui object by the id value.

a combobox without modifcation looks like:

<input id="pp-keyword-field-1495-inputEl" type="text" role="combobox" class="x-form-field x-form-required-field x-form-text x-form-focus x-field-form-focus x-field-default-form-focus" autocomplete="off" name="pp-keyword-field-1495-inputEl" data-errorqtip="" style="width: 100%;">

Andreas,

Thank you for the response.

<input id="pp-status-field_status__ES_Model.Models.ObjectCatalog.ReportingPlatform.Job-inputEl"
    type="text" role="combobox" 
    class="x-form-field x-form-required-field x-form-text x-form-focus x-field-form-focus x-field-default-form-focus" 
    autocomplete="off" name="status" data-errorqtip="" style="background-color: white; width: 100%;">

Do you mean the id attribute starting with “pp-status-field” and ending with “inputEl” is stable, is not dynamically changing, is suitable for TestObjests to depend upon?

id attribute starting with “pp-status-field” and ending with “inputEl” is probably stable but not unique.

maybe you’re right and my tests failed because I tested at a early stage of development, where not all ids were set to the classnames.

Sadly in the meantime my developer has to change the id value to another attribute, because he has problems with the “.” in the value itself.

I guess it’s now clear, that I’m really really new to automatic testing. I’m constantly switching my mind on if the developer should change the id value or if I should give relative xpath a chance.

Now I decided to wait for the finally changes of my developer and see if my tests are stable enought with the new “set-id-methode”. If not I’ll have to read more about the relative paths and how to script my tests.

Thanks a lot for your useful links and hints. I’ll inform you, about my efforts, but it’ll take a while :wink:

OK, Good luck!

After studing more about XPath I solved my problem with “contain” and “starts-with” operators.

Thanks again for the help.

What to perform action, in case of standard objects

sorry, can you try to write your question differently?