Cleanup the snapshots in E2E test app (microsoft#13229)

* Cleanup the snapshots

* format

* Process snapshots so that ImageSource Uri's are consistent

* Change files

* fix

* fix

change/@react-native-windows-automation-commands-8efb4ec6-5444-4510-9e8a-2f6e003f55fb.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Process snapshots so that ImageSource Uri's are consistent",
+  "packageName": "@react-native-windows/automation-commands",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-4d35cfde-27d7-409c-903e-1e2bec97cb74.json

@@ -1,5 +1,5 @@
 {
-  "type": "prerelease",
+  "type": "patch",
   "comment": "Preventing crash when passing null children to view with no-hide-descendents",
   "packageName": "react-native-windows",
   "email": "30809111+acoates-ms@users.noreply.github.com",

change/react-native-windows-8440b9f1-4e20-4d1a-a29a-f586164bb919.json

@@ -1,5 +1,5 @@
 {
-  "type": "prerelease",
+  "type": "patch",
   "comment": "Expose ImageProps from ImageComponentView's and add ImageSource type",
   "packageName": "react-native-windows",
   "email": "30809111+acoates-ms@users.noreply.github.com",

change/react-native-windows-b579c25f-abaa-486e-920f-64f3216eaba7.json

@@ -1,5 +1,5 @@
 {
-  "type": "prerelease",
+  "type": "patch",
   "comment": "ViewComponentView should be activatable from rn-win32.dll",
   "packageName": "react-native-windows",
   "email": "30809111+acoates-ms@users.noreply.github.com",

change/react-native-windows-f51acce3-f93a-49cb-955a-38ff1bef4726.json

@@ -1,5 +1,5 @@
 {
-  "type": "none",
+  "type": "patch",
   "comment": "fix(TextInput/isFocused): correctly handle null focused input",
   "packageName": "react-native-windows",
   "email": "nate@bracy.dev",

change/react-native-windows-f53a2b65-d364-49a5-978c-5d64e08c22ea.json

@@ -1,5 +1,5 @@
 {
-  "type": "prerelease",
+  "type": "patch",
   "comment": "Use view() instead of str(), starts_with() instead of _Starts_with()",
   "packageName": "react-native-windows",
   "email": "nate@bracy.dev",

packages/@react-native-windows/automation-commands/src/dumpVisualTree.ts

@@ -33,6 +33,36 @@ export type UIElement = {
   [index: string]: unknown;
 };
 
+export type AutomationNode = {
+  AutomationId?: string,
+  ControlType?: number,
+  LocalizedControlType?: string,
+  __Children?: [AutomationNode],
+}
+
+export type ComponentNode = {
+  Type: string,
+  _Props?: {
+    TestId?: string,
+    Sources?: [{Uri?: string}],
+  },
+  __Children?: [ComponentNode],
+}
+
+export type VisualNode = {
+  Comment?: string,
+  Offset?: `${number} ${number} ${number}`,
+  Size?: `${number} ${number}`,
+  "Visual Type"?: string,
+  __Children?: [VisualNode]
+}
+
+export type VisualTree = {
+  "Automation Tree": AutomationNode,
+  "Component Tree": ComponentNode,
+  "Visual Tree": VisualNode,
+}
+
 declare global {
   const automationClient: AutomationClient | undefined;
 }
@@ -46,9 +76,10 @@ export default async function dumpVisualTree(
     pruneCollapsed?: boolean;
     deterministicOnly?: boolean;
     removeDefaultProps?: boolean;
+    removeGuidsFromImageSources?: boolean;
     additionalProperties?: string[];
   },
-): Promise<UIElement> {
+): Promise<UIElement | VisualTree> {
   if (!automationClient) {
     throw new Error('RPC client is not enabled');
   }
@@ -62,23 +93,67 @@ export default async function dumpVisualTree(
     throw new Error(dumpResponse.message);
   }
 
-  const element = dumpResponse.result;
+  const element: UIElement | VisualTree = dumpResponse.result;
 
-  if (opts?.pruneCollapsed !== false) {
+  if ("XamlType" in element && opts?.pruneCollapsed !== false) {
     pruneCollapsedElements(element);
   }
 
-  if (opts?.deterministicOnly !== false) {
+  if ("XamlType" in element && opts?.deterministicOnly !== false) {
     removeNonDeterministicProps(element);
   }
 
-  if (opts?.removeDefaultProps !== false) {
+  if ("XamlType" in element && opts?.removeDefaultProps !== false) {
     removeDefaultProps(element);
   }
 
+  if (!("XamlType" in element) && opts?.removeGuidsFromImageSources !== false) {
+    removeGuidsFromImageSources(element);
+  }
+
   return element;
 }
 
+function removeGuidsFromImageSourcesHelper(node: ComponentNode) {
+  if (node._Props && node._Props.Sources) {
+    node._Props.Sources.forEach((source : any) => {
+      if (source.Uri) {
+        if (source.Uri.startsWith('blob:')) {
+          source.Uri = source.Uri.replace(/blob:[a-f0-9]+-[a-f0-9]+-[a-f0-9]+-[a-f0-9]+-[a-f0-9]+/, 'blob:<some_guid_here>');
+        } else if (source.Uri.startsWith('https://www.facebook.com/favicon.ico?r=1&t=')) {
+          source.Uri = 'https://www.facebook.com/favicon.ico?r=1&t=<some_hash_here>';
+        } else if (source.Uri.startsWith('https://www.facebook.com/ads/pics/successstories.png?hash=')) {
+          source.Uri = 'https://www.facebook.com/ads/pics/successstories.png?hash=<some_hash_here>';
+        } else {
+
+          // When getting files from a prebuilt bundle the uri is going to include a local path, which would make snapshots inconsistent,
+          // This logic replaces the local path so that we get consistent results.
+          // file://E:\\repos\\react-native-windows\\packages\\e2e-test-app-fabric\\windows\\RNTesterApp-Fabric.Package\\bin\\x64\\Release\\AppX\\RNTesterApp-Fabric\\Bundle\\@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png
+          // becomes
+          // <localOrBundlerUri>@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png
+          const packagesPath = require('path').resolve(__dirname, '../../..').replace(/\\/g, '\\\\');
+          source.Uri = source.Uri.replace(new RegExp(`file://${packagesPath}.*\\\\Bundle\\\\assets/_+`), '<localOrBundlerUri>');
+
+          // When loading the bundle from metro local paths will be replaced with paths to localhost, which will not align with snapshots made with prebuilt bundles.
+          // This logic replaces the localhost uri, with the same uri that we would have gotten from a prebuild bundle.  This makes it easier to debug without breaking snapshots
+          // http://localhost:8081/assets/@@/@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png?platform=windows&hash=c6f5aec4d9e0aa47c0887e4266796224
+          // becomes
+          // "<localOrBundlerUri>@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png"
+          source.Uri = source.Uri.replace(/http:\/\/localhost:8081\/assets\/(@@\/)+/, '<localOrBundlerUri>');
+          source.Uri = source.Uri.replace(/\?platform=windows&hash=[^=]$/, '');
+        }
+      }
+    });
+  }
+  if (node.__Children) {
+    node.__Children.forEach((child : any) => removeGuidsFromImageSourcesHelper(child));
+  }
+}
+
+function removeGuidsFromImageSources(visualTree: VisualTree) {
+  removeGuidsFromImageSourcesHelper(visualTree["Component Tree"]);
+}
+
 /**
  * Removes trees of XAML that are not visible.
  */