cypress-ag-grid 1.4.0 → 2.0.0

package/README.md

@@ -7,10 +7,12 @@ 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)
         - [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)
@@ -70,7 +72,7 @@ The correct command will return the following:
 To only get certain rows of data, pass the header values into the `getAgGridData()` command, like so:
 
 ```javascript
-cy.get("#myGrid).getAgGridData({ onlyColumns: ["Year", "Make"] })
+cy.get("#myGrid").getAgGridData({ onlyColumns: ["Year", "Make"] })
 ```
 
 The above command will return the follwoing:
@@ -86,6 +88,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.
 
@@ -128,13 +149,48 @@ The above command will filter the Model column for the value 'GLC300' and set th
 </br>
 </br>
 ### Filterby Text - Floating Filter
-This command will filter a column by a text value from its floating filter (if applicable).
+This command will filter a column by a text value from its floating filter (if applicable). This command will filter a column by a text value from its floating menu. In the options, you must specify a `searchCriteria` object with `columnName`, `filterValue`, and optionally `operator` (i.e. Contains, Not contains, Equals, etc.) and `searchInputIndex` in the event you wish to apply multiple text conditions (see below for multi-condition example).
 
 ![alt text](./ag-grid-example-filter-text-floating.png "AG Grid Dom - Filter by Text Floating")
 
-<b>Definition:</b> .agGridColumnFilterTextMenu(options: {})
+<b>Definition:</b> .agGridColumnFilterTextFloating(options: {})
+
+Example:
+```
+    cy.get(agGridSelector).agGridColumnFilterTextFloating({
+      searchCriteria: {
+        columnName: "Make",
+        filterValue: "Ford",
+      },
+      hasApplyButton: true,
+    });
+```
+
+The above example will search for the Make `Ford` from the floating text menu filter.
+
+If you have the option for multiple conditions on the floating filter, you can do two searches, specifying the `searchInputIndex` parameter in the `searchCriteria` object. The below example will ssarch for any `Make` that contains `B` AND `MW`:
+
+Example: 
+```
+    cy.get(agGridSelector).agGridColumnFilterTextFloating({
+      searchCriteria: {
+        columnName: "Make",
+        filterValue: "B",
+        searchInputIndex: 0,
+      },
+      hasApplyButton: true,
+    });
+    cy.get(agGridSelector).agGridColumnFilterTextFloating({
+      searchCriteria: {
+        columnName: "Make",
+        filterValue: "MW",
+        searchInputIndex: 1,
+      },
+      hasApplyButton: true,
+    });
+```
+![alt text](./ag-grid-example-filter-text-floating-multi-condition.png "AG Grid Dom - Filter by Text Floating")
 
-See [Filter by Text - Column Menu](#filter-by-Text---Column-Menu) for example and usage.
 <br/>
 </br>
 
@@ -159,6 +215,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
@@ -268,9 +338,9 @@ Example:
   * 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)
   * Example: 
   ```javascript
-  if(Cypress.window){
+  if(window.Cypress){
       this.api.sizeColumnsToFit();
   }
   ``` 
 ## 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}

