test: removed toggleBar command and replaced with ts helper (#33835)

removed cy.toggleBar() from Commands.js file and replaced with ts helper
method agHelper.CheckUncheck();

Link EE for runs - appsmithorg/appsmith-ee#4311

/ok-to-test tags="@tag.All"<!-- This is an auto-generated comment:
Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9312018494>
> Commit: 04e2bdf
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9312018494&attempt=2"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->




















<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Refactor**
- Replaced `cy.togglebar` with `agHelper.CheckUncheck` across multiple
test files for better consistency and maintainability in handling
checkbox interactions.
- Updated locators and selectors in various test files and configuration
files to improve test reliability and readability.

- **Chores**
- Updated spec names for limited tests in the Cypress test suite to
align with new test structure and naming conventions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBox_spec.js

@@ -31,7 +31,7 @@ describe(
  /**
  * @param{toggleButton Css} Assert to be checked
  */
- cy.togglebar(widgetsPage.defaultcheck);
+ _.agHelper.CheckUncheck(widgetsPage.defaultcheck);
  /**
  * @param{Show Alert} Css for InputChange
  */
@@ -45,7 +45,7 @@ describe(
  });
  it("Checkbox Functionality To Check Disabled Widget", function () {
  cy.openPropertyPane("checkboxwidget");
- cy.togglebar(commonlocators.Disablejs + " " + "input");
+ _.agHelper.CheckUncheck(commonlocators.Disablejs + " " + "input");
  _.deployMode.DeployApp();
  cy.get(publish.checkboxWidget + " " + "input").should("be.disabled");
  });
@@ -63,7 +63,7 @@ describe(
  });
  it("Checkbox Functionality To Check Visible Widget", function () {
  cy.openPropertyPane("checkboxwidget");
- cy.togglebar(commonlocators.visibleCheckbox);
+ _.agHelper.CheckUncheck(commonlocators.visibleCheckbox);
  _.deployMode.DeployApp();
  cy.get(publish.checkboxWidget + " " + "input").should("be.checked");
  });

app/client/cypress/e2e/Regression/ClientSide/Widgets/CodeScanner/CodeScanner1_spec.ts

