UI Control Locator
UI Control Locator can be accessed from
1. Coded UI Test Launch Screen
2. Context Menu in Coded UI Test Method
3. From the Test Menu
In all cases, it launches the Coded UI Test Builder Window with Add Assertions tab enabled.
When the UI Control Locator button is clicked (Ctrl+N is the hot key for this action), UI Control Locator Window opens up.
You can drag the crosshair onto a control which you want to add to the UI Control Map. Assertions may be added on properties of controls in the UI Control Map.
e.g:- I have dragged the cross hair on top of the Search Edit box on Live.com and the details are populated as below.
NOTE that i can use the Win+I key (Press the Windows Key and I simultaneously) also to get the details of the focused control. This is required for context menus and other controls which depend on mouse focus to stay on screen.
Now i can click on Add Control and it will get added to the UI Control Map and make the Show Properties button enabled. When I click on the Show Properties button, the Properties of the selected control are shown as below.
I can now choose any property and create an assertion for that property. In this case I have chosen to verify that name of the control is ‘q’.
When i click OK, the Properties window is closed and I see the UI Control Map in the Coded UI Test Builder.
Note that the controls are in bold. This indicates that they have not been saved. (The selected control and associated assertions are saved in-memory). When i click on the Save button, code is generated for them.
Generated Code from UI Control Locator
a. In CodedUITest file, the following lines are added. (in CodedUITestMethod1 {in fact the code is inserted at the current cursor position})
// Validate UIQEdit.Name AreEqual 'q'
Assert.AreEqual("q", UIMap.UILiveSearchWindowsIntWindow.UIHttpwwwlivecomClient.UILiveSearchDocument.UIQEdit.Name);
b. In UIMap.uitest file, an XML representation of the UI Control Map.
c. In UIMap.Designer.cs, the code representation of the UI Control Map.
NOTE: These two files are overwritten everytime UI Control Map is saved. Customizations, if any, will be lost.
d. In UserControls file, class definitions are generated for each type of control used in the UI Control Map.
e.g:- HtmlControl, HtmlDocument and HtmlEdit are created. These specialized classes may be used for hand-coding.
Actions in the UI Control Map
1. It is possible to show the properties of the selected control. (and add assertions on them)
2. Rename a control.
3. Delete a control (If an intermediate node is deleted, all its children are also deleted.)
4. Insert Reference to the control in code – This allows you to perform operations or validate properties of these controls without help from the tool.
5. Expand the selected node and its children.
6. Collapse the selected node and its children.
Other features of UI Control Locator
- When the cross-hair is being dragged, the UI Control Locator window becomes completely transparent. I can drop the cross-hair on a control which is behind it also.
- UI Control Locator maintains a cache of controls, their properties and assertions in memory. Thus I can access the properties of the control even if it is not directly present on the screen. (The control has to be present for adding it (:-)). Also any assertions created will be persisted during the cache lifetime. If I revisit the properties screen, the previously added assertions (in a valid cache) is shown. When the Save button is clicked, the cache is cleared.
- Even though all controls are given default names based on their implementation, it is recommended that you rename them as appropriate. This will enhance the maintainability of your test.
- Sometimes, it may not be possible to directly focus on the control you are interested in. IN this case, drop the crosshair (or use Win+I) to locate a nearby control. Use the navigation buttons on the UI Control Locator to navigate to the selected control neighbors. I have found it to be extremely useful for locating tables or table rows on an Html page.
- If you rename (or delete) an already saved control, its definition is replaced in the UI Control Map. But any assertions which referenced the old control are not replaced. It is the user’s responsibility to ensure that all the old references are replaced. (Compiler will help you with error messages.)
- The top level object in the UI Control Map is named UIMap. All its children will have their names prefixed with UI. This enables you to leverage Intellisense and quickly navigate the UI Control Map.
