[UI tests] Add accessibility IDs to FancyZones to fix part UI tests (#41316)

<!-- Enter a brief description/summary of your PR here. What does it
fix/what does it change/how was it tested (even manually, if necessary)?
-->
## Summary of the Pull Request
Not sure why some text changed — for example, this button was ‘Launch
layout editor’, but in the UI it now shows as ‘Open layout editor’, so
it can’t be found :
<img width="1159" height="87" alt="image"
src="https://github.com/user-attachments/assets/d407a8fc-2876-4a85-9637-14d5923493d2"
/>

But using accessibility IDs is always more reliable.



<!-- Please review the items on the PR checklist before submitting-->
## PR Checklist

- [ ] Closes: #xxx
- [ ] **Communication:** I've discussed this with core contributors
already. If the work hasn't been agreed, this work might be rejected
- [x] **Tests:** Added/updated and all pass
- [ ] **Localization:** All end-user-facing strings can be localized
- [ ] **Dev docs:** Added/updated
- [ ] **New binaries:** Added on the required places
- [ ] [JSON for
signing](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ESRPSigning_core.json)
for new binaries
- [ ] [WXS for
installer](https://github.com/microsoft/PowerToys/blob/main/installer/PowerToysSetup/Product.wxs)
for new binaries and localization folder
- [ ] [YML for CI
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ci/templates/build-powertoys-steps.yml)
for new test projects
- [ ] [YML for signed
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/release.yml)
- [ ] **Documentation updated:** If checked, please file a pull request
on [our docs
repo](https://github.com/MicrosoftDocs/windows-uwp/tree/docs/hub/powertoys)
and link it here: #xxx

<!-- Provide a more detailed description of the PR, other things fixed,
or any additional comments/features here -->
## Detailed Description of the Pull Request / Additional comments

<!-- Describe how you validated the behavior. Add automated tests
wherever possible, but list manual validation steps taken as well -->
## Validation Steps Performed

.github/actions/spell-check/expect.txt

@@ -168,6 +168,7 @@ callbackptr
 calpwstr
 Cangjie
 CANRENAME
+Canvascustomlayout
 CAPTUREBLT
 CAPTURECHANGED
 CARETBLINKING
@@ -574,6 +575,7 @@ GPOCA
 gpp
 gpu
 gradians
+Gridcustomlayout
 GSM
 gtm
 guiddata

src/modules/fancyzones/FancyZones.UITests/LayoutApplyHotKeyTests.cs

@@ -283,8 +283,7 @@ namespace UITests_FancyZones
 
             // Set Hotkey
             this.AttachFancyZonesEditor();
-            var layout = "Grid custom layout";
+            Session.Find<Element>(By.AccessibilityId(AccessibilityId.GridCustomLayoutCard)).Find<Button>(By.AccessibilityId(AccessibilityId.EditLayoutButton)).Click();
-            Session.Find<Element>(layout).Find<Button>(By.AccessibilityId(AccessibilityId.EditLayoutButton)).Click();
             const string key = "0";
             var hotkeyComboBox = Session.Find<Element>(By.AccessibilityId(AccessibilityId.HotkeyComboBox));
             Assert.IsNotNull(hotkeyComboBox);
@@ -299,7 +298,7 @@ namespace UITests_FancyZones
             SendKeys(Key.Win, Key.Ctrl, Key.Alt, Key.Num0);
             Task.Delay(3000).Wait();
             this.AttachFancyZonesEditor();
-            var element = this.Find<Element>(layout);
+            var element = this.Find<Element>(By.AccessibilityId(AccessibilityId.GridCustomLayoutCard));
             Assert.IsTrue(element.Selected, $"{element.Selected} Grid custom layout is not visible");
             this.CloseFancyZonesEditor();
             this.AttachPowertoySetting();
@@ -307,7 +306,7 @@ namespace UITests_FancyZones
             SendKeys(Key.Win, Key.Ctrl, Key.Alt, Key.Num1);
             Task.Delay(3000).Wait();
             this.AttachFancyZonesEditor();
-            element = this.Find<Element>("Grid-9");
+            element = this.Find<Element>(By.AccessibilityId(AccessibilityId.Grid9LayoutCard));
             Assert.IsTrue(element.Selected, $"{element.Selected} Grid-9 is not visible");
             this.CloseFancyZonesEditor();
             this.AttachPowertoySetting();
@@ -315,7 +314,7 @@ namespace UITests_FancyZones
             SendKeys(Key.Win, Key.Ctrl, Key.Alt, Key.Num2);
             Task.Delay(3000).Wait();
             this.AttachFancyZonesEditor();
-            element = this.Find<Element>("Canvas custom layout");
+            element = this.Find<Element>(By.AccessibilityId(AccessibilityId.CanvasCustomLayoutCard));
             Assert.IsTrue(element.Selected, $"{element.Selected} Canvas custom layout is not visible");
             this.CloseFancyZonesEditor();
             this.AttachPowertoySetting();
@@ -424,21 +423,21 @@ namespace UITests_FancyZones
 
             SendKeys(Key.Win, Key.Ctrl, Key.Alt, Key.Num0);
             this.AttachFancyZonesEditor();
-            var element = this.Find<Element>("Grid custom layout");
+            var element = this.Find<Element>(By.AccessibilityId(AccessibilityId.GridCustomLayoutCard));
             Assert.IsFalse(element.Selected, $"{element.Selected} Grid custom layout is not visible");
             this.CloseFancyZonesEditor();
             this.AttachPowertoySetting();
 
             SendKeys(Key.Win, Key.Ctrl, Key.Alt, Key.Num1);
             this.AttachFancyZonesEditor();
-            element = this.Find<Element>("Grid-9");
+            element = this.Find<Element>(By.AccessibilityId(AccessibilityId.Grid9LayoutCard));
             Assert.IsFalse(element.Selected, $"{element.Selected} Grid-9 is not visible");
             this.CloseFancyZonesEditor();
             this.AttachPowertoySetting();
 
             SendKeys(Key.Win, Key.Ctrl, Key.Alt, Key.Num2);
             this.AttachFancyZonesEditor();
-            element = this.Find<Element>("Canvas custom layout");
+            element = this.Find<Element>(By.AccessibilityId(AccessibilityId.CanvasCustomLayoutCard));
             Assert.IsFalse(element.Selected, $"{element.Selected} Canvas custom layout is not visible");
             this.CloseFancyZonesEditor();
             this.AttachPowertoySetting();
@@ -453,7 +452,7 @@ namespace UITests_FancyZones
             this.OpenFancyZonesPanel();
 
             this.AttachFancyZonesEditor();
-            var element = this.Find<Element>("Grid custom layout");
+            var element = this.Find<Element>(By.AccessibilityId(AccessibilityId.GridCustomLayoutCard));
             element.Click();
             this.CloseFancyZonesEditor();
             this.ExitScopeExe();
@@ -463,8 +462,8 @@ namespace UITests_FancyZones
             this.RestartScopeExe();
             this.OpenFancyZonesPanel();
             this.AttachFancyZonesEditor();
-            element = this.Find<Element>("Grid custom layout");
+            element = this.Find<Element>(By.AccessibilityId(AccessibilityId.GridCustomLayoutCard));
-            Assert.IsTrue(element.Selected, $"{element.Selected} Canvas custom layout is not visible");
+            Assert.IsTrue(element.Selected, $"{element.Selected} Grid custom layout is not visible");
             this.CloseFancyZonesEditor();
 
             // close the virtual desktop
@@ -483,7 +482,7 @@ namespace UITests_FancyZones
             this.OpenFancyZonesPanel();
 
             this.AttachFancyZonesEditor();
-            var element = this.Find<Element>("Grid custom layout");
+            var element = this.Find<Element>(By.AccessibilityId(AccessibilityId.GridCustomLayoutCard));
             element.Click();
             this.CloseFancyZonesEditor();
             this.ExitScopeExe();
@@ -493,7 +492,7 @@ namespace UITests_FancyZones
             this.RestartScopeExe();
             this.OpenFancyZonesPanel();
             this.AttachFancyZonesEditor();
-            element = this.Find<Element>("Grid-9");
+            element = this.Find<Element>(By.AccessibilityId(AccessibilityId.Grid9LayoutCard));
             element.Click();
             this.CloseFancyZonesEditor();
             this.ExitScopeExe();
@@ -502,7 +501,7 @@ namespace UITests_FancyZones
             this.RestartScopeExe();
             this.OpenFancyZonesPanel();
             this.AttachFancyZonesEditor();
-            element = this.Find<Element>("Grid custom layout");
+            element = this.Find<Element>(By.AccessibilityId(AccessibilityId.GridCustomLayoutCard));
             Assert.IsTrue(element.Selected, $"{element.Selected} Grid custom layout is not visible");
             this.CloseFancyZonesEditor();
             this.ExitScopeExe();
@@ -523,8 +522,8 @@ namespace UITests_FancyZones
             this.OpenFancyZonesPanel();
 
             this.AttachFancyZonesEditor();
-            this.Find<Element>("Grid custom layout").Click();
+            this.Find<Element>(By.AccessibilityId(AccessibilityId.GridCustomLayoutCard)).Click();
-            this.Find<Element>("Grid custom layout").Find<Button>(By.AccessibilityId(AccessibilityId.EditLayoutButton)).Click();
+            this.Find<Element>(By.AccessibilityId(AccessibilityId.GridCustomLayoutCard)).Find<Button>(By.AccessibilityId(AccessibilityId.EditLayoutButton)).Click();
             Session.Find<Button>(By.AccessibilityId(AccessibilityId.DeleteLayoutButton)).Click();
             Session.SendKeySequence(Key.Tab, Key.Enter);
 
@@ -619,7 +618,7 @@ namespace UITests_FancyZones
         private void AttachFancyZonesEditor()
         {
             Task.Delay(4000).Wait();
-            this.Find<Button>("Launch layout editor").Click();
+            this.Find<Button>(By.AccessibilityId(AccessibilityId.LaunchLayoutEditorButton)).Click();
 
             Task.Delay(3000).Wait();
             this.Session.Attach(PowerToysModule.FancyZone);

src/modules/fancyzones/FancyZonesEditor.UITests/Utils/FancyZonesEditorHelper.cs

@@ -41,9 +41,13 @@ namespace Microsoft.FancyZonesEditor.UnitTests.Utils
             public const string MainWindow = "MainWindow1";
             public const string Monitors = "Monitors";
             public const string NewLayoutButton = "NewLayoutButton";
+            public const string LaunchLayoutEditorButton = "LaunchLayoutEditorButton";
 
             // layout card
             public const string EditLayoutButton = "EditLayoutButton";
+            public const string GridCustomLayoutCard = "GridcustomlayoutCard";
+            public const string Grid9LayoutCard = "Grid-9Card";
+            public const string CanvasCustomLayoutCard = "CanvascustomlayoutCard";
 
             // edit layout window: common for template and custom layouts
             public const string DialogTitle = "EditLayoutDialogTitle";

src/modules/fancyzones/editor/FancyZonesEditor/Models/LayoutModel.cs

@@ -71,12 +71,22 @@ namespace FancyZonesEditor.Models
                 {
                     _name = value;
                     FirePropertyChanged(nameof(Name));
+                    FirePropertyChanged(nameof(AutomationId));
                 }
             }
         }
 
         private string _name;
 
+        // AutomationId - used for UI automation testing
+        public virtual string AutomationId
+        {
+            get
+            {
+                return _name?.Replace(" ", string.Empty) + "Card";
+            }
+        }
+
         public LayoutType Type { get; set; }
 
 #pragma warning disable CA1720 // Identifier contains type name (Not worth the effort to change this now.)

src/modules/fancyzones/editor/FancyZonesEditor/Styles/GridViewStyles.xaml

@@ -145,6 +145,7 @@
         <Setter Property="Background" Value="{DynamicResource LayoutItemBackgroundBrush}" />
         <Setter Property="IsSelected" Value="{Binding IsApplied, Mode=OneWay}" />
         <Setter Property="AutomationProperties.Name" Value="{Binding Name}" />
+        <Setter Property="AutomationProperties.AutomationId" Value="{Binding AutomationId}" />
         <Setter Property="KeyboardNavigation.TabNavigation" Value="Local" />
         <!--<Setter Property="IsHoldingEnabled" Value="True" />-->
         <Setter Property="CornerRadius" Value="4" />

src/settings-ui/Settings.UI/SettingsXAML/Views/FancyZonesPage.xaml

@@ -34,6 +34,7 @@
                     <tkcontrols:SettingsCard
                         x:Uid="FancyZones_LaunchEditorButtonControl"
                         ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
+                        AutomationProperties.AutomationId="LaunchLayoutEditorButton"
                         Command="{x:Bind ViewModel.LaunchEditorEventHandler}"
                         HeaderIcon="{ui:FontIcon Glyph=&#xEB3C;}"
                         IsClickEnabled="True" />