@@ -51,7 +51,7 @@ describe(
  cy.moveToContentTab();
 
  // Disable and publish
- cy.togglebar(commonlocators.disableCheckbox);
+ _.agHelper.CheckUncheck(commonlocators.disableCheckbox);
  _.deployMode.DeployApp();
  // Disabled icon should be there
  cy.get(codeScannerDisabledSVGIconOnPublishPage).should(
@@ -124,7 +124,7 @@ describe(
  cy.moveToContentTab();
 
  // Visibilty ON and publish
- cy.togglebar(commonlocators.visibleCheckbox);
+ _.agHelper.CheckUncheck(commonlocators.visibleCheckbox);
  _.deployMode.DeployApp();
 
  // Video should be streaming
@@ -189,7 +189,7 @@ describe(
  cy.moveToContentTab();
 
  // Disable and publish
- cy.togglebar(commonlocators.disableCheckbox);
+ _.agHelper.CheckUncheck(commonlocators.disableCheckbox);
  _.deployMode.DeployApp();
 
  // Button should be disabled
@@ -246,7 +246,7 @@ describe(
  cy.moveToContentTab();
 
  // Visibilty ON and publish
- cy.togglebar(commonlocators.visibleCheckbox);
+ _.agHelper.CheckUncheck(commonlocators.visibleCheckbox);
  _.deployMode.DeployApp();
 
  // Button should be visible

app/client/cypress/e2e/Regression/ClientSide/Widgets/CurrencyInput/CurrencyInput_ShowStepArrows_spec.js

@@ -1,4 +1,5 @@
 const widgetsPage = require("../../../../../locators/Widgets.json");
+const { agHelper } = require("../../../../../support/Objects/ObjectsCore");
 
 const widgetName = "currencyinputwidget";
 
@@ -17,7 +18,7 @@ describe(
 
  it("2. Validate that currency input widget, stepArrows should be visible when showStepArrows is set to true", () => {
  // Enable showStepArrows to true
- cy.togglebar(widgetsPage.showStepArrowsToggleCheckBox);
+ agHelper.CheckUncheck(widgetsPage.showStepArrowsToggleCheckBox);
 
  cy.get(widgetsPage.inputStepArrows).should("exist"); // step arrows should be visible
  });

app/client/cypress/e2e/Regression/ClientSide/Widgets/Datepicker/DatePicker_With_Switch_spec.js

@@ -23,7 +23,7 @@ describe(
  );
  cy.testCodeMirror(this.dataSet.switchInputName);
  cy.get(widgetsPage.switchLabel).should("have.text", "Switch1");
- cy.togglebar(widgetsPage.defaultcheck);
+ _.agHelper.CheckUncheck(widgetsPage.defaultcheck);
  cy.getAlert("onChange");
  cy.closePropertyPane();
  });

app/client/cypress/e2e/Regression/ClientSide/Widgets/Dropdown/Dropdown_spec.js

@@ -163,7 +163,7 @@ describe(
  it("Dropdown Functionality To UnCheck disabled Widget", function () {
  cy.openPropertyPane("selectwidget");
  // Check the visible JS
- cy.togglebar(commonlocators.visibleCheckbox);
+ _.agHelper.CheckUncheck(commonlocators.visibleCheckbox);
  _.deployMode.DeployApp();
  // Verify the checked visible JS
  cy.get(publish.selectwidget).should("exist");

app/client/cypress/e2e/Regression/ClientSide/Widgets/Form/FormWidget_spec.js

@@ -115,7 +115,7 @@ describe(
  // Open property pone
  cy.openPropertyPane("formwidget");
  // Check the visible JS
- cy.togglebar(commonlocators.visibleCheckbox);
+ _.agHelper.CheckUncheck(commonlocators.visibleCheckbox);
  _.deployMode.DeployApp();
  // Verify the Checked Visible JS
  cy.get(publish.formWidget).should("be.visible");

app/client/cypress/e2e/Regression/ClientSide/Widgets/Form/FormWithSwitch_spec.js

@@ -27,7 +27,7 @@ describe(
  // Verify widget label name is verified
  cy.get(widgetsPage.switchLabel).should("have.text", "Switch1");
  // Check the toggler button
- cy.togglebar(widgetsPage.defaultcheck);
+ _.agHelper.CheckUncheck(widgetsPage.defaultcheck);
  // Type in message field and verify
  cy.getAlert("onChange");
  cy.closePropertyPane();

app/client/cypress/e2e/Regression/ClientSide/Widgets/Form/Form_With_CheckBox_spec.js

@@ -13,7 +13,7 @@ describe(
 
  it("1. Checkbox Functionality To Check required toggle for form", function () {
  cy.openPropertyPane("checkboxwidget");
- cy.togglebar(commonlocators.requiredjs + " " + "input");
+ _.agHelper.CheckUncheck(commonlocators.requiredjs + " " + "input");
  _.deployMode.DeployApp();
  cy.wait(2000);
  cy.get(publish.checkboxWidget).click();

app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_spec.js

@@ -65,7 +65,7 @@ describe(
  deployMode.NavigateBacktoEditor();
  //Image Widget Functionality To Check Visible Widget", function () {
  cy.openPropertyPane("imagewidget");
- cy.togglebar(commonlocators.visibleCheckbox);
+ agHelper.CheckUncheck(commonlocators.visibleCheckbox);
  deployMode.DeployApp(publish.imageWidget);
  deployMode.NavigateBacktoEditor();
  });

app/client/cypress/e2e/Regression/ClientSide/Widgets/Input/Input_spec.js

@@ -82,7 +82,7 @@ describe(
 
  it("3. isSpellCheck: true", function () {
  cy.openPropertyPane("inputwidgetv2");
- cy.togglebar(commonlocators.spellCheck + " " + "input");
+ _.agHelper.CheckUncheck(commonlocators.spellCheck + " " + "input");
  _.deployMode.DeployApp();
  cy.get(publish.inputWidget + " " + "input")
  .invoke("attr", "spellcheck")
@@ -101,7 +101,7 @@ describe(
 
  it("4. Input Widget Functionality To Check Disabled Widget", function () {
  cy.openPropertyPane("inputwidgetv2");
- cy.togglebar(commonlocators.Disablejs + " " + "input");
+ _.agHelper.CheckUncheck(commonlocators.Disablejs + " " + "input");
  _.deployMode.DeployApp();
  cy.get(publish.inputWidget + " " + "input").should("be.disabled");
  _.deployMode.NavigateBacktoEditor();
@@ -122,7 +122,7 @@ describe(
 
  //Input Functionality To Check Visible Widget
  cy.openPropertyPane("inputwidgetv2");
- cy.togglebar(commonlocators.visibleCheckbox);
+ _.agHelper.CheckUncheck(commonlocators.visibleCheckbox);
  _.deployMode.DeployApp();
  cy.get(publish.inputWidget + " " + "input").should("be.visible");
  _.deployMode.NavigateBacktoEditor();

app/client/cypress/e2e/Regression/ClientSide/Widgets/Input/Inputv2_ShowStepArrows_spec.js

@@ -1,4 +1,5 @@
 const widgetsPage = require("../../../../../locators/Widgets.json");
+const { agHelper } = require("../../../../../support/Objects/ObjectsCore");
 
 const widgetName = "inputwidgetv2";
 
@@ -17,7 +18,7 @@ describe(
  cy.get(widgetsPage.inputStepArrows).should("not.exist"); // This is the step arrows
  //Validate that dataType - NUMBER, stepArrows should be visible when showStepArrows is set to true
  // Enable showStepArrows to true
- cy.togglebar(widgetsPage.showStepArrowsToggleCheckBox);
+ agHelper.CheckUncheck(widgetsPage.showStepArrowsToggleCheckBox);
 
  cy.get(widgetsPage.inputStepArrows).should("exist"); // step arrows should be visible
  //Toggle test case to validate that dataType - NUMBER, stepArrows should be hidden when toggle value is false

app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_ArrayField_spec.js

@@ -191,7 +191,6 @@ describe(
 
  // Disable -> true
  propPane.TogglePropertyState("Disabled", "On");
- // cy.togglebar(".t--property-control-disabled input");
  deployMode.DeployApp();
  cy.get(education)
  .first()
@@ -207,7 +206,6 @@ describe(
  EditorNavigation.SelectEntityByName("JSONForm1", EntityType.Widget);
  cy.openFieldConfiguration("education");
  propPane.TogglePropertyState("Disabled", "Off");
- // cy.togglebarDisable(".t--property-control-disabled input");
  cy.get(education).should("exist");
  cy.get(education)
  .first()
@@ -235,7 +233,6 @@ describe(
  // Disable -> true
  propPane.TogglePropertyState("Disabled", "On");
  deployMode.DeployApp();
- // cy.togglebar(".t--property-control-disabled input");
  cy.get(`${education} ${addButton}`).should("have.attr", "disabled");
  cy.get(`${education} ${addButton}`).should("have.attr", "disabled");
 
@@ -339,9 +336,7 @@ describe(
  );
 
  // Enable Allow Country Code Change
- cy.togglebar(
- ".t--property-control-allowcountrycodechange input[type='checkbox']",
- );
+ agHelper.CheckUncheck(commonlocators.allowcountrycodechangeInput);
  // Change the label of the field to Phone Number
  cy.testJsontext("text", "Phone Number");
 
@@ -375,9 +370,7 @@ describe(
  );
 
  // Enable Allow Country Code Change
- cy.togglebar(
- ".t--property-control-allowcurrencychange input[type='checkbox']",
- );
+ agHelper.CheckUncheck(commonlocators.allowCurrencyChange);
  // Change the label of the field to Phone Number
  cy.testJsontext("text", "Currency");
 

app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_FieldProperties_1_spec.js

@@ -3,6 +3,8 @@ import EditorNavigation, {
 } from "../../../../../support/Pages/EditorNavigation";
 
 const commonlocators = require("../../../../../locators/commonlocators.json");
+const widgetsLocators = require("../../../../../locators/Widgets.json");
+
 import {
  agHelper,
  deployMode,
@@ -125,7 +127,7 @@ describe(
  it("6. disables field when disabled switched on and when autofill is disabled we should see the autofill attribute in the input field", () => {
  EditorNavigation.SelectEntityByName("JSONForm1", EntityType.Widget);
  cy.openFieldConfiguration("name");
- cy.togglebar(`.t--property-control-disabled input`);
+ agHelper.CheckUncheck(widgetsLocators.selectWidgetDisabled);
  deployMode.DeployApp();
  cy.get(`${fieldPrefix}-name input`).each(($el) => {
  cy.wrap($el).should("have.attr", "disabled");
@@ -134,7 +136,7 @@ describe(
  deployMode.NavigateBacktoEditor();
  EditorNavigation.SelectEntityByName("JSONForm1", EntityType.Widget);
  cy.openFieldConfiguration("name");
- cy.togglebarDisable(`.t--property-control-disabled input`);
+ cy.togglebarDisable(widgetsLocators.selectWidgetDisabled);
  validateAutocompleteAttributeInJSONForm();
  });
 
@@ -173,21 +175,21 @@ describe(
  cy.get(`${fieldPrefix}-check input`).should("be.checked");
 
  // hides field when visible switched off
- cy.togglebarDisable(`.t--property-control-visible input`);
+ cy.togglebarDisable(widgetsLocators.visible);
  deployMode.DeployApp();
  cy.get(`${fieldPrefix}-check`).should("not.exist");
  deployMode.NavigateBacktoEditor();
  EditorNavigation.SelectEntityByName("JSONForm1", EntityType.Widget);
  cy.openFieldConfiguration("check");
- cy.togglebar(`.t--property-control-visible input`);
+ agHelper.CheckUncheck(widgetsLocators.visible);
  deployMode.DeployApp();
  cy.get(`${fieldPrefix}-check`).should("exist");
  deployMode.NavigateBacktoEditor();
 
  // disables field when disabled switched on
  EditorNavigation.SelectEntityByName("JSONForm1", EntityType.Widget);
  cy.openFieldConfiguration("check");
- cy.togglebar(`.t--property-control-disabled input`);
+ agHelper.CheckUncheck(widgetsLocators.selectWidgetDisabled);
  deployMode.DeployApp();
  cy.get(`${fieldPrefix}-check input`).each(($el) => {
  cy.wrap($el).should("have.attr", "disabled");

app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_FieldProperties_2_spec.js

@@ -3,6 +3,8 @@ import EditorNavigation, {
 } from "../../../../../support/Pages/EditorNavigation";
 
 const commonlocators = require("../../../../../locators/commonlocators.json");
+const widgetsLocators = require("../../../../../locators/Widgets.json");
+
 import {
  agHelper,
  entityExplorer,
@@ -113,7 +115,7 @@ describe(
  cy.get(`.bp3-select-popover .bp3-input-group`).should("not.exist");
 
  // toggle filterable -> true in property pane
- cy.togglebar(`.t--property-control-allowsearching input`);
+ agHelper.CheckUncheck(commonlocators.allowsearchingInput);
 
  deployMode.DeployApp();
 
@@ -192,10 +194,10 @@ describe(
  cy.get(`${fieldPrefix}-radio input`).should("have.value", "Y");
 
  // hides field when visible switched off"
- cy.togglebarDisable(`.t--property-control-visible input`);
+ cy.togglebarDisable(widgetsLocators.visible);
  cy.get(`${fieldPrefix}-radio`).should("not.exist");
  cy.wait(500);
- cy.togglebar(`.t--property-control-visible input`);
+ agHelper.CheckUncheck(widgetsLocators.visible);
  cy.get(`${fieldPrefix}-radio`).should("exist");
  });
  },

app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_FormBindings_spec.js

@@ -230,12 +230,12 @@ describe(
 
  // name.required -> true
  cy.openFieldConfiguration("name");
- cy.togglebar(`${propertyControlPrefix}-required input`);
+ agHelper.CheckUncheck(`${propertyControlPrefix}-required input`);
  cy.get(backBtn).click({ force: true }).wait(500);
 
  // age.disabled -> true
  cy.openFieldConfiguration("age");
- cy.togglebar(`${propertyControlPrefix}-disabled input`);
+ agHelper.CheckUncheck(`${propertyControlPrefix}-disabled input`);
  cy.get(backBtn).click({ force: true }).wait(500);
 
  // migrant.visible -> false
@@ -246,7 +246,7 @@ describe(
  // address.street.required -> true
  cy.openFieldConfiguration("address", false);
  cy.openFieldConfiguration("street", false);
- cy.togglebar(`${propertyControlPrefix}-required input`);
+ agHelper.CheckUncheck(`${propertyControlPrefix}-required input`);
  cy.get(backBtn).click({ force: true }).wait(500);
  cy.get(backBtn).click({ force: true }).wait(500);
 
@@ -255,7 +255,7 @@ describe(
  cy.openFieldConfiguration("education");
  cy.openFieldConfiguration("__array_item__", false);
  cy.openFieldConfiguration("college", false);
- cy.togglebar(`${propertyControlPrefix}-required input`);
+ agHelper.CheckUncheck(`${propertyControlPrefix}-required input`);
  cy.get(backBtn).click({ force: true }).wait(500);
  cy.openFieldConfiguration("year", false);
  cy.togglebarDisable(`${propertyControlPrefix}-visible input`);

app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_FormProperties_spec.js

@@ -132,7 +132,7 @@ describe(
 
  // make name field required
  cy.openFieldConfiguration("name");
- cy.togglebar(`${propertyControlPrefix}-required input`);
+ agHelper.CheckUncheck(`${propertyControlPrefix}-required input`);
 
  deployMode.DeployApp();
 
@@ -156,7 +156,7 @@ describe(
 
  // make name field required
  cy.openFieldConfiguration("name");
- cy.togglebar(`${propertyControlPrefix}-required input`);
+ agHelper.CheckUncheck(`${propertyControlPrefix}-required input`);
 
  deployMode.DeployApp();
 
@@ -188,7 +188,9 @@ describe(
  cy.openPropertyPane("jsonformwidget");
  propPane.EnterJSContext("Source data", JSON.stringify(schema), true);
 
- cy.togglebar(`${propertyControlPrefix}-hiddenfieldsindata input`);
+ agHelper.CheckUncheck(
+ `${propertyControlPrefix}-hiddenfieldsindata input`,
+ );
 
  cy.openFieldConfiguration("age");
  cy.togglebarDisable(`${propertyControlPrefix}-visible input`);

app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_HiddenFields_1_spec.js

@@ -45,7 +45,7 @@ function hideAndVerifyProperties(fieldName, fieldValue, resolveFieldValue) {
  });
 
  // Show field
- cy.togglebar(".t--property-control-visible input");
+ agHelper.CheckUncheck(widgetsPage.visible);
 
  // Check if visible
  cy.get(`${fieldPrefix}-${fieldName}`).should("exist");

app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_HiddenFields_2_spec.js

@@ -45,7 +45,7 @@ function hideAndVerifyProperties(fieldName, fieldValue, resolveFieldValue) {
  });
 
  // Show field
- cy.togglebar(".t--property-control-visible input");
+ agHelper.CheckUncheck(widgetsPage.visible);
 
  // Check if visible
  cy.get(`${fieldPrefix}-${fieldName}`).should("exist");
@@ -155,11 +155,11 @@ describe(
 
  // hide education field
  cy.openFieldConfiguration("education");
- cy.togglebarDisable(".t--property-control-visible input");
+ cy.togglebarDisable(widgetsPage.visible);
  cy.get(backBtn).click({ force: true }).wait(500);
  // hide name field
  cy.openFieldConfiguration("name");
- cy.togglebarDisable(".t--property-control-visible input");
+ cy.togglebarDisable(widgetsPage.visible);
 
  // publish the app
  deployMode.DeployApp();