UI Automation - How to distinguish image being displayed - xamarin.forms

Question

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
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?

Answer 1

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.