Search code examples
xamarin.formsuwpmicrosoft-ui-automationxamarin.uwp

UI Automation - How to distinguish image being displayed

I am very new to UI Automation and using Inspect tool (Inspect.exe Microsoft tool), so please explain.

I have a UWP application showing a list view, each list view item looks like this

enter image description here

The little circle in Image block above is the InteriorColor Image that is a solid color circle (black, gray or brown).

If I use Inspect.exe tool and hover over the little circle InteriorColor Image, it shows AutomationId = InteriorColorIcon which is the name I give it in my XAML:

<Image x:Name="InteriorColorIcon" Source="{Binding InteriorColor, Converter={Static Resource InteriorColorImageConverter}"

Above, bindable property InteriorColor is of string type and I use a converter to convert that string into the image of correct color.

So, if InteriorColor == "black", my converter returns resource image Black.png like:

return new BitmapImage(new Uri("ms-appx:///Black.png"));

I would like to write UI Automation to detect if the little circle InteriorColorIcon image is the image of correct color. If I hover over the image in Inspect.exe tool, it shows its AutomationId = InteriorColorIcon, that is great.

But how do I confirm that the image is Black, or Gray, or Brown?

Is there a way to add somehow a property to the image in XAML that Inspect tool can see and that I can use in my UI test to verify that the image showing is the correct image?

I assume that detecting color would be difficult, but is there a way to add a string property or something along these lines that could be used for this purpose?

Solution

  • Always set the AutomationProperties.Name for an Image. This is necessary for your Image to be read correctly from a screen reader. The Automation Name being "InteriorColorIcon" is an accessibility bug in your app. It should be something more descriptive, such as "Black image" (or whatever a black image indicates). Similarly, you can set the AutomationProperties.AutomationId to something useful to your testing.

    See Expose basic accessibility information 

    <Image x:Name="InteriorColorIcon"
       AutomationProperties.Id="{Binding InteriorColor}"
       AutomationProperties.Name="{Binding InteriorColor}, Converter={Static Resource InteriorColorDescriptiveNameConverter}"
       Source="{Binding InteriorColor, Converter={Static Resource InteriorColorImageConverter}"

    If you want to check the actual image then that's more difficult. You'll need to screencapture the Image's location (see UIA_BoundingRectanglePropertyId) and then compare the pixels of the capture with your reference image.