How to test a User Interface based application page?

A user interface can be described as an interface that allows the users to interact with the system. GUI is an interface that allows the users to interact with the help of images rather than textual commands.

- User interfaces are used in computer systems, other hand held electronic devices such as portable media players, I pads, I pods, cell phones, gaming devices or mp3 players etc.

- An user interface makes the information and actions available to the user through some graphical images or icons and other visual indicators.

- These can be thought of as a kind of secondary notation as contrary to the text based interfaces, text navigation or typed commands.

- Using a graphical user interface, tasks are performed by the direct manipulation of the graphical icons or elements.

- The scope of a GUI is restricted to the two-dimensional display screens that have high display resolutions which are able to describe generic information.

It is a very common problem of how to effectively carry out UI based testing on an application page?

It is always said that user interface testing is very difficult or hard and less possible.But it is not so! What we actually need is the right kind of design.

- With a right and appropriate design, user interface testing becomes as easy as any other kind of testing.

This will become clear with the following example:
- Let’s say a common user interface component like a login page is to be tested.

- The most important thing here is to separate the user interface from the data and the logic.

- This task can be accomplished using can be done with the help of model that follows the view controller design pattern.

- The model is used as the data.

- There is one more thing about which you should be careful.The dependence order of the source code must be expressed in the following order:

View -> controller -> model

- The point of view of testing, this order should not be broken.

- We can say that there is no direct relationship that exists between the model and the controller.

- Neither transitive dependency is allowed nor is direct dependency allowed.

- Here we can merge the controller and model together if we are not going to use the model again.

- Here the controller is aware of model but the model knows nothing of the controller.

- In the case of this login page, we started with a model or controller package and it was observed that the controller mimics the user interface quite well.

- Each entry field was assigned a field and finally each action was assigned a method.

- We know that the view can directly access the controller and all the textual inputs corresponding to their respective fields as per the controller.

- The values are bound to the destination at the run time.

- The login button is then bound to the login method as described in the controller.

- Due to this binding, the controller is effectively separated from the view. So, now testing of the controller can be focused upon.

- Errors are usually discovered in the logic but not in the code.

- This method is 90 percent beneficial.

- Impedance mismatch is not at all desirable since it can cause marshalling of code which can result in the complication of the whole controller.

Drawbacks of the above method
- Though this method is very useful, it can lead to bugs that can be time consuming to rectify.

- The other drawback is that the approach also gets complicated with the complex user interfaces.

- To test complex UI based application pages you need to create additional required components on the go.