Floating checkbox fails to find .ag-tab

[PaulDotmatics]

I have a ag grid that is:

{ field: "testField", filter: SelectionColumnFilter, floatingFilterComponent: SelectionColumnFloatingFilter, floatingFilter: true, suppressMenu: true, filterParams: { getSelectionOptions: () => TestData.getData(Token).then((response) => response.data), },

and was playing around with cypress-ag-grid but I cant get filters to work, I tried:

agGridColumnFilterCheckboxMenu which gives me Expected to find element: .ag-header-cell-menu-button, but never found it. because im using floating but when using the floating

cy.get('#ag-table').agGridColumnFilterTextFloating({ searchCriteria: { columnName: 'testField', filterValue: 'test', isMultiFilter: true }, hasApplyButton: false })

I get Expected to find element: .ag-tab, but never found it

Any ideas please?

[JewlsIOB]

I had this same error. Try noMenuTabs: true . e.g.

cy.get('#ag-table').agGridColumnFilterTextFloating({
searchCriteria: {
columnName: 'testField',
filterValue: 'test',
isMultiFilter: true
},
hasApplyButton: false,
noMenuTabs: true
})

[kpmck]

@PaulDotmatics if what @JewlsIOB suggested doesn't help, would you happen to have an example of your grid I could look at to observe the behavior, please? If you're able to provide a minimally reproducible solution, that can help me track down the issue and resolve it.

[PaulDotmatics]

No that doesnt work either changes the error to:

Timed out retrying after 4000ms: Expected to find content: 'Select All' within the element: but never did.

a little rework of the function works:

setAGCheckboxFilter(agGridLocator, columnName, value) {
    let columnIndex;
    //First we search the grid for the column heading
    this.getColumnHeaderElement(agGridLocator, columnName)
      .parents('.ag-header-cell')
      .then(($ele) => {
        cy.wrap($ele)
          .invoke('attr', 'aria-colindex')
          .then((colIndex) => {
            columnIndex = colIndex;
          })
          .then(() => {
            //Then we grab the filter button and open the floating menu
            cy.wrap($ele)
              .parents('.ag-header-row-column')
              .siblings('.ag-header-row-column-filter')
              .find(`.ag-header-cell[aria-colindex=${columnIndex}]`)
              .find('.ag-floating-filter-button')
              .click();
          })
          .then(() => {
            //Then we scan the filter for which checkbox we want and click the option
            this.selectAGCheckbox(value);
          });
      });
  }

  getColumnHeaderElement(agGridLocator, columnName) {
    return cy
      .get(agGridLocator)
      .find('.ag-header-cell-text')
      .contains(new RegExp('^' + columnName + '$', 'g'));
  }
  selectAGCheckbox(value) {
    cy.get('.selection-column-filter-checkbox-container')
      .contains(value)
      .click();
  }

[irene604]

ehavior, please? If you're able to provide a minimally reproducible solution, that can help me track down the is

I have the same issue

[kpmck]

Hi @irene604 , @JewlsIOB , @PaulDotmatics just checking in if anyone has a reproducible solution I can take a look at? Please let me know. If not, I will need to close this issue as stale.

[PaulDotmatics]

Sorry I cant provide a hosted version of it, all I can give is

{ field: "testField", filter: SelectionColumnFilter, floatingFilterComponent: SelectionColumnFloatingFilter, floatingFilter: true, suppressMenu: true, filterParams: { getSelectionOptions: () => TestData.getData(Token).then((response) => response.data), },

I have given a rework that works