Add UIA Tree Dump Tests to E2E Tests for Fabric

change/@react-native-windows-automation-channel-80fea2ea-3605-4532-b29a-63abf6e8993e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Save State: UIA Dump Tests",
+  "packageName": "@react-native-windows/automation-channel",
+  "email": "34109996+chiaramooney@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-27cf6bad-6a19-47b5-abd2-f1280c3115a8.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Save State: UIA Dump Tests",
+  "packageName": "react-native-windows",
+  "email": "34109996+chiaramooney@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/e2e-test-app-fabric/test/ButtonComponentTest.test.ts

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ */
+
+import {dumpVisualTree} from '@react-native-windows/automation-commands';
+import {goToComponentExample} from './RNTesterNavigation';
+import {verifyNoErrorLogs} from './Helpers';
+import {app} from '@react-native-windows/automation';
+
+beforeAll(async () => {
+  await goToComponentExample('Button');
+});
+
+afterEach(async () => {
+  await verifyNoErrorLogs();
+});
+
+describe('Button Tests', () => {
+  test('Buttons have default styling', async () => {
+    const component = await app.findElementByTestID('button_default_styling');
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('button_default_styling');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Buttons can have custom colors', async () => {
+    const component = await app.findElementByTestID('cancel_button');
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('cancel_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Buttons can be disabled', async () => {
+    const component = await app.findElementByTestID('disabled_button');
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('disabled_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Buttons can have accessibility labels', async () => {
+    const component = await app.findElementByTestID(
+      'accessibilityLabel_button',
+    );
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('accessibilityLabel_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Buttons can have accessibility states', async () => {
+    const component = await app.findElementByTestID(
+      'accessibilityState_button',
+    );
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('accessibilityState_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Buttons can have accessibility props', async () => {
+    const component = await app.findElementByTestID('accessibility_props');
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('accessibility_props');
+    expect(dump).toMatchSnapshot();
+  });
+});

packages/e2e-test-app-fabric/test/HomeUIADump.test.ts

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ */
+
+import {app} from '@react-native-windows/automation';
+import {verifyNoErrorLogs} from './Helpers';
+import {dumpVisualTree} from '@react-native-windows/automation-commands';
+
+type RNTesterExampleModule = {
+  title: string;
+  description: string;
+};
+
+type RNTesterModuleInfo = {
+  key: string;
+  module: RNTesterExampleModule;
+};
+
+type RNTesterList = {
+  APIs: RNTesterModuleInfo[];
+  Components: RNTesterModuleInfo[];
+};
+
+const testerList: RNTesterList = require('@react-native-windows/tester/js/utils/RNTesterList');
+
+const apiExamples = testerList.APIs.map(e => e.module.title);
+const componentExamples = testerList.Components.map(e => e.module.title);
+
+afterEach(async () => {
+  await verifyNoErrorLogs();
+});
+
+describe('Home UIA Tree Dump', () => {
+  test('Components Tab', async () => {
+    const componentsTabButton = await app.findElementByTestID('components-tab');
+    await componentsTabButton.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('components-tab');
+    expect(dump).toMatchSnapshot();
+  });
+  test('APIs Tab', async () => {
+    const apisTabButton = await app.findElementByTestID('apis-tab');
+    await apisTabButton.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('apis-tab');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Search Bar', async () => {
+    const component = await app.findElementByTestID('explorer_search');
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('explorer_search');
+    expect(dump).toMatchSnapshot();
+  });
+  for (const component of componentExamples) {
+    test(component, async () => {
+      const componentsTabButton = await app.findElementByTestID(
+        'components-tab',
+      );
+      await componentsTabButton.click();
+      const componentTile = await app.findElementByTestID(component);
+      await componentTile.waitForDisplayed({timeout: 20000});
+      const dump = await dumpVisualTree(component);
+      expect(dump).toMatchSnapshot();
+    });
+  }
+  for (const api of apiExamples) {
+    test(api, async () => {
+      const apisTabButton = await app.findElementByTestID('apis-tab');
+      await apisTabButton.click();
+      const apiTile = await app.findElementByTestID(api);
+      await apiTile.waitForDisplayed({timeout: 20000});
+      const dump = await dumpVisualTree(api);
+      expect(dump).toMatchSnapshot();
+    });
+  }
+});
+
+export {};

packages/e2e-test-app-fabric/test/PressableComponentTest.test.ts

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ */
+
+import {dumpVisualTree} from '@react-native-windows/automation-commands';
+import {goToComponentExample} from './RNTesterNavigation';
+import {verifyNoErrorLogs} from './Helpers';
+import {app} from '@react-native-windows/automation';
+
+beforeAll(async () => {
+  await goToComponentExample('Pressable');
+});
+
+afterEach(async () => {
+  await verifyNoErrorLogs();
+});
+
+describe('Pressable Tests', () => {
+  test('Pressables can change text on press/rest, state rest', async () => {
+    const component = await app.findElementByTestID('pressable_press_console');
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('pressable_press_console');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Pressables can have event handlers', async () => {
+    const component = await app.findElementByTestID(
+      'pressable_feedback_events_button',
+    );
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('pressable_feedback_events_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Pressables can have delayed event handlers', async () => {
+    const component = await app.findElementByTestID(
+      'pressable_delay_events_button',
+    );
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('pressable_delay_events_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Pressables can have hit slop functionality', async () => {
+    const component = await app.findElementByTestID(
+      'pressable_hit_slop_button',
+    );
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('pressable_hit_slop_button');
+    expect(dump).toMatchSnapshot();
+  });
+  // Disable tests which don't exist upstream. TestId cannot be found.
+  /*test('Pressables can have ranging opacity', async () => {
+    const component = await app.findElementByTestID('opacity_pressable');
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('opacity_pressable');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Pressables can have their accessibility and keyboard focus removed', async () => {
+    const component = await app.findElementByTestID('accessible_pressable');
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('accessible_pressable');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Pressables can have tooltips', async () => {
+    const component = await app.findElementByTestID('tooltip_pressable');
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('tooltip_pressable');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Pressables can hide their children from accessibility focus', async () => {
+    const component = await app.findElementByTestID('no_hide_pressable');
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('no_hide_pressable');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Pressables can hide their backface', async () => {
+    const component = await app.findElementByTestID('backface_pressable');
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('backface_pressable');
+    expect(dump).toMatchSnapshot();
+  });*/
+});

packages/e2e-test-app-fabric/test/ScrollViewComponentTest.test.ts

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ */
+
+import {dumpVisualTree} from '@react-native-windows/automation-commands';
+import {goToComponentExample} from './RNTesterNavigation';
+import {verifyNoErrorLogs} from './Helpers';
+import {app} from '@react-native-windows/automation';
+
+beforeAll(async () => {
+  await goToComponentExample('ScrollView');
+});
+
+afterEach(async () => {
+  await verifyNoErrorLogs();
+});
+
+describe('ScrollView Tests', () => {
+  // Disable tests where testID is not found.
+  /*test('ScrollViews can scroll an item list vertically', async () => {
+    const component = await app.findElementByTestID('scroll_vertical');
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('scroll_vertical');
+    expect(dump).toMatchSnapshot();
+  });*/
+  test('ScrollView has scrollTo method, scroll to top button', async () => {
+    const component = await app.findElementByTestID('scroll_to_top_button');
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('scroll_to_top_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('ScrollView has scrollTo method, scroll to bottom button', async () => {
+    const component = await app.findElementByTestID('scroll_to_bottom_button');
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('scroll_to_bottom_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('ScrollViews has flash scroll indicators', async () => {
+    const component = await app.findElementByTestID(
+      'flash_scroll_indicators_button',
+    );
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('flash_scroll_indicators_button');
+    expect(dump).toMatchSnapshot();
+  });
+  // Disable tests where testID is not found.
+  /*test('ScrollViews can scroll an item list horizontally', async () => {
+    const component = await app.findElementByTestID('scroll_horizontal');
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('scroll_horizontal');
+    expect(dump).toMatchSnapshot();
+  });*/
+  test('ScrollView has scrollTo method, scroll to start button', async () => {
+    const component = await app.findElementByTestID('scroll_to_start_button');
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('scroll_to_start_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('ScrollView has scrollTo method, scroll to end button', async () => {
+    const component = await app.findElementByTestID('scroll_to_end_button');
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('scroll_to_end_button');
+    expect(dump).toMatchSnapshot();
+  });
+  // Disable tests where testID is not found.
+  /*test('ScrollViews can have sticky headers', async () => {
+    const component = await app.findElementByTestID('scroll_sticky_header');
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('scroll_sticky_header');
+    expect(dump).toMatchSnapshot();
+  });
+  test('ScrollViews can have multiple sticky headers', async () => {
+    const component = await app.findElementByTestID('scroll_multiple_sticky_headers');
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('scroll_multiple_sticky_headers');
+    expect(dump).toMatchSnapshot();
+  });
+  test('ScrollViews can have pressable sticky headers', async () => {
+    const component = await app.findElementByTestID('scroll_pressable_sticky_header');
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('scroll_pressable_sticky_header');
+    expect(dump).toMatchSnapshot();
+  });*/
+});