Inspecting components

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.

Show methods

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 callJS (see section 52.11).

UI Inspector

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.

The UI Inspector is available for Android and Web applications. As of QF-Test version 7.1, Windows and Swing/AWT are also supported and from version 7.1.3, FX is also supported.

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:

  • Via the menu »Clients«-»Show inspector«.
  • Via the menu entry »Show inspector« in the context menu upon component recording.
  • Via the context menu »Show inspector« of any 'Component' node or any node containing a 'QF-Test component ID' or a SmartID.
  • Web Via the button »Inspector« in the 'Install CustomWebResolver' node.
  • Android In the recording window via the crosshairs-button in the toolbar, see QF-Test Android recording window.

UI Inspector toolbar

The buttons in the toolbar have the following meaning:

Component selection  Select a component to inspect it. During component selection, 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.
HistoryHistory  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.
Reload  Refresh component tree. Updating is required when components have changed or an resolver has been installed.
Show invisible components  Show invisible components in the component tree. Components with visible childs will always be displayed.
Show geometry  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:

    This section covers the basic properties of a component, for example its class.
    General information
    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.

    Web-specific information
    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.

    Android-specific information
    Figure 5.17:   Android-specific information

    Windows-Tests In Windows applications, the information pertains to the Automation Element and includes the most important UI Automation properties. Detailed descriptions of this information can be found in subsection 52.13.1.

    Windows-specific information
    Figure 5.18:   Windows-specific information

    Swing In Swing applications, the UI inspector contains information about the Swing component and its key accessible properties as well as the name, tooltip, and client properties.

    Swing-specific information
    Figure 5.19:   Swing-specific information

    JavaFX In FX applications, the UI inspector contains information about the FX component and its key accessible properties as well as the id, style, tooltip, and client properties.

    FX-specific information
    Figure 5.20:   FX-specific information

    QF-Test specific

    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.

    QF-Test specific information
    Figure 5.21:  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.