ExtJS 6.0.0 GPL is out

Go here: https://www.sencha.com/legal/gpl/, select "Sencha Ext JS" and give your email address.

This version has quite a few feature and performance improvements. https://docs.sencha.com/extjs/6.0/whats_new/6.0.0/whats_new.html

JSmol Widget for ExtJS 5

Screenshot of the Demo Page Running in Google Chrome

Background

Jmol

Jmol is an open-source viewer for three-dimensional chemical structures, with features for chemicals, crystals, materials and biomolecules. Features include reading a variety of file types and output from quantum chemistry programs, and animation of multi-frame files and computed normal modes from quantum programs.

JSmol

JSmol is a JavaScript framework that allows web developers to create pages that utilize either Java or HTML5 (no Java), at will. This enables Jmol to display interactive 3D molecular structures on devices that do not have Java installed, or for which Java is not available (such as smart phones and some tablet computers, e.g. iPad) or has not been installed because of concerns for Java being a security threat.

I have used Jmol for a few years now. But, over the past few years, due to concerns of security threat? Running Java applet in a browse is getting harder and harder. Shelling out money to buy certificate for open source software is, well, at most a hard sell.

So, JSmol to the rescue, pure JavaScript HTML5 application, works on IE, Firefox, Chrome, and even iPad. What is the catch? At least it does not live well with ExtJS on the same web page. You will get weired error messages like 'Uncaught TypeError: Cannot read property '***' of null'. My guess is JSmol has changed prototype of some basic types.

Problem

• Jmol:   can no longer be used in any major browser without compiling with a trusted certificate
• JSmol: not compatible with ExtJS, and I suspect may have problem with a lot of other libraries as well

Solution

iframe! It gives the web page the needed firewall between ExtJS page and JSmol page.

I have implemented a basic ExtJS 5 Widget that will inject an iframe, then inject JSmol code to render molecule models.

Live demo: Example - JSmol Widget for ExtJS 5

Demo page source code:

• JSmolExt_demo.htm
• JSmolExt_demo.js

Widget Source Code:

• JSmolExt.js

This widget takes JmolConfig object, and will pass it along to the JSmol app in the iframe. For details of the parameters, please refer to: Jmol JavaScript Object/Info.

One more thing, the component has a "safe" option. Because the code to inject JSmol to iframe does not work in Firefox and IE 9. If "safe" is true, it will simply set iframe src to a pre-existing page that host JSmol library. I used this page: A bare bone JSmol Demo Page. Problem with my page is that it is static and does not honor the JSmolConfig passed to the widget. Now it is up to you to pass along the JSmolConfig to a dynamic page.

Just for fun, below is a screenshot of Jmol's official demo from one of my computers.

Github Public Repository Created to Illustrate Selenium WebDriver + ExtJS + JUnit

I posted a series about ExtJS testing using Selenium WebDriver and JUnit. They turned out to be pretty popular. Some reader want to see more implementation details. I committed a Github public repository with complete implementation of the core concepts described in my post. Here is the link:
Github Public RepoSJTXE(Selenium Javascript Testing eXtension for ExtJS)

---

Links to my previous posts about Selenium WebDriver + JUnit + ExtJS

Take Screenshot on Failure

Locate ExtJS Component

Wait for AJAX Complete

Examine ExtJS Store Data

Capture ExtJS Ajax Error

sendKeys to combobox, textbox or datefield

Capture Runtime JavaScript Errors

Remeber to Reset IE Zoom

Always Maximize Browser Window

---

By the way, you might also consider testing using Jamine and PhantomJS. They are better for blazing fast unit testing. Not quite fit for GUI testing though.

ExtJS Image Component with Link

Trying to create an image in ExtJS that links to another page? I have tried direct html, button with image src, ... They all have layout problems. The image component seem to work the best, but there is no direct way to put a link in it. Finally, I found a way using the autoEl configuration. It works beautifully.
 See it in action on jsfiddle: http://jsfiddle.net/hnPbm/
See the sample code for more details:

Remeber to Reset IE Zoom (Selenium Web Driver + JUnit + ExtJS)

If you are unlucky as me, you may be doing research of this error message right now:

org.openqa.selenium.remote.SessionNotFoundException: Unexpected error launching Internet Explorer. Browser zoom level was set to 125%. It should be set to 100% (WARNING: The server did not provide any stacktrace information)

Everything was working perfectly, and all tests passed with green color. Then all of a sudden all test cases failed with the error above. It's very a clear error message, and you don't need any research to fix the problem. Just open IE and visit the website under test, then set zoom level to 100%. Then all tests should pass again (of course, only if they were passing before).

However, I do not want to ensure zoom level before every test runs, so I found the following code snippet to ask Selenium WebDriver to ignore IE zoom level:
Things were quiet for a while until I was hit by a strange error message about object not clickable. Of course, when I put it in context, you knew I should check for zoom level immediately. However, in real life, it threw me a big loop, and I spent a good hour researching how to click ExtJS component or related catches that I may not know before. Until, I accidentally saw the zoom level is not 100%. Now after I reset zoom level back to 100%, problem is gone. I imagine WebDriver has some coordinate conversion issue when IE's zoom level is 100%.