@@ -3,7 +3,7 @@ const columnDefs = [
   { 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,10 +47,10 @@ new agGrid.Grid(eGridDiv, gridOptions);
 // Grab the grid data from the supplied API endpoint
 agGrid
   .simpleHttpRequest({
-    url: "https://api.jsonbin.io/b/608304f69a9aa933335613a6/2",
+    url: "https://api.jsonbin.io/v3/b/608304f69a9aa933335613a6/2",
   })
   .then((data) => {
-    gridOptions.api.setRowData(data);
+    gridOptions.api.setRowData(data.record);
   });
 
 function autoSizeAllColumns() {

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/{integration/ag-grid-spec.js → e2e/ag-grid-data.cy.js}

@@ -10,10 +10,10 @@ import { filterOperator } from "../../src/agGrid/filterOperator.enum";
 const _pageSize = 5;
 const agGridSelector = "#myGrid";
 
-describe("ag-grid scenarios", () => {
+describe("ag-grid get data scenarios", () => {
   beforeEach(() => {
     cy.visit("../app/index.html");
-    cy.get(".ag-cell", {timeout: 10000}).should("be.visible");
+    cy.get(".ag-cell", { timeout: 10000 }).should("be.visible");
   });
 
   it("verify paginated table data - include all columns", () => {
@@ -98,38 +98,39 @@ describe("ag-grid scenarios", () => {
         columnName: "Model",
         filterValue: "2002",
       },
-      selectAllLocaleText: 'Select All', // This is optional if you are using localText for ag grid
+      selectAllLocaleText: "Select All", // This is optional if you are using localText for ag grid
       hasApplyButton: true,
     });
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
+        cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
       });
   });
 
   it("able to filter by checkbox - multiple columns", () => {
     const expectedTableData = [
-        { Year: "2020", Make: "BMW", Model: "3-series", Price: "45000" },
-        { Year: "2020", Make: "BMW", Model: "3-series", Price: "32000" },
-        { Year: "2020", Make: "BMW", Model: "2002", Price: "88001" },
+      { Year: "2020", Make: "BMW", Model: "3-series", Price: "45000" },
+      { Year: "2020", Make: "BMW", Model: "3-series", Price: "32000" },
+      { Year: "2020", Make: "BMW", Model: "2002", Price: "88001" },
     ];
     cy.get(agGridSelector).agGridColumnFilterCheckboxMenu({
-      searchCriteria: [{
-        columnName: "Model",
-        filterValue: "2002",
-      },
-      {
-        columnName: "Model",
-        filterValue: "3-series",
-      }
-    ],
+      searchCriteria: [
+        {
+          columnName: "Model",
+          filterValue: "2002",
+        },
+        {
+          columnName: "Model",
+          filterValue: "3-series",
+        },
+      ],
       hasApplyButton: true,
     });
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData, true);
+        cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData, true);
       });
   });
 
@@ -151,7 +152,7 @@ describe("ag-grid scenarios", () => {
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
+        cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
       });
   });
 
@@ -161,23 +162,24 @@ describe("ag-grid scenarios", () => {
     ];
     cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
     cy.get(agGridSelector).agGridColumnFilterTextMenu({
-      searchCriteria: [{
-        columnName: "Price",
-        filterValue: "32000",
-        operator: filterOperator.equals,
-      },
-      {
-        columnName: "Make",
-        filterValue: "BMW",
-        operator: filterOperator.equals,
-      }
-    ],
+      searchCriteria: [
+        {
+          columnName: "Price",
+          filterValue: "32000",
+          operator: filterOperator.equals,
+        },
+        {
+          columnName: "Make",
+          filterValue: "BMW",
+          operator: filterOperator.equals,
+        },
+      ],
       hasApplyButton: true,
     });
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
+        cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
       });
   });
 
@@ -199,25 +201,56 @@ describe("ag-grid scenarios", () => {
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
+        cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
       });
   });
 
