test: updated Falky test and incorporated ts test review comments (#23905)

- Flaky test fix for MultipleContainer spec
- Ts helper for Autolayout review comments

app/client/cypress/e2e/Regression/ClientSide/AppNavigation/AppNavigationWithAutoLayout_spec.ts

@@ -1,27 +1,26 @@
-import commonlocators from "../../../../locators/commonlocators.json";
-import appNavigationLocators from "../../../../locators/AppNavigation.json";
-import { ObjectsRegistry } from "../../../../support/Objects/Registry";
 import * as _ from "../../../../support/Objects/ObjectsCore";
-const deployMode = ObjectsRegistry.DeployMode;
-let currentUrl: string | null = null;
 
 describe("Validating multiple widgets in auto layout mode with App navigation settings", function () {
   it("1. Drag and Drop multiple widgets in auto layout mode", function () {
     _.autoLayout.ConvertToAutoLayout();
-    _.entityExplorer.DragDropWidgetNVerify("inputwidgetv2", 100, 200);
+    _.entityExplorer.DragDropWidgetNVerify(
-    _.entityExplorer.DragDropWidgetNVerify("inputwidgetv2", 10, 20);
+      _.draggableWidgets.INPUT_V2,
-    _.entityExplorer.DragDropWidgetNVerify("buttonwidget", 10, 20);
+      100,
-    _.propPane.navigateToPage("Page1", "onClick");
+      200,
+    );
+    _.entityExplorer.DragDropWidgetNVerify(_.draggableWidgets.INPUT_V2, 10, 20);
+    _.entityExplorer.DragDropWidgetNVerify(_.draggableWidgets.BUTTON, 10, 20);
+    _.propPane.NavigateToPage("Page1", "onClick");
   });
   it("2. Change App navigation settings and valdiate the layout settings", () => {
-    _.agHelper.GetNClick("[data-testid='t--entity-item-Page1']");
+    _.entityExplorer.SelectEntityByName("Page1", "Pages");
-    _.agHelper.GetNClick(appNavigationLocators.appSettingsButton);
+    _.agHelper.GetNClick(_.appSettings.locators._appSettings);
-    _.agHelper.GetNClick(appNavigationLocators.navigationSettingsTab);
+    _.agHelper.GetNClick(_.appSettings.locators._navigationSettingsTab);
     _.agHelper.GetNClick(
-      appNavigationLocators.navigationSettings.orientationOptions.side,
+      _.appSettings.locators._navigationSettings._orientationOptions._side,
     );
     _.agHelper.GetNClickByContains(
-      appNavigationLocators.navigationMenuItem,
+      _.appSettings.locators._navigationMenuItem,
       "Page1",
     );
     _.agHelper.Sleep();

app/client/cypress/e2e/Regression/ClientSide/AppNavigation/AppNavigationWithMultiplePages_spec.ts

@@ -1,26 +1,26 @@
-import commonlocators from "../../../../locators/commonlocators.json";
-import appNavigationLocators from "../../../../locators/AppNavigation.json";
-import { ObjectsRegistry } from "../../../../support/Objects/Registry";
 import * as _ from "../../../../support/Objects/ObjectsCore";
-const deployMode = ObjectsRegistry.DeployMode;
 let currentUrl: string | null = null;
 
 describe("Page orientation and navigation related usecases ", function () {
   it("1. Change 'Orientation' to 'Side', sidebar should appear", () => {
-    _.agHelper.GetNClick(appNavigationLocators.appSettingsButton);
+    _.agHelper.GetNClick(_.appSettings.locators._appSettings);
-    _.agHelper.GetNClick(appNavigationLocators.navigationSettingsTab);
+    _.agHelper.GetNClick(_.appSettings.locators._navigationSettingsTab);
     _.agHelper.GetNClick(
-      appNavigationLocators.navigationSettings.orientationOptions.side,
+      _.appSettings.locators._navigationSettings._orientationOptions._side,
     );
     _.agHelper.GetNClickByContains(
-      appNavigationLocators.navigationMenuItem,
+      _.appSettings.locators._navigationMenuItem,
       "Page1",
     );
   });
   it("2. Validate change with height width for fill widget - Input widget", function () {
     _.autoLayout.ConvertToAutoLayout();
-    _.entityExplorer.DragDropWidgetNVerify("inputwidgetv2", 100, 200);
+    _.entityExplorer.DragDropWidgetNVerify(
-    _.entityExplorer.DragDropWidgetNVerify("inputwidgetv2", 10, 20);
+      _.draggableWidgets.INPUT_V2,
+      100,
+      200,
+    );
+    _.entityExplorer.DragDropWidgetNVerify(_.draggableWidgets.INPUT_V2, 10, 20);
     _.agHelper.Sleep();
     cy.url().then((url) => {
       currentUrl = url;
@@ -28,13 +28,15 @@ describe("Page orientation and navigation related usecases ", function () {
     for (let i = 0; i < 25; i++) {
       _.entityExplorer.AddNewPage();
     }
-    _.entityExplorer.DragDropWidgetNVerify("buttonwidget", 10, 20);
+    _.entityExplorer.DragDropWidgetNVerify(_.draggableWidgets.BUTTON, 10, 20);
-    _.propPane.navigateToPage("Page1", "onClick");
+    //_.propPane.navigateToPage("Page1", "onClick");
+    _.propPane.NavigateToPage("Page1", "onClick");
     //cy.navigateOnClick("Page1", "onClick");
-    deployMode.DeployApp();
+    _.deployMode.DeployApp();
     _.agHelper.Sleep();
     _.agHelper.GetNClickByContains("button", "Submit");
-    cy.get(appNavigationLocators.navigationMenuItem)
+    _.agHelper
+      .GetElement(_.appSettings.locators._navigationMenuItem)
       .contains("Page1")
       .parent()
       .parent()
@@ -42,7 +44,7 @@ describe("Page orientation and navigation related usecases ", function () {
       .parent()
       .parent()
       .should("have.class", "is-active");
-    deployMode.NavigateBacktoEditor();
+    _.deployMode.NavigateBacktoEditor();
   });
   it("3. Navigate to widget url and validate", () => {
     if (currentUrl !== null) {

app/client/cypress/e2e/Regression/ClientSide/DynamicHeight/Multiple_Container_spec.js

@@ -39,6 +39,7 @@ describe("Dynamic Height Width validation for multiple container", function () {
                       "response.body.responseMeta.status",
                       200,
                     );
+                    cy.wait(3000);
                     cy.get(".t--widget-checkboxgroupwidget")
                       .invoke("css", "height")
                       .then((newcheckboxheight) => {

app/client/cypress/e2e/Regression/ClientSide/Widgets/Modal/Modal_Widget_With_Button_spec.ts

@@ -1,17 +1,20 @@
-import commonlocators from "../../../../../locators/commonlocators.json";
 import * as _ from "../../../../../support/Objects/ObjectsCore";
 
 describe("Modal Widget with auto layout usecases", function () {
   it("1. Add new Modal widget with other widgets and validate with Auto layout", () => {
     _.autoLayout.ConvertToAutoLayout();
-    _.entityExplorer.DragDropWidgetNVerify("modalwidget", 300, 300);
+    _.entityExplorer.DragDropWidgetNVerify(_.draggableWidgets.MODAL, 300, 300);
     _.agHelper.AssertElementExist(_.locators._modal);
     _.agHelper.GetNClick(_.locators._closeModal, 0, true, 0);
-    _.entityExplorer.DragDropWidgetNVerify("inputwidgetv2", 100, 200);
+    _.entityExplorer.DragDropWidgetNVerify(
-    _.entityExplorer.DragDropWidgetNVerify("inputwidgetv2", 10, 20);
+      _.draggableWidgets.INPUT_V2,
-    _.entityExplorer.DragDropWidgetNVerify("buttonwidget", 20, 30);
+      100,
+      200,
+    );
+    _.entityExplorer.DragDropWidgetNVerify(_.draggableWidgets.INPUT_V2, 10, 20);
+    _.entityExplorer.DragDropWidgetNVerify(_.draggableWidgets.BUTTON, 20, 30);
     _.agHelper.AssertElementAbsence(_.locators._modal);
-    _.propPane.createModal("Modal1", "onClick");
+    _.propPane.CreateModal("Modal1", "onClick");
     _.agHelper.GetNClick(_.locators._closeModal, 0, true, 0);
     _.agHelper.AssertElementExist(_.locators._widgetInCanvas("inputwidgetv2"));
     _.agHelper.AssertElementExist(

app/client/cypress/locators/WidgetLocators.ts

@@ -35,6 +35,7 @@ export const WIDGET = {
   RANGE_SLIDER: "rangesliderwidget",
   IFRAME: "iframewidget",
   DIVIDER: "dividerwidget",
+  MODAL: "modalwidget",
 } as const;
 
 // property pane element selector are maintained here

app/client/cypress/support/Pages/AppSettings/AppSettings.ts

@@ -3,12 +3,26 @@ export class AppSettings {
   private agHelper = ObjectsRegistry.AggregateHelper;
   private theme = ObjectsRegistry.ThemeSettings;
 
-  private locators = {
+  public locators = {
     _appSettings: ".t--app-settings-cta",
     _closeSettings: "#t--close-app-settings-pane",
     _themeSettingsHeader: "#t--theme-settings-header",
     _generalSettingsHeader: "#t--general-settings-header",
     _embedSettingsHeader: "#t--share-embed-settings",
+    _navigationSettingsTab: "#t--navigation-settings-header",
+    _navigationSettings: {
+      _showNavbar: "#t--navigation-settings-show-navbar",
+      _showSignIn: "#t--navigation-settings-show-sign-in",
+      _orientation: ".t--navigation-settings-orientation",
+      _navStyle: ".t--navigation-settings-navStyle",
+      _colorStyle: ".t--navigation-settings-colorStyle",
+      _orientationOptions: {
+        _top: ".t--navigation-settings-orientation .ads-v2-segmented-control-value-top",
+        _side:
+          ".t--navigation-settings-orientation .ads-v2-segmented-control-value-side",
+      },
+    },
+    _navigationMenuItem: ".t--page-switch-tab",
     _getPageSettingsHeader: (pageName: string) =>
       `#t--page-settings-${pageName}`,
   };

app/client/cypress/support/Pages/PropertyPane.ts

@@ -436,21 +436,17 @@ export class PropertyPane {
     this.agHelper.AssertElementExist(this.locator._selectByValue(value));
   }
 
-  public createModal(modalName: string, property: string) {
+  public CreateModal(modalName: string, property: string) {
-    ObjectsRegistry.PropertyPane.AddAction(property);
+    this.SelectPlatformFunction(property, "Show modal");
-    cy.get(ObjectsRegistry.CommonLocators._dropDownValue("Show modal")).click();
     this.agHelper.GetNClick(this._actionOpenDropdownSelectModal);
     this.agHelper.GetNClick(this._createModalButton);
     this.agHelper.AssertAutoSave();
   }
 
-  public navigateToPage(pageName: string, property: string) {
+  public NavigateToPage(pageName: string, property: string) {
-    ObjectsRegistry.PropertyPane.AddAction(property);
+    this.SelectPlatformFunction(property, "Navigate to");
-    cy.get(
-      ObjectsRegistry.CommonLocators._dropDownValue("Navigate to"),
-    ).click();
     this.agHelper.GetNClick(this._actionOpenDropdownSelectPage);
-    cy.xpath(this._pageName(pageName)).click({ force: true });
+    this.agHelper.GetNClick(this._pageName(pageName));
     this.agHelper.AssertAutoSave();
   }
 }