So what is the conclusion? Two bullet points for IE testing:

• Do NOT use the code snippet above to ignore zoom level
• Always ensure zoom level is 100%

sendKeys to combobox, textbox or datefield (Selenium Web Driver + JUnit + ExtJS)

In my previous post Locate ExtJS Component (Selenium Web Driver + JUnit + ExtJS), I introduced some code snippets to find an ExtJS component using ComponentQuery. However, the elements located using that approach generally do not accept user input (except mouse click seems to work for button). Turns out ExtJS render these components using a lot of HTML markups wrapping around the real input element. The inputEl is usually the HTML element that accepts user input. So to send keys to them, a slight change is needed from the code I published in the previous post. We will need to drill down 1 level to retrieve HTML id of inputEl, and get its DOM element:

Capture ExtJS Ajax Error (Selenium Web Driver + JUnit + ExtJS)

Here is sample code to check ExtJS Ajax error. It's highly recommended to check this error during teardown(@After), because WebDriver won't automatically capture these problems.

First, need to inject the following JS code to the page under testing:
 Java code to inject the code and to check ExtJS Ajax error:

Examine ExtJS Store Data (Selenium Web Driver + JUnit + ExtJS)

Part of the goal of unit test is to check result against expected values using various assertions. An essential data structure in ExtJS web application is store. So, no test case is complete without some assertion against the stores. For example, we might want to verify number of records, or value of certain column, ... Here are some code samples to access store data, get number of rows, or retrieve value of a column:

Wait for AJAX Complete (Selenium Web Driver + JUnit + ExtJS)

With AJAX, Seleinum testing can have a lot of tricky timing issue. Tests can fail due to slightly delayed AJAX response. Implicit wait solved the problem to some extent, but would be nicer to have a way to wait for all AJAX calls to be finished.

Here is a solution for ExtJS AJAX requests:
Core concept is this JS code: Ext.Ajax.requests && !_.isEmpty(Ext.Ajax.requests). It works for ExtJS 4 only, might change for future or older version of ExtJS due to how AJAX calls are managed.

Locate ExtJS Component (Selenium Web Driver + JUnit + ExtJS)

Selenium WebDriver offers many ways to find an element. You can find it by class, name, partial link text, xpath, css selector, ... However, when it comes to ExtJS component, none of them works very well, because ExtJS page elements tend to be generated dynamically, their xpath/id/... are all moving target. Trying to figure out a repeatable way to locate any of them can be very time consuming and the result is fragile.

Fortunately, as all ExtJS developers should know, Ext.ComponentQuery provides a powerful and very reliable way to find your component. So, the idea is to use Ext ComponentQuery to find the component of interest, then pass it along to WebDriver. Along this line, below is my approach to locate components:

• PageObject owns all the top level components, and specify a ComponentQuery that can uniquely identify them;
• All views or components of interest have their hierarchy represented in the test code, and at each level, they should have a ComponentQuery that can unique identify each of them within the container;
• When it's time to get the element, we should traverse up from element to page, rebuild the fully qualified component query

Ok, some sample code might explain the idea better:

Take Screenshot on Failure (Selenium Web Driver + JUnit + ExtJS)

First a little background: this is the first of a series of lessons I learned using Selenium Web Driver to test ExtJS web application.

It's usually desirable to always take a screenshot when test failed. The concept of JUnit rules makes this an easy task. First, implement a rule as shown below:

Then in your test classes, you just need to declare this rule, then all test methods in it will automatically take screenshot on failure.
The examples here are just for illustration purpose. In real world application, you might make some improvement like:

• Make sure the file name is legal for the OS (for example, the following characters are not allowed in Windows file name: \/:?*<>|\
• Pictures might be further organized into folders by test cases?
• The rule might be declared in a base class so that all test cases have the same behavior without extra boiler plate code

itemId and id in ExtJS

The story: 
Here is a lesson for not reading document thoroughly. My very first ExtJS project goes smoothly until one day I created multiple tabs, and then closed some of them. All of sudden the layout completely messed up. In the debug console, there is null reference error. Call stack is deep in the ExtJS library.

Fast forward, after several hours of digging around, I found out I was using "id" config for several ExtJS controls. Then, close tab action will cause all the controls on the other tabs with the same "id" got deleted from DOM.

Solution:
Use "itemId" instead of "id" config for controls.

Comparison to ASP.NET
Came from ASP.NET world, I guess that is why I was using "id" config without any second thought. Below is a comparison of similar concepts in ASP.NET

ExtJS	ASP.NET	_
itemId	ID	(Recommended) HTML element's ID is automatically generated to ensure uniqueness, usually by concatenating ID of the container hierarchy. Programmer only need to ensure ID is unique within it's container.
id	ClientID	(Not recommended) Rendered HTML element will use this property as their ID. It's programmer's responsibility to ensure it is unique across the whole page (think when you starting to have multiple instances of the same control on a page).

(To check out more ExtJS related posts from me, click here: http://developertips.blogspot.com/search/label/ExtJS)