Using the GameDriver Slate Explorer for Unreal Engine

Learn how to use the GameDriver Slate Explorer to work with UMG/Slate widgets in Unreal Engine

The July 2024 release of GameDriver includes the powerful new Slate Explorer tool which will help you identify UMG/Slate Widgets and User interface elements within your game.  

Our Slate Explorer shows a tree hierarchy of your current widgets, allows you to determine the HierarchyPath of each widget (for use in GameDriver tests), search the widgets, and even see the values of primitive properties of selected widgets.

GameDriver’s Slate Explorer

This hierarchy of widgets will be familiar to anyone using Unreal’s Widget Reflector (shown below). 

Unreal Widget reflector

Getting a HierarchyPath for a Widget. 

When writing tests you will eventually want to inspect a Slate/UMG widget to determine if some visual aspect of the widget is as expected (text value, color, visibility, etc). 

In the Slate Explorer, you can right-click on any element to auto-generate a HierarchyPath that identifies it. For example, we want to inspect a particular nested TextBlock highlighted in both photos. To get the HierarchyPath we right-click on the item in the hierarchy and choose Absolute or Relative.

If there was only one TextBlock_190 in the whole scene, we could access it using a Relative path (//) from the root of our scene as follows. 

//TextBlock_190

However, using the Absolute path affords more power and flexibility since you can reference widgets by their parents, descendants, regular expressions, and more. The Absolute Path generated by the plugin includes the complete hierarchy. In our case you can see it’s rather long, which is typical because UI layouts are built from many nested Slate components:

/*[contains(@name,'simpleButton_C')]/CanvasPanel_0/*[contains(@name,'draggableImage')]/CanvasPanel_0/VerticalBox_0/VerticalBox_1/Overlay_0/VerticalBox_2/HorizontalBox_0/TextBlock_190

//*[contains(@name,'draggableImage')]//TextBlock_190

Accessing a Text value in a UMG/Slate Widget

Now that we can select the element, we can delve deeper to access the internal fields of the Widget. In our case TextBlock_190 is a STextBlock, so we could read the Unreal documentation to determine that it holds its text within a property named Text. Alternatively, we can use the Slate Explorer by selecting the Widget, and searching through its properties. In our example, we can not only see the FText property but note that its value is “Actor Inspector”.

We can right-click to generate a HierarchyPath to the field.

Essentially, it appends a @FieldName to the current HierarchyPath for the Widget. So we can simplify the full HPath generated as above to:

//*[contains(@name,'draggableImage')]//TextBlock_190/@Text

You can enter the above HPath in the HPath Debugger and click run to see the value, “Actor Inspector” shown below. The HPathDebugger is a great place to play around with HPaths to get quick feedback on the selector you want. Normally clicking Run should suffice, but you can also step through once you get a bit more involved in Hpath. 

In your C# test class you can now reference the widget and access its fields using the Hpath we’ve been talking about. In the API call, you have to specify the type of the Field. For simplicity both FText and FString return as a string.

string displayedString = api.GetObjectFieldValue<string>("//*[contains(@name,'draggableImage')]//TextBlock_190/@Text");

Note: There’s a second version of GetObjectFieldValue where the field name is passed as a separate value. This is particularly useful if the field name contains a space.

string displayedString = api.GetObjectFieldValue<string>("//*[contains(@name,'draggableImage')]//TextBlock_190", "Text");