cypress-ag-grid 1.5.0 → 2.0.1

package/README.md

@@ -7,10 +7,14 @@ Cypress plugin for interacting with and validating against ag grid.
     + [Grid Interaction](#)
         - [Getting Data From the Grid](#getting-data-from-the-grid)
         - [Getting Select Row Data](#getting-select-row-data)
+        - [Getting Elements From the Grid](#getting-elements-from-the-grid)
         - [Sorting Columns](#sorting-columns)
+    + [Grid Filtering](#)
+        - [Filter Options](#filter-options)
         - [Filter by Text - Column Menu](#filter-by-text---column-menu)
         - [Filterby Text - Floating Filter](#filterby-text---floating-filter)
         - [Filter by Checkbox - Column Menu](#filter-by-checkbox---column-menu)
+        - [Filtering - Localization and Internationalization](#filtering---localization-and-internationalization)
         - [Add or Remove Columns](#add-or-remove-columns)
     + [Grid Validation](#)
         - [Validate Paginated Table](#validate-paginated-table)
@@ -86,6 +90,25 @@ The above command will return the follwoing:
 </br>
 </br>
 
+### Getting Elements From the Grid
+To get the Ag Grid data as elements (if you want to interact with the cells themselves), you must chain `.getAgGridElements()` after the `cy.get()` command for the topmost level of the grid, including controls and headers (see selected DOM element in above image).
+```javascript
+    cy.get(agGridSelector)
+      .getAgGridElements()
+      .then((tableElements) => {
+        const porscheRow = tableElements.find(
+          (row) => row.Price.innerText === "72000"
+        );
+        const priceCell = porscheRow.Price;
+        cy.wrap(priceCell).dblclick().type("66000{enter}");
+      });
+
+```
+
+The above example will grab the table as elements, finds the row whose `Price` equals `72000`. It then gets the `Price` cell for that row, double clicks on it to enable an editable input, and changes the value of the cell.
+</br>
+</br>
+
 ### Sorting Columns
 This command will sort the specified column by the sort direction specified.
 
@@ -100,6 +123,34 @@ cy.get("#myGrid").agGridSortColumn("Model", "descending");
 </br>
 </br>
 
+### Filter Options
+
+The below filtering commands takes an `options` parameter comprised of the following properties:
+
+```javascript
+options: {
+    searchCriteria: [{
+        columnName: string;
+        filterValue: string;
+        operator?: string;
+    }];
+    hasApplyButton?: boolean;
+    noMenuTab?: boolean;
+    selectAllLocaleText: string;
+}
+
+/**
+- options.searchCriteria JSON with search properties and options
+- options.searchCriteria.columnName name of the column to filter
+- options.searchCriteria.filterValue value to input into the filter textbox
+- options.searchCriteria.searchInputIndex [Optional] Uses 0 by default. Index of which filter box to use in event of having multiple search conditionals
+- options.searchCriteria.operator [Optional] Use if using a search operator (i.e. Less Than, Equals, etc...use filterOperator.enum values).
+- options.hasApplyButton [Optional] True if "Apply" button is used, false if filters by text input automatically.
+- options.noMenuTabs [Optional] True if you use, for example, the community edition of ag-grid, which has no menu tabs
+- options.selectAllLocaleText [Optional] Pass in the locale text value of "Select All" for when you are filtering by checkbox - this wil first deselect the "Select All" option before selecting your filter value
+*/
+```
+
 ### Filter by Text - Column Menu
 This command will filter a column by a text value from its menu. In the options, you must specify a `searchCriteria` objects containing one or more objects with `columnName`, `filterValue`, and optionally `operator` (i.e. Contains, Not contains, Equals, etc.).
 
@@ -194,6 +245,20 @@ Example:
 
 ```
 </br>
+
+### Filtering - Localization and Internationalization
+When we filter by checkbox, we first deselect the Select All checkbox to ensure we ONLY select the specified checkbox. Since AG grid allows for localization, we need a way to be able to pass in the localeText for Select All. This is the only area of this plugin that has a hard-coded value, so no other localization accommodations are needed.
+
+```
+    cy.get("#myGrid").agGridColumnFilterCheckboxMenu({
+      searchCriteria: {
+        columnName: "Model",
+        filterValue: "2002",
+      },
+      selectAllLocaleText: "Tout Sélectionner"
+      hasApplyButton: true,
+    });
+```   
 </br>
 
 ### Add or Remove Columns
@@ -251,7 +316,7 @@ Example:
 cy.get("#myGrid")
 .getAgGridData()
 .then((actualTableData) => {
-    cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
+    cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
 });
 ```
 <br/>
@@ -274,7 +339,7 @@ Example:
     cy.get(agGridSelector)
       .getAgGridData({ onlyColumns: ["Year", "Make", "Model"] })
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsSubset(actualTableData, expectedTableData);
+        cy.agGridValidateRowsSubset(actualTableData, expectedTableData);
       });
   });
 ```
@@ -291,13 +356,13 @@ Example:
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateEmptyTable(actualTableData);
+        cy.agGridValidateEmptyTable(actualTableData);
       });
 ```
 
 ## Limitations
-* Unable to validate deeply nested row groups
-* Unable to validate deeply nested column groups
+* ~~Unable to validate deeply nested row groups~~ As of v2.x, using `.getAgGridElements()` you should be able to accomplish this.
+* ~~Unable to validate deeply nested column groups~~ As of v2.x, using `.getAgGridElements()` you should be able to accomplish this.
 * Unable to validate the entirety of an unlimited scrolling grid.
 * Unable to validate data that is out of view. The DOM will register the ag grid data as it's scrolled into view.
   * To combat this, in your code where the ag grid is called, check if the Cypress window is controlling the app and set the ag grid object to `.sizeColumnsToFit()`. You can see an example of this in the `app/grid.js` file of this repository. Read more [here](https://www.ag-grid.com/javascript-grid/column-sizing/#size-columns-to-fit)
@@ -308,4 +373,4 @@ Example:
   }
   ``` 
 ## Credit
-A portion of the logic to retrieve table data was expanded upon from the project [Cypress-Get-Table](https://github.com/roggerfe/cypress-get-table) by [Rogger Fernandez](https://github.com/roggerfe).
+A portion of the logic to retrieve table data was expanded upon from the project [Cypress-Get-Table](https://github.com/roggerfe/cypress-get-table) by [Rogger Fernandez](https://github.com/roggerfe).

package/app/{grid.js → grid-basic.js}

@@ -1,9 +1,9 @@
 // specify the columns
 const columnDefs = [
-  { field: "year", pinned: "left" },
+  { field: "year", pinned: "left"},
   { field: "make", rowGroup: false, pinned: "left" },
   { field: "model", filter: true },
-  { field: "price", pinned: "right", floatingFilter: false, sortable: false },
+  { field: "price", pinned: "right", floatingFilter: false, sortable: false, editable: true, cellEditor: 'agTextCellEditor'  },
 ];
 
 const autoGroupColumnDef = {
@@ -47,7 +47,7 @@ new agGrid.Grid(eGridDiv, gridOptions);
 // Grab the grid data from the supplied API endpoint
 agGrid
   .simpleHttpRequest({
-    url: "https://api.jsonbin.io/v3/b/608304f69a9aa933335613a6/2"
+    url: "https://api.jsonbin.io/v3/b/608304f69a9aa933335613a6/2",
   })
   .then((data) => {
     gridOptions.api.setRowData(data.record);

package/app/grid-grouped.js

@@ -0,0 +1,71 @@
+// specify the columns
+const columnDefsGrouped = [
+  { field: "year", pivot: true, },
+  { field: "make", rowGroup: true, enableRowGroup: true },
+  { field: "model", filter: true },
+  { field: "price", editable: true, cellEditor: 'agTextCellEditor'  },
+];
+
+const autoGroupColumnDefGrouped = {
+  headerName: "Model",
+  field: "model",
+  cellRenderer: "agGroupCellRenderer",
+  cellRendererParams: {
+    checkbox: true,
+  },
+};
+
+// let the grid know which columns to use
+const gridOptionsGrouped = {
+  defaultColDef: {
+    sortable: true,
+    filter: "agTextColumnFilter",
+    floatingFilter: true,
+    filterParams: {
+      buttons: ["reset", "apply"],
+      debounceMs: 200,
+    },
+    animateRows: true,
+    resizable: true,
+  },
+  groupDefaultExpanded: 2,
+  autoGroupColumnDef: autoGroupColumnDefGrouped,
+  groupSelectsChildren: true,
+  columnDefs: columnDefsGrouped,
+  rowSelection: "multiple",
+  domLayout: "normal",
+  pagination: true,
+  paginationPageSize: 5,
+  sideBar: false,
+};
+
+// lookup the container we want the Grid to use
+const eGridDivGrouped = document.querySelector("#myGrid2");
+
+// create the grid passing in the div to use together with the columns & data we want to use
+new agGrid.Grid(eGridDivGrouped, gridOptionsGrouped);
+
+// Grab the grid data from the supplied API endpoint
+agGrid
+  .simpleHttpRequest({
+    url: "https://api.jsonbin.io/v3/b/608304f69a9aa933335613a6/2",
+  })
+  .then((data) => {
+    gridOptionsGrouped.api.setRowData(data.record);
+  });
+
+function autoSizeAllColumns() {
+  var allColumnIds = [];
+  gridOptionsGrouped.columnApi.getAllColumns().forEach(function (column) {
+    allColumnIds.push(column.colId);
+  });
+  gridOptionsGrouped.columnApi.autoSizeColumns(allColumnIds);
+}
+
+// If the Cypress test is running, ensure all columns fit within the window
+if (window.Cypress) {
+  gridOptionsGrouped.api.sizeColumnsToFit();
+} else {
+    // Otherwise auto-size columns the way we wish to view the grid in production.
+    autoSizeAllColumns();
+}

package/app/index.html

@@ -7,7 +7,9 @@
 </head>
 <body>
   <div id="myGrid" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
-  <script src="grid.js" type="text/javascript" charset="utf-8">
-</script>
+  <script src="grid-basic.js" type="text/javascript" charset="utf-8"></script>
+
+  <div id="myGrid2" style="height: 600px;width:900px;" class="ag-theme-alpine" sideBar="true"></div>
+  <script src="grid-grouped.js" type="text/javascript" charset="utf-8"></script>
 </body>
 </html>

package/cypress/e2e/{ag-grid.cy.js → ag-grid-data.cy.js}

@@ -104,7 +104,7 @@ describe("ag-grid get data scenarios", () => {
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData)
+        cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
       });
   });
 
@@ -130,11 +130,7 @@ describe("ag-grid get data scenarios", () => {
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsExactOrder(
-          actualTableData,
-          expectedTableData,
-          true
-        );
+        cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData, true);
       });
   });
 
@@ -156,7 +152,7 @@ describe("ag-grid get data scenarios", () => {
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
+        cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
       });
   });
 
@@ -183,7 +179,7 @@ describe("ag-grid get data scenarios", () => {
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
+        cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
       });
   });
 
@@ -205,7 +201,7 @@ describe("ag-grid get data scenarios", () => {
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
+        cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
       });
   });
 
@@ -235,7 +231,7 @@ describe("ag-grid get data scenarios", () => {
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
+        cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
       });
   });
 
@@ -264,6 +260,30 @@ describe("ag-grid get data scenarios", () => {
       });
   });
 
+  it("able to filter by text - floating filter - multi filter", () => {
+    const expectedTableData = [
+      { Year: "2020", Make: "Ford", Model: "Taurus", Price: "19000" },
+      { Year: "1990", Make: "Ford", Model: "Taurus", Price: "900" },
+    ];
+    cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
+    cy.get(agGridSelector).agGridColumnFilterTextFloating({
+      searchCriteria: [
+        {
+          columnName: "Model",
+          filterValue: "Taurus",
+          isMultiFilter: true
+        },
+      ],
+      hasApplyButton: true,
+    });
+    cy.get(agGridSelector)
+      .getAgGridData()
+      .then((actualTableData) => {
+        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
+      });
+  });
+
+
   it("able to validate empty table", () => {
     //Search for an entry that does not exist
     cy.get(agGridSelector).agGridColumnFilterTextMenu({
@@ -277,7 +297,7 @@ describe("ag-grid get data scenarios", () => {
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateEmptyTable(actualTableData);
+        cy.agGridValidateEmptyTable(actualTableData);
       });
   });
 
@@ -296,7 +316,7 @@ describe("ag-grid get data scenarios", () => {
       cy.get(agGridSelector)
         .getAgGridData()
         .then((actualTableData) => {
-          cy.get(agGridSelector).agGridValidateRowsExactOrder(
+          cy.agGridValidateRowsExactOrder(
             actualTableData,
             expectedData_sortedByAscending
           );
@@ -319,7 +339,7 @@ describe("ag-grid get data scenarios", () => {
       cy.get(agGridSelector)
         .getAgGridData()
         .then((actualTableData) => {
-          cy.get(agGridSelector).agGridValidateRowsExactOrder(
+          cy.agGridValidateRowsExactOrder(
             actualTableData,
             expectedData_sortedByDescending
           );
@@ -337,7 +357,7 @@ describe("ag-grid get data scenarios", () => {
       cy.get(agGridSelector)
         .getAgGridData()
         .then((actualTableData) => {
-          cy.get(agGridSelector).agGridValidateRowsExactOrder(
+          cy.agGridValidateRowsExactOrder(
             actualTableData,
             expectedData_yearColumnRemoved.slice(0, _pageSize)
           );
@@ -356,7 +376,7 @@ describe("ag-grid get data scenarios", () => {
       cy.get(agGridSelector)
         .getAgGridData()
         .then((actualTableData) => {
-          cy.get(agGridSelector).agGridValidateRowsExactOrder(
+          cy.agGridValidateRowsExactOrder(
             actualTableData,
             expectedData_priceColumnRemoved.slice(0, _pageSize)
           );
@@ -375,7 +395,7 @@ describe("ag-grid get data scenarios", () => {
       cy.get(agGridSelector)
         .getAgGridData()
         .then((actualTableData) => {
-          cy.get(agGridSelector).agGridValidateRowsExactOrder(
+          cy.agGridValidateRowsExactOrder(
             actualTableData,
             expectedData_multipleColumnsRemoved.slice(0, _pageSize)
           );
@@ -394,7 +414,7 @@ describe("ag-grid get data scenarios", () => {
     cy.get(agGridSelector)
       .getAgGridData({ onlyColumns: ["Year", "Make", "Model"] })
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsSubset(actualTableData, expectedTableData);
+        cy.agGridValidateRowsSubset(actualTableData, expectedTableData);
       });
   });
 });

package/cypress/e2e/ag-grid-elements.cy.js

@@ -0,0 +1,59 @@
+import { filterOperator } from "../../src/agGrid/filterOperator.enum";
+
+const agGridSelector = "#myGrid2";
+
+describe("ag-grid get elements scenario", () => {
+  beforeEach(() => {
+    cy.visit("../app/index.html");
+    cy.get(".ag-cell", { timeout: 10000 }).should("be.visible");
+  });
+
+  it("able to update grid cell value", () => {
+    // filter to only show the porsche
+    cy.get(agGridSelector).agGridColumnFilterTextFloating({
+      searchCriteria: {
+        columnName: "Make",
+        filterValue: "Porsche",
+        operator: filterOperator.equals,
+      },
+      hasApplyButton: true,
+    });
+
+    // expected values before changing the price
+    const expectedTableBeforeEditing = [
+      { Year: "2020", Make: "Porsche", Model: "Boxter", Price: "72000" },
+      { Year: "2020", Make: "Porsche", Model: "Boxter", Price: "99000" },
+    ];
+
+    // verify values before editing
+    cy.get(agGridSelector)
+      .getAgGridData()
+      .then((tableData) => {
+        cy.agGridValidateRowsSubset(tableData, expectedTableBeforeEditing);
+      });
+
+    // edit the porsche boxter from 72000 to 66000
+    cy.get(agGridSelector)
+      .getAgGridElements()
+      .then((tableElements) => {
+        const porscheRow = tableElements.find(
+          (row) => row.Price.innerText === "72000"
+        );
+        const priceCell = porscheRow.Price;
+        cy.wrap(priceCell).dblclick().type("66000{enter}");
+      });
+
+    // expected values after changing the price
+    const expectedTableAfterEditing = [
+      { Year: "2020", Make: "Porsche", Model: "Boxter", Price: "66000" },
+      { Year: "2020", Make: "Porsche", Model: "Boxter", Price: "99000" },
+    ];
+
+    // verify values before editing
+    cy.get(agGridSelector)
+      .getAgGridData()
+      .then((tableData) => {
+        cy.agGridValidateRowsSubset(tableData, expectedTableAfterEditing);
+      });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress-ag-grid",
-  "version": "1.5.0",
+  "version": "2.0.1",
   "description": "Cypress plugin to interact with ag grid",
   "main": "src/index.js",
   "repository": {

package/src/agGrid/agGridInteractions.js

@@ -5,9 +5,9 @@ import { filterTab } from "./menuTab.enum";
 /**
  * Uses the attribute value's index and sorts the data accordingly.
  * For our purposes, we are getting the attribute with the items' indices and sorting accordingly.
- * 
- * @param {*} index 
- * @returns 
+ *
+ * @param {*} index
+ * @returns
  */
 function sortElementsByAttributeValue(attribute) {
   return (a, b) => {
@@ -23,6 +23,19 @@ function sortElementsByAttributeValue(attribute) {
  * @param options Provide an array of columns you wish to exclude from the table retrieval.
  */
 export const getAgGridData = (agGridElement, options = {}) => {
+  return _getAgGrid(agGridElement, options, false);
+};
+
+/**
+ * Retrieves the values from the *displayed* page in ag grid and assigns each value to its respective column name.
+ * @param agGridElement The get() selector for which ag grid table you wish to retrieve.
+ * @param options Provide an array of columns you wish to exclude from the table retrieval.
+ */
+export const getAgGridElements = (agGridElement, options = {}) => {
+  return _getAgGrid(agGridElement, options, true);
+};
+
+function _getAgGrid(agGridElement, options = {}, returnElements) {
   const agGridColumnSelectors =
     ".ag-pinned-left-cols-container^.ag-center-cols-clipper^.ag-pinned-right-cols-container";
   if (agGridElement.get().length > 1)
@@ -33,45 +46,59 @@ export const getAgGridData = (agGridElement, options = {}) => {
   const tableElement = agGridElement.get()[0].querySelectorAll(".ag-root")[0];
   const agGridSelectors = agGridColumnSelectors.split("^");
   const headers = [
-    ...tableElement.querySelectorAll('.ag-header-row-column [aria-colindex]')]
-    .sort(sortElementsByAttributeValue('aria-colindex'))
+    ...tableElement.querySelectorAll(".ag-header-row-column [aria-colindex]"),
+  ]
+    .sort(sortElementsByAttributeValue("aria-colindex"))
     .map((headerElement) => {
       // Check if the elements returned are already .ag-header-cell-text elements
       // If not, query for that element and return the text content
-      let headerCells = [...headerElement.querySelectorAll(".ag-header-cell-text")]
+      let headerCells = [
+        ...headerElement.querySelectorAll(".ag-header-cell-text"),
+      ];
       if (headerCells.length === 0) {
-        return [headerElement].map((e) => e.textContent.trim())
+        return [headerElement].map((e) => e.textContent.trim());
       } else {
-        return [...headerElement.querySelectorAll(".ag-header-cell-text")]
-          .map((e) => e.textContent.trim())
+        return [...headerElement.querySelectorAll(".ag-header-cell-text")].map(
+          (e) => e.textContent.trim()
+        );
       }
-    }).flat()
+    })
+    .flat();
 
   let allRows = [];
   let rows = [];
 
   agGridSelectors.forEach((selector) => {
-    const _rows = [...tableElement.querySelectorAll(`${selector}:not(.ag-hidden) .ag-row`)]
+    const _rows = [
+      ...tableElement.querySelectorAll(`${selector}:not(.ag-hidden) .ag-row`),
+    ]
       // Sort rows by their row-index attribute value
       .sort(sortElementsByAttributeValue("row-index"))
       .map((row) => {
         // Sort row cells by their aria-colindex attribute value
         // First check if elements returned already contain the aria-colindex
         // If not, just query for the .ag-cell
-        let rowCells = [...row.querySelectorAll(".ag-cell [aria-colindex]")]
+        let rowCells = [...row.querySelectorAll(".ag-cell [aria-colindex]")];
         if (rowCells.length === 0) {
-          rowCells = [...row.querySelectorAll(".ag-cell")]
+          rowCells = [...row.querySelectorAll(".ag-cell")];
         }
-        return rowCells.sort(sortElementsByAttributeValue("aria-colindex"))
-        .map((e)=> e.textContent.trim())
+        return rowCells
+          .sort(sortElementsByAttributeValue("aria-colindex"))
+          .map((e) => {
+            if (returnElements) {
+              return e;
+            } else {
+              return e.textContent.trim();
+            }
+          });
       });
     allRows.push(_rows);
   });
 
   // Remove any empty arrays before merging
   allRows = allRows.filter(function (ele) {
-    return ele.length
-  })
+    return ele.length;
+  });
 
   if (!allRows.length) rows = [];
   else {
@@ -102,7 +129,7 @@ export const getAgGridData = (agGridElement, options = {}) => {
       return { ...acc, [headers[idx]]: curr };
     }, {})
   );
-};
+}
 
 /**
  * Retrieve the ag grid column header element based on its column name value
@@ -209,6 +236,7 @@ function getFilterColumnButtonElement(
   const filterValue = options.searchCriteria.filterValue;
   const operator = options.searchCriteria.operator;
   const searchInputIndex = options.searchCriteria.searchInputIndex || 0;
+  const isMultiFilter = options.searchCriteria.isMultiFilter;
   const noMenuTabs = options.noMenuTabs;
   
   // Navigate to the filter tab
@@ -226,7 +254,7 @@ function getFilterColumnButtonElement(
       .contains(operator)
       .then(($ele) => {
         //Have to use the unwrapped element, since Cypress .click() event does not appropriately select the operator
-        $ele.trigger('click');
+        $ele.trigger("click");
       });
   }
   // Input filter term and allow grid a moment to render the results
@@ -234,10 +262,32 @@ function getFilterColumnButtonElement(
     .find(".ag-popup-child")
     .find("input")
     .filter(":visible")
-    .eq(searchInputIndex)
-    .clear()
-    .type(filterValue)
-    .wait(500);
+    .as("filterInput")
+
+    // If it's a multi filter, de-select the 'select-all' checkbox
+    if(isMultiFilter){
+      const selectAllText = options.selectAllLocaleText || "Select All";
+      toggleColumnCheckboxFilter(
+        agGridElement,
+        selectAllText,
+        false,
+        true
+      );
+    }
+
+    // Get the saved filter input and enter the search term
+    cy.get("@filterInput").then(($ele)=>{
+      cy.wrap($ele)
+      .eq(searchInputIndex)
+      .clear()
+      .type(filterValue)
+      .wait(500);  
+    })
+
+    // Finally, if a multi-filter, select the filter value's checkbox
+    if(isMultiFilter){
+      toggleColumnCheckboxFilter(agGridElement, filterValue, true, true)
+    }
 }
 
 function applyColumnFilter(agGridElement, hasApplyButton, noMenuTabs) {
@@ -246,7 +296,6 @@ function applyColumnFilter(agGridElement, hasApplyButton, noMenuTabs) {
       .find(".ag-filter-apply-panel-button")
       .contains("Apply")
       .click();
-
   }
   if (!noMenuTabs) {
     getMenuTabElement(agGridElement, filterTab.filter).click();
@@ -279,7 +328,12 @@ function toggleColumnCheckboxFilter(
     });
 }
 
-function populateSearchCriteria(searchCriteria, hasApplyButton = false, noMenuTabs = false) {
+function populateSearchCriteria(
+  searchCriteria,
+  hasApplyButton = false,
+  noMenuTabs = false,
+  selectAllLocaleText = 'Select All'
+  ) {
   const options = {};
   //@ts-ignore
   options.searchCriteria = {};
@@ -288,6 +342,10 @@ function populateSearchCriteria(searchCriteria, hasApplyButton = false, noMenuTa
   //@ts-ignore
   options.searchCriteria.filterValue = searchCriteria.filterValue;
   //@ts-ignore
+  options.searchCriteria.isMultiFilter = searchCriteria.isMultiFilter;
+  //@ts-ignore
+  options.selectAllLocaleText = selectAllLocaleText;
+  //@ts-ignore
   options.hasApplyButton = hasApplyButton;
   //@ts-ignore
   options.noMenuTabs = noMenuTabs;
@@ -312,7 +370,8 @@ export function filterBySearchTextColumnMenu(agGridElement, options) {
       const _options = populateSearchCriteria(
         _searchCriteria,
         options.hasApplyButton,
-        options.noMenuTabs
+        options.noMenuTabs,
+        options.isMultiFilter
       );
       _filterBySearchTextColumnMenu(agGridElement, _options);
     });
@@ -337,15 +396,16 @@ function _filterBySearchTextColumnMenu(agGridElement, options) {
 /**
  *  * Performs a filter operation on the specified column via the column's floating filter field using plain text search
  * @param agGridElement The get() selector for which ag grid table you wish to retrieve.
- * @param {{searchCriteria:[{columnName:string,filterValue:string,operator?:string}], hasApplyButton?:boolean}} options JSON with search properties
+ * @param {{searchCriteria:[{columnName:string,filterValue:string,operator?:string}], hasApplyButton?:boolean, noMenuTab?:boolean, selectAllLocaleText:string}} options JSON with search properties
  * @param options.searchCriteria JSON with search properties and options
  * @param options.searchCriteria.columnName name of the column to filter
  * @param options.searchCriteria.filterValue value to input into the filter textbox
  * @param options.searchCriteria.searchInputIndex [Optional] Uses 0 by default. Index of which filter box to use in event of having multiple search conditionals
  * @param options.searchCriteria.operator [Optional] Use if using a search operator (i.e. Less Than, Equals, etc...use filterOperator.enum values).
  * @param options.hasApplyButton [Optional] True if "Apply" button is used, false if filters by text input automatically.
- * @param options.noMenuTabs [Optional] True if you use for example the community edition of ag-grid, which has no menu tabs
-*/
+ * @param options.noMenuTabs [Optional] True if you use, for example, the community edition of ag-grid, which has no menu tabs
+ * @param options.selectAllLocaleText [Optional] Pass in the locale text value of "Select All" for when you are filtering by checkbox - this wil first deselect the "Select All" option before selecting your filter value
+ */
 export function filterBySearchTextColumnFloatingFilter(agGridElement, options) {
   // Check if there are multiple search criteria provided by attempting to access the columnName
   if (!options.searchCriteria.columnName) {
@@ -373,7 +433,11 @@ function _filterBySearchTextColumnFloatingFilter(agGridElement, options) {
       agGridElement,
       options
     );
-    applyColumnFilter(agGridElement, options.hasApplyButton, options.noMenuTabs);
+    applyColumnFilter(
+      agGridElement,
+      options.hasApplyButton,
+      options.noMenuTabs
+    );
   });
 }
 
@@ -409,7 +473,7 @@ function _filterByCheckboxColumnMenu(agGridElement, options) {
       agGridElement,
       options.searchCriteria.columnName
     ).click();
-    const selectAllText = options.selectAllLocaleText || 'Select All'
+    const selectAllText = options.selectAllLocaleText || "Select All";
     toggleColumnCheckboxFilter(
       agGridElement,
       selectAllText,
@@ -422,7 +486,11 @@ function _filterByCheckboxColumnMenu(agGridElement, options) {
       true,
       options.noMenuTabs
     );
-    applyColumnFilter(agGridElement, options.hasApplyButton, options.noMenuTabs);
+    applyColumnFilter(
+      agGridElement,
+      options.hasApplyButton,
+      options.noMenuTabs
+    );
   });
 }
 
@@ -430,7 +498,11 @@ function _filterByCheckboxColumnMenu(agGridElement, options) {
  * Will perform a filter for all search criteria provided, then selects all found entries in the grid
  * @param searchCriteria a "\^" delimited string of all columns and searchCriteria to search for in the grid (i.e. "Name=John Smith^Rate Plan=Standard"
  */
-export function filterGridEntriesBySearchText(agGridElement, searchCriteria, isFloatingFilter = false) {
+export function filterGridEntriesBySearchText(
+  agGridElement,
+  searchCriteria,
+  isFloatingFilter = false
+) {
   if (isFloatingFilter) {
     filterBySearchTextColumnFloatingFilter(agGridElement, searchCriteria);
   } else {

package/src/agGrid/agGridValidations.js

@@ -30,7 +30,7 @@ export function validateTablePages(agGridElement,expectedPaginatedTableData, onl
             .then((table) => {
                 const actualPage = JSON.parse(JSON.stringify(table));
                 validateTableExactOrder(agGridElement, actualPage, expectedPage, true);
-                cy.get(".ag-icon-next").click();
+                cy.get(agGridElement).find(".ag-icon-next").click();
                 iterator++;
             });
     });

package/src/index.d.ts

@@ -2,7 +2,8 @@
 
 declare namespace Cypress {
     interface Chainable<Subject> {
-        getAgGridData<E extends Node = HTMLElement>(options?: {}): Chainable<JQuery<E>>;
+        getAgGridData(options?: {}): Chainable<Array<Record<string, string>>>;
+        getAgGridElements<E extends Node = HTMLElement>(options?: {}): Chainable<JQuery<E>>;
         /**
          *  * Performs sorting operation on the specified column
          * @param {*} subject The get() selector for which ag grid table you wish to retrieve.
@@ -43,6 +44,7 @@ declare namespace Cypress {
          * @param options.searchCriteria.columnName name of the column to filter
          * @param options.searchCriteria.filterValue value to input into the filter textbox
          * @param options.searchCriteria.operator [Optional] Use if using a search operator (i.e. Less Than, Equals, etc...use filterOperator.enum values).
+         * @param options.searchCriteria.isMultiFilter [Optional] Use if floating filter is multiselect checkboxes vs free form input.
          * @param options.hasApplyButton [Optional] True if "Apply" button is used, false if filters by text input automatically.
          */
         agGridColumnFilterTextFloating<E extends Node = HTMLElement>(options: {}): Chainable<JQuery<E>>;

package/src/index.js

@@ -1,18 +1,19 @@
 /// <reference types="cypress" />
 
-import {getAgGridData, sortColumnBy} from "./agGrid/agGridInteractions"
+import {getAgGridData, getAgGridElements, sortColumnBy} from "./agGrid/agGridInteractions"
 import {validateTablePages, validateTableExactOrder, validateEmptyTable, validateTableRowSubset} from "./agGrid/agGridValidations"
 import {filterByCheckboxColumnMenu, filterBySearchTextColumnFloatingFilter, filterBySearchTextColumnMenu, toggleColumnFromSideBar} from "./agGrid/agGridInteractions";
 
 Cypress.Commands.add('getAgGridData', { prevSubject: true }, getAgGridData);
+Cypress.Commands.add('getAgGridElements', {prevSubject: true}, getAgGridElements);
 Cypress.Commands.add('agGridSortColumn', {prevSubject: true}, sortColumnBy);
 Cypress.Commands.add('agGridColumnFilterCheckboxMenu', {prevSubject: true}, filterByCheckboxColumnMenu)
 Cypress.Commands.add('agGridColumnFilterTextMenu', {prevSubject: true}, filterBySearchTextColumnMenu)
 Cypress.Commands.add('agGridColumnFilterTextFloating', {prevSubject: true}, filterBySearchTextColumnFloatingFilter)
 
-Cypress.Commands.add('agGridValidatePaginatedTable', {prevSubject: true}, validateTablePages)
-Cypress.Commands.add('agGridValidateRowsExactOrder', {prevSubject: true}, validateTableExactOrder)
-Cypress.Commands.add('agGridValidateRowsSubset', {prevSubject: true}, validateTableRowSubset)
-Cypress.Commands.add('agGridValidateEmptyTable', {prevSubject: true}, validateEmptyTable)
+Cypress.Commands.add('agGridValidatePaginatedTable', {prevSubject: 'optional'}, validateTablePages)
+Cypress.Commands.add('agGridValidateRowsExactOrder', {prevSubject: 'optional'}, validateTableExactOrder)
+Cypress.Commands.add('agGridValidateRowsSubset', {prevSubject: 'optional'}, validateTableRowSubset)
+Cypress.Commands.add('agGridValidateEmptyTable', {prevSubject: 'optional'}, validateEmptyTable)
 
 Cypress.Commands.add('agGridToggleColumnsSideBar', {prevSubject: true}, toggleColumnFromSideBar)