angular/components · error · Error

Cannot find calendar cell matching filter ${JSON.stringify(f

Error message

Cannot find calendar cell matching filter ${JSON.stringify(filter)}

What it means

The MatCalendarHarness test helper's selectCell(filter) locates calendar cells matching the given filters and throws a plain Error when no cell matches. This is a harness lookup failure, not a runtime application error.

Source

Thrown at src/material/datepicker/testing/calendar-harness.ts:89

  }

  /**
   * Goes to the previous page of the current view
   * (e.g. previous month when inside the month view).
   */
  async previous(): Promise<void> {
    return (await this.locatorFor('.mat-calendar-previous-button')()).click();
  }

  /**
   * Selects a cell in the current calendar view.
   * @param filter An optional filter to apply to the cells. The first cell matching the filter
   *     will be selected.
   */
  async selectCell(filter: CalendarCellHarnessFilters = {}): Promise<void> {
    const cells = await this.getCells(filter);
    if (!cells.length) {
      throw Error(`Cannot find calendar cell matching filter ${JSON.stringify(filter)}`);
    }
    await cells[0].select();
  }
}

View on GitHub (pinned to 0411926e7d)

Solutions

Ensure the calendar is open and displaying the expected view before calling selectCell
Make the filter specific but correct, e.g. selectCell({text: '15'}) after navigating to the right month via harness APIs (previous/next buttons or setDate)
Use getCells() first and log available cells to debug filter mismatches
Await rendering with harness.waitForTasksOutsideAngular() or MatCalendarHarness readiness checks

Example fix

// before
await calendar.selectCell({text: '31'}); // wrong month in view
// after
await calendar.next(); // navigate to the month containing the 31st
await calendar.selectCell({text: '31'});

Defensive patterns

Strategy: type-guard

Validate before calling

const cells = await calendar.getCells(filter);
if (!cells.length) {
  console.warn('No cell matches filter; check month/year in view');
  return;
}
await cells[0].select();

Type guard

function hasCells(cells: MatCalendarCellHarness[]): cells is [MatCalendarCellHarness, ...MatCalendarCellHarness[]] {
  return cells.length > 0;
}

Try / catch

try {
  await calendar.selectCell({text: '15'});
} catch (e) {
  if ((e as Error).message.includes('Cannot find calendar cell')) {
    // navigate calendar view and retry
  }
}

Prevention

Navigate to the correct month/year before selecting cells
Use getCells() to inspect available cells when debugging filters
Account for locale formatting in cell text when writing filters

When it happens

Trigger: Calling harness.selectCell({text: '15'}) (or any CalendarCellHarnessFilters) when the calendar's current view contains no cell matching the filter — wrong day number, wrong month/year displayed, or an empty filter on a disabled calendar.

Common situations: Testing a datepicker where the test navigated to the wrong month; cells rendered but filter text mismatches displayed value (e.g. locale-formatted numbers); attempting to select a cell before the calendar is open/rendered.

Related errors

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/425ecebf64ac3ce9. Report an issue: GitHub.