TUTORIAL

White: An automation Framework for windows application

Posted by Jawed MD Tutorials | Testing December 01, 2011
This article exposes how to use White framework for UI automation of Windows application and how to create Automation test script using White.
Reader Level:
Download Files:
 

Introduction

In the era of technology it's not so difficult to automate windows/web applications. On internet you will find loads of Open source/commercial tool available to help us achieve our goal of automation. But out of that only few would provide support for Win32, Win Forms, WPF, Silverlight application as well as for basic applications UI automation. and white framework is one of the few which I'm going to target for our automation purpose.so, In this article I will take an example of calculator which is best for window application automation to explain how we can use white to achieve our UI automation goal. Here I'm targeting the automation testers who are new to white.

White Framework

White is open-source, written in C# and it supports all rich client applications, which are Win32, Win Form, WPF and SWT (java). It is .NET based and does not require the use of any proprietary scripting languages. It provides a consistent object oriented API and it hides all the complexity of Microsoft's UI Automation library and Win32 Windows messages.
For more information on white framework you can visit below links:

  1. http://white.codeplex.com/
  2. http://www.scip.be/index.php?Page=ArticlesNET19
  3. http://white.codeplex.com/wikipage?title=Layers&referringTitle=Home
  4. http://blog.benhall.me.uk/2008/02/project-white-automated-ui-testing.html
  5. http://white.codeplex.com/wikipage?title=Get%20Started&referringTitle=Home

White Interaction with Application:

White1.png

The white framework will interact to an application through UI elements. So, you have to be ready with some UI elements inspection tool to find out the Automation ID and many more properties, for that purpose you can use UISpy and VisualUIAVerify.

UISpy is a standalone executable which enables developers to view all UI elements and their details.

But I personally preferred VisualUIAVerify. Which am I found very handy and comfortable to use.

VisualUIAVerify:

With the Visual UIA Verify, you can quickly find and select any UI element anywhere on the desktop. Based on the specific control type and the supported control patterns, UIA Verify provides the built-in test scenarios prioritized for the particular UI element. Developers can add additional test scenarios by adding the code to the UIA Test Library. The tool can output the test results or the summary in various forms. Visual UIA Verify can output test details in HTML.

You can download VisualUIAVerify from below link:

http://uiautomationverify.codeplex.com/

After starting VisualUIAVerify a UI Automation tree will be displayed. The root element represents the current desktop and the child elements represent application windows. Each of these child elements contain UI elements such as menus, buttons, radiobuttons, textboxes, toolbars, listboxes, ... 

Refer below snap shot.

White2.png

Detailed information about the UI element is displayed in the Properties panel(below screen shot). When you want to access a UI element via White, then you need to know the AutomationId, ControlType and Name.

White3.PNG

Now it's enough explaining about VisualUI. It's time to come at point without rolling here and there.

Getting Started:

The API of White is very user-friendly. You can get the benefit of this framework quickly.to start working with white.

I have developed this demo project using console application. Now let's start our coding to explain bit in details.


1. Download the latest white dll from this location http://white.codeplex.com/releases

2. Unzip the white folder

3. Open your project and select it as Console application, name it as TestWhiteCalculator

4. Now we have to add the references to our project as below(See below Snap Shot for the details):

  • Open your Solution Explorer
  • Right click on References folder
  • Select Add references
  • Goto the folder where we have unzipped the White framework.
  • Select the below dll's :

    • White.Core.dll
    • Bricks.dll
    • Bricks.RuntimeFramework.dll
    • Castle.Core.dll
    • Castle.DynamicProxy2.dll

    White4.gif

5. In the WhiteCalculatorTest.cs file add the below references

  • using White.Core.Factory;
  • using White.Core.UIItems.Finders;
  • using White.Core.InputDevices;

6. Finally we are done with all formalities. Now we will start our main part

7. Launch calculator through white:

// source exe file path. here it is calculator exe path
        private const string ExeSourceFile = @"C:\Windows\system32\calc.exe";
        //Global Variable to for Application launch
        private static White.Core.Application _application;
//Global variable to get the Main window of calculator from application.
        private static White.Core.UIItems.WindowItems.Window _mainWindow;

       //strat process for the above exe file location
       var psi = new ProcessStartInfo(ExeSourceFile);
       // launch the process through white application
       application = White.Core.Application.AttachOrLaunch(psi);


To launch a calculator I have used and process for the same. And we will force the white application as White.Core.Application.AttachOrLaunch(psi) to lunch or attached our process which we have start for calculator.

8. Now we will get the control of calculator window to perform our operation on calculator. we have to get the control of the window on which we want to do some operation. Here in our case it is calculator.

//Get the window of calculator from white application
_mainWindow = _application.GetWindow(SearchCriteria.ByText("Calculator"), InitializeOption.NoCache);

9. When you run the above piece of code you can see that this will open calculator. On opened calculator we try perform our first operation:

I. Through White Use Key Board To Operate Calculator:

To achieve this the white has provide a functionality as WindowsAPI

Like White.Core.WindowsAPI.KeyboardInput

We will write a piece of code which will convert the calculator in date difference mode. Through which we can find out the difference between dates provided on calculator.

/// <summary>
        /// Find difference between dates through calculator
        /// </summary>
        private static void DateDifferenceCalculation()
        {
            Keyboard.Instance.HoldKey(White.Core.WindowsAPI.KeyboardInput.SpecialKeys.CONTROL);
            Keyboard.Instance.Enter("E");
            Keyboard.Instance.LeaveKey(White.Core.WindowsAPI.KeyboardInput.SpecialKeys.CONTROL);
            //On Date window find the difference between dates.
            //Set value into combobox
            var comboBox = _mainWindow.Get<White.Core.UIItems.ListBoxItems.ComboBox>(SearchCriteria.ByAutomationId("4003"));
            comboBox.Select("Calculate the difference between two dates");
            //Click on Calculate button
            White.Core.UIItems.Button caclButton =
                _mainWindow.Get<White.Core.UIItems.Button>(SearchCriteria.ByAutomationId("4009"));
            caclButton.Click();
        }

To convert our open calculator in date difference mode using short cut Hot, we have to just press (Ctrl+E) and the calculator would get converted in to Date Difference mode.

Keyboard
.Instance.HoldKey(White.Core.WindowsAPI.KeyboardInput.SpecialKeys.CONTROL);

            Keyboard.Instance.Enter("E");

After changing we have to leave the pressed Ctrl key. Otherwise in windowsAPI will still hold the Ctrl Key.

Keyboard.Instance.LeaveKey(White.Core.WindowsAPI.KeyboardInput.SpecialKeys.CONTROL);

Now we will access the combo box to select the appropriate option to perform our operation.

            var comboBox = _mainWindow.Get<White.Core.UIItems.ListBoxItems.ComboBox>(SearchCriteria.ByAutomationId("4003"));
            comboBox.Select("Calculate the difference between two dates");


After selecting the above option we will click on Calculate button. By default you can notice that it will calculate the difference between from and To Date and both date would Current Dates. Even you can change this date through white on calculator. To time being we will continue with default value provide in to from and to.

_mainWindow.Get<White.Core.UIItems.Button>(SearchCriteria.ByAutomationId("4009"));
            caclButton.Click();

As soon as the Calculate button will get press we can the result on Difference filed.

You can refer below Snap shot.

White5.PNG

ii. Return to Basic Calculator Mode:

We will try to achieve this through 2 functionality of White.

  • Using Key Board Hot Key:

  • Using Calculator Menu option

Using Key Board Hot Key:

/// <summary>
        /// Change the calculator mode in basic using Key Board Hot Key
        /// </summary>
        private static void ReturnToBasicCalculatorUsingHotKey()
        {

Keyboard.Instance.HoldKey(White.Core.WindowsAPI.KeyboardInput.SpecialKeys.CONTROL);
            Keyboard.Instance.PressSpecialKey(White.Core.WindowsAPI.KeyboardInput.SpecialKeys.F4);
            Keyboard.Instance.LeaveKey(White.Core.WindowsAPI.KeyboardInput.SpecialKeys.CONTROL);
        }

Using Calculator Menu option

Refer below snap to understand Manual process.

White6.png

      /// <summary>
        /// Operate the Calculator in to basic mode through Menu option
        /// </summary>
        private static void ReturnToBasicCalculatorUsingMenu()
        {
            var menuView = _mainWindow.Get<White.Core.UIItems.MenuItems.Menu>(SearchCriteria.ByText("View"));
            menuView.Click();
            //select Basic
            var menuViewBasic = _mainWindow.Get<White.Core.UIItems.MenuItems.Menu>(SearchCriteria.ByText("Basic"));
            menuViewBasic.Click();
 
        }

           
Step 1: Click on Menu option (View) of calculator at top of calculator

var menuView = _mainWindow.Get<White.Core.UIItems.MenuItems.Menu>(SearchCriteria.ByText("View"));
menuView.Click();

Step 2: When View options dropped. Then click on Basic option to convert the calculator into Basic Mode.

            //select Basic
            var menuViewBasic = _mainWindow.Get<White.Core.UIItems.MenuItems.Menu>(SearchCriteria.ByText("Basic"));
            menuViewBasic.Click();


iii. Open helps File from calculator:

To achieve this we will use below piece of code to do that.

The code is self-explanatory.

/// <summary>
        /// Open help File from calculator menu
        /// </summary>
        private static void OpenHelpOptionInCalculator()
        {
            //Click on Help at Menu item
            var help = _mainWindow.Get<White.Core.UIItems.MenuItems.Menu>(SearchCriteria.ByText("Help"));
            help.Click();
            //Click on View Help guide to open new window from menu bar
            var viewHelp = _mainWindow.Get<White.Core.UIItems.MenuItems.Menu>(SearchCriteria.ByText("View Help"));
            viewHelp.Click();
        }

iv. Perform summation on calculator through White:

In this demo we will add two numbers (1234 and 5678) and will get result after that we will compare the result to check whether we calculator is working perfectly fine or not.

We will read all the keys of the calculator to press the desire key through white, Here I m going with text instead of Automation Id :

//Button with Numerical value 1
            White.Core.UIItems.Button btn1 = _mainWindow.Get<White.Core.UIItems.Button>(SearchCriteria.ByText("1"));
            //Button with Numerical value 2
            White.Core.UIItems.Button btn2 = _mainWindow.Get<White.Core.UIItems.Button>(SearchCriteria.ByText("2"));
            //Button with Numerical value 3
            White.Core.UIItems.Button btn3 = _mainWindow.Get<White.Core.UIItems.Button>(SearchCriteria.ByText("3"));
            //Button with Numerical value 4
            White.Core.UIItems.Button btn4 = _mainWindow.Get<White.Core.UIItems.Button>(SearchCriteria.ByText("4"));
            //Button with Numerical value 5
            White.Core.UIItems.Button btn5 = _mainWindow.Get<White.Core.UIItems.Button>(SearchCriteria.ByText("5"));
            //Button with Numerical value 6
            White.Core.UIItems.Button btn6 = _mainWindow.Get<White.Core.UIItems.Button>(SearchCriteria.ByText("6"));
            //Button with Numerical value 7
            White.Core.UIItems.Button btn7 = _mainWindow.Get<White.Core.UIItems.Button>(SearchCriteria.ByText("7"));
            //Button with Numerical value 8
            White.Core.UIItems.Button btn8 = _mainWindow.Get<White.Core.UIItems.Button>(SearchCriteria.ByText("8"));
            //Button with text as +(for sum)
            White.Core.UIItems.Button btnSum = _mainWindow.Get<White.Core.UIItems.Button>(SearchCriteria.ByText("Add"));
            //Read button to get the result
            White.Core.UIItems.Button btnResult = _mainWindow.Get<White.Core.UIItems.Button>(SearchCriteria.ByText("Equals"));
 

Press our 1st number 1234

  //Type First Numbers 1234
  btn1.Click();
  btn2.Click();
  btn3.Click();
  btn4.Click();

Press on button Add to add 2nd number.

//Press Add button
btnSum.Click();

Now we will provide our 2nd Number:

//Type 2nd number
btn5.Click();
btn6.Click();
btn7.Click();
btn8.Click();

We will press on Result button (=) to get the result

//Get the result
btnResult.Click();

After we will get the result from the display on calculator

     //read the result
White.Core.UIItems.Label resultLable= _mainWindow.Get<White.Core.UIItems.Label>(SearchCriteria.ByAutomationId("150"));

 And finally we will compare our result.

string result = resultLable.Text;
Assert.AreEqual("6912", result,"Sorry Summation is wrong!!");

We are done with the Automation of calculator using White Framework.

Enjoy Using White Framework.

Background:

This article is inspired from below link. Which trigger me write one article over here on white framework.

http://www.scip.be/index.php?Page=ArticlesNET19 

Caution:

If you are using VS2010 then please change the Target framework to ".Net Framework 4" under Application Tab. To get this option go to properties of your project tree node.

Be default in vs2010 the Target framework will be ".Net Framework 4 client profile". On running white code in this mode it will through a build exception as "The type or namespace name 'White' could not be found (are you missing a using directive or an assembly reference?) ",Even though you have added the white name space.

References:

  1. http://white.codeplex.com/

  2. http://www.scip.be/index.php?Page=ArticlesNET19

  3. http://jawedm.blogspot.com/



 

COMMENT USING

Trending up