 |  |  |  |  |  |  |  |
| Version 7.0.5 |
Sometimes it is useful to get extra information about the components saved in the section 'Windows and components' or to view the saved information interacting directly with the application.
It is particularly relevant when mapping components of web applications.
This should be done before starting to write tests, as described in
Improving component recognition with a CustomWebResolver. The UI inspector can be used to
examine the UI elements, currently for Android and web applications.
When working with scripts, it is sometimes helpful to be able to display a list of the methods of a GUI element.
Every GUI object has certain (public) methods and fields which can be accessed in a 'SUT script' as soon as it has access to the object (see subsection 11.2.4). To display these, select the »Show methods for component...« from the context menu of a node below the 'Windows and components' branch or right-click the component itself in component recording mode (see section 4.4).
Web
The methods and fields that are displayed for HTML elements in a browser
cannot be used directly with the object returned by rc.getComponent().
They are JavaScript methods and properties that must be embedded in evalJS
(see section 52.11).
The UI inspector shows the component hierarchy of the client and the properties of every component. This can be useful to resolve component recognition problems. Furthermore, it also makes it easier to set up resolvers thanks to the information displayed in the detailed view.
Currently the UI inspector is available for Android and web clients only.
The node representation in the component tree will already give an overview of the most important information. If the class name (subsection 5.4.1) is written in blue, the component will be considered as interesting. This in turn will determine whether a 'Component' node will be created for the component. In case a generic class (see chapter 59) can be determined, the generic class will be represented in bold. Furthermore the original class will be added in brackets. By default, all generic classes will be regarded as interesting. Invisible components will be displayed in grey.
 | |||
| Figure 5.14: UI Inspector | |||
Opening the inspector
In order to open the UI inspector you have the following possibilities:
UI Inspector toolbar
The buttons in the toolbar have the following meaning:
 | Switch inspector mode on and off. In the inspector mode the record- and check functionality of QF-Test is deactivated. Furthermore actions will not be forwarded to the SUT. That way the information in the UI inspector can be analysed via mouse clicks. | |
  | Navigating in the component tree. Together with inspector mode the history function also gets activated, thus remembering selections made in the UI inspector and the client, which makes it possible to jump forward and backwards in the component tree. | |
 | Refresh component tree. Updating is required when components have changed or an resolver has been installed. | |
 | Show invisible components in the component tree. Components with visible childs will always be displayed. | |
 | Show geometry information in the component tree. |
UI Inspector details
The UI inspector view gives an overview of the most important properties of a component. The view is divided into three sections:
 | |||
| Figure 5.15: General information | |||
The engine-related details cover additional technical information of a component. The information shown differs depending on the technology used.
Web
For web applications it is information about the DOM element, for example the HTML tag,
HTML attributes and the readable text.
 | |||
| Figure 5.16: Web specific information | |||
Android
For Android applications information concerning the content
description, resource ID, package name as well as information about the window type and
its arrangement is shown.
 | |||
| Figure 5.17: Android specific information | |||
The information shown in this section relates to the 'Component' node node. The information can be used to verify whether a resolver works as expected.
 | |||
| Figure 5.18: QF-Test specific information | |||
The detail view can also show information about two different components next to each other, making it easy to compare them. So right click one component in the hierarchy tree and choose »Compare« from the context menu. Via »Reset comparison« in the context menu or via the 'Close' button in the detail view you can leave the comparison mode again.
| | | | | | | Last update: 9/19/2023 Copyright © 1999-2023 Quality First Software GmbH |