-  it("able to filter by text - floating filter - multiple columns", () => {
+  it("able to filter by text - floating filter - multiple conditions", () => {
     const expectedTableData = [
-      { Year: "1990", Make: "Ford", Model: "Taurus", Price: "900" },
+      { Year: "2020", Make: "BMW", Model: "2002", Price: "88001" },
+      { Year: "2020", Make: "BMW", Model: "3-series", Price: "45000" },
+      { Year: "2020", Make: "BMW", Model: "3-series", Price: "32000" },
     ];
     cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
     cy.get(agGridSelector).agGridColumnFilterTextFloating({
-      searchCriteria: [{
+      searchCriteria: {
         columnName: "Make",
-        filterValue: "Ford",
+        filterValue: "B",
+        searchInputIndex: 0,
       },
-      {
-        columnName: "Year",
-        filterValue: "1990",
-      }
-    ],
+      hasApplyButton: true,
+    });
+    cy.get(agGridSelector).agGridColumnFilterTextFloating({
+      searchCriteria: {
+        columnName: "Make",
+        filterValue: "MW",
+        searchInputIndex: 1,
+      },
+      hasApplyButton: true,
+    });
+    cy.get(agGridSelector)
+      .getAgGridData()
+      .then((actualTableData) => {
+        cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
+      });
+  });
+
+  it("able to filter by text - floating filter - multiple columns", () => {
+    const expectedTableData = [
+      { Year: "1990", Make: "Ford", Model: "Taurus", Price: "900" },
+    ];
+    cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
+    cy.get(agGridSelector).agGridColumnFilterTextFloating({
+      searchCriteria: [
+        {
+          columnName: "Make",
+          filterValue: "Ford",
+        },
+        {
+          columnName: "Year",
+          filterValue: "1990",
+        },
+      ],
       hasApplyButton: true,
     });
     cy.get(agGridSelector)
@@ -225,7 +258,7 @@ describe("ag-grid scenarios", () => {
       .then((actualTableData) => {
         cy.get(agGridSelector).agGridValidateRowsExactOrder(actualTableData, expectedTableData);
       });
-  });  
+  });
 
   it("able to validate empty table", () => {
     //Search for an entry that does not exist
@@ -240,7 +273,7 @@ describe("ag-grid scenarios", () => {
     cy.get(agGridSelector)
       .getAgGridData()
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateEmptyTable(actualTableData);
+        cy.agGridValidateEmptyTable(actualTableData);
       });
   });
 
@@ -259,7 +292,7 @@ describe("ag-grid scenarios", () => {
       cy.get(agGridSelector)
         .getAgGridData()
         .then((actualTableData) => {
-          cy.get(agGridSelector).agGridValidateRowsExactOrder(
+          cy.agGridValidateRowsExactOrder(
             actualTableData,
             expectedData_sortedByAscending
           );
@@ -282,7 +315,7 @@ describe("ag-grid scenarios", () => {
       cy.get(agGridSelector)
         .getAgGridData()
         .then((actualTableData) => {
-          cy.get(agGridSelector).agGridValidateRowsExactOrder(
+          cy.agGridValidateRowsExactOrder(
             actualTableData,
             expectedData_sortedByDescending
           );
@@ -300,7 +333,7 @@ describe("ag-grid scenarios", () => {
       cy.get(agGridSelector)
         .getAgGridData()
         .then((actualTableData) => {
-          cy.get(agGridSelector).agGridValidateRowsExactOrder(
+          cy.agGridValidateRowsExactOrder(
             actualTableData,
             expectedData_yearColumnRemoved.slice(0, _pageSize)
           );
@@ -319,7 +352,7 @@ describe("ag-grid scenarios", () => {
       cy.get(agGridSelector)
         .getAgGridData()
         .then((actualTableData) => {
-          cy.get(agGridSelector).agGridValidateRowsExactOrder(
+          cy.agGridValidateRowsExactOrder(
             actualTableData,
             expectedData_priceColumnRemoved.slice(0, _pageSize)
           );
@@ -338,7 +371,7 @@ describe("ag-grid scenarios", () => {
       cy.get(agGridSelector)
         .getAgGridData()
         .then((actualTableData) => {
-          cy.get(agGridSelector).agGridValidateRowsExactOrder(
+          cy.agGridValidateRowsExactOrder(
             actualTableData,
             expectedData_multipleColumnsRemoved.slice(0, _pageSize)
           );
@@ -357,7 +390,7 @@ describe("ag-grid scenarios", () => {
     cy.get(agGridSelector)
       .getAgGridData({ onlyColumns: ["Year", "Make", "Model"] })
       .then((actualTableData) => {
-        cy.get(agGridSelector).agGridValidateRowsSubset(actualTableData, expectedTableData);
+        cy.agGridValidateRowsSubset(actualTableData, expectedTableData);
       });
   });
 });
@@ -447,4 +480,4 @@ function removePropertyFromCollection(expectedTableData, columnsToExclude) {
 //     .then(() => {
 //       return paginatedTableData;
 //     });
-// }
+// }

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/cypress.config.js

@@ -0,0 +1,11 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+  },
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress-ag-grid",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "description": "Cypress plugin to interact with ag grid",
   "main": "src/index.js",
   "repository": {
@@ -24,6 +24,6 @@
   "author": "Kerry McKeever <kerry@kerrymckeever.com>",
   "license": "MIT",
   "devDependencies": {
-    "cypress": "^8.5.0"
+    "cypress": "^10.1.0"
   }
 }

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
@@ -205,7 +232,12 @@ function getFilterColumnButtonElement(
  * @param operator (optional) use if using a search operator (i.e. Less Than, Equals, etc...use filterOperator.enum values)
  * @param noMenuTabs (optional) boolean indicating if the menu has tabs.
  */
-function filterBySearchTerm(agGridElement, filterValue, operator, noMenuTabs) {
+ function filterBySearchTerm(agGridElement, options) {
+  const filterValue = options.searchCriteria.filterValue;
+  const operator = options.searchCriteria.operator;
+  const searchInputIndex = options.searchCriteria.searchInputIndex || 0;
+  const noMenuTabs = options.noMenuTabs;
+  
   // Navigate to the filter tab
   if (!noMenuTabs) {
     selectMenuTab(agGridElement, filterTab.filter);
@@ -221,7 +253,7 @@ function filterBySearchTerm(agGridElement, filterValue, operator, noMenuTabs) {
       .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
@@ -229,6 +261,8 @@ function filterBySearchTerm(agGridElement, filterValue, operator, noMenuTabs) {
     .find(".ag-popup-child")
     .find("input")
     .filter(":visible")
+    .eq(searchInputIndex)
+    .clear()
     .type(filterValue)
     .wait(500);
 }
@@ -239,7 +273,6 @@ function applyColumnFilter(agGridElement, hasApplyButton, noMenuTabs) {
       .find(".ag-filter-apply-panel-button")
       .contains("Apply")
       .click();
-
   }
   if (!noMenuTabs) {
     getMenuTabElement(agGridElement, filterTab.filter).click();
@@ -272,7 +305,11 @@ function toggleColumnCheckboxFilter(
     });
 }
 
-function populateSearchCriteria(searchCriteria, hasApplyButton = false, noMenuTabs = false) {
+function populateSearchCriteria(
+  searchCriteria,
+  hasApplyButton = false,
+  noMenuTabs = false
+) {
   const options = {};
   //@ts-ignore
   options.searchCriteria = {};
@@ -322,9 +359,7 @@ function _filterBySearchTextColumnMenu(agGridElement, options) {
   ).click();
   filterBySearchTerm(
     agGridElement,
-    options.searchCriteria.filterValue,
-    options.searchCriteria.operator,
-    options.noMenuTabs
+    options
   );
   applyColumnFilter(agGridElement, options.hasApplyButton, options.noMenuTabs);
 }
@@ -336,10 +371,11 @@ function _filterBySearchTextColumnMenu(agGridElement, options) {
  * @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
-*/
+ */
 export function filterBySearchTextColumnFloatingFilter(agGridElement, options) {
   // Check if there are multiple search criteria provided by attempting to access the columnName
   if (!options.searchCriteria.columnName) {
@@ -365,11 +401,13 @@ function _filterBySearchTextColumnFloatingFilter(agGridElement, options) {
     ).click();
     filterBySearchTerm(
       agGridElement,
-      options.searchCriteria.filterValue,
-      options.searchCriteria.operator,
+      options
+    );
+    applyColumnFilter(
+      agGridElement,
+      options.hasApplyButton,
       options.noMenuTabs
     );
-    applyColumnFilter(agGridElement, options.hasApplyButton, options.noMenuTabs);
   });
 }
 
@@ -405,7 +443,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,
@@ -418,7 +456,11 @@ function _filterByCheckboxColumnMenu(agGridElement, options) {
       true,
       options.noMenuTabs
     );
-    applyColumnFilter(agGridElement, options.hasApplyButton, options.noMenuTabs);
+    applyColumnFilter(
+      agGridElement,
+      options.hasApplyButton,
+      options.noMenuTabs
+    );
   });
 }
 
@@ -426,7 +468,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.

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)

package/cypress.json

@@ -1 +0,0 @@
-{}