angular/components · error
Cannot find page size selector in paginator. Make sure that
Error message
Cannot find page size selector in paginator. Make sure that the `pageSizeOptions` have been configured.
What it means
MatPaginatorHarness `setPageSize()` throws because the page-size `<mat-select>` is only rendered when `pageSizeOptions` contains more than one option. Without a selector there is nothing to click.
Source
Thrown at src/material/paginator/testing/paginator-harness.ts:108
'Could not find last page button inside paginator. ' +
'Make sure that `showFirstLastButtons` is enabled.',
);
}
return button.click();
}
/**
* Sets the page size of the paginator.
* @param size Page size that should be select.
*/
async setPageSize(size: number): Promise<void> {
const select = await this._select();
// The select is only available if the `pageSizeOptions` are
// set to an array with more than one item.
if (!select) {
throw Error(
'Cannot find page size selector in paginator. ' +
'Make sure that the `pageSizeOptions` have been configured.',
);
}
return select.clickOptions({text: `${size}`});
}
/** Gets the page size of the paginator. */
async getPageSize(): Promise<number> {
const select = await this._select();
const value = select ? select.getValueText() : (await this._pageSizeFallback()).text();
return coerceNumberProperty(await value);
}
/** Gets the text of the range label of the paginator. */
async getRangeLabel(): Promise<string> {
return (await this._rangeLabel()).text();View on GitHub (pinned to 0411926e7d)
Solutions
- Provide `[pageSizeOptions]="[5, 10, 20]"` (2+ options) on the paginator
- Include 20 (or the target size) in `pageSizeOptions` so the option exists in the select
- Set `pageSize` directly via component input if changing options is not intended
Example fix
// before <mat-paginator [pageSizeOptions]="[10]"></mat-paginator> // after <mat-paginator [pageSizeOptions]="[10, 20]"></mat-paginator>
Defensive patterns
Strategy: validation
Validate before calling
const select = await paginatorHarness.getPageSizeSelect?.();
if (!select) {
throw new Error('pageSizeOptions must have 2+ entries to use setPageSize');
} Try / catch
try {
await paginatorHarness.setPageSize(20);
} catch (e) {
if (String(e?.message).includes('page size selector')) {
fail('Add [pageSizeOptions]="[5,10,20]" to the paginator');
}
throw e;
} Prevention
- Always configure pageSizeOptions with multiple sizes in test fixtures
- Include the target size in pageSizeOptions
- Set pageSize directly when selector is not needed
When it happens
Trigger: `await paginatorHarness.setPageSize(20)` when the paginator has no `pageSizeOptions` input, a single-element array, or `pageSize: fixed` style usage.
Common situations: Paginator configured with a fixed page size for the test; `pageSizeOptions` forgotten in the test fixture; array defined with only one option.
Related errors
- Could not find first page button inside paginator. Make sure
- Could not find last page button inside paginator. Make sure
- Could not find item matching ${JSON.stringify(itemFilter)}
- Item matching ${JSON.stringify(itemFilter)} does not have a
- Radio buttons in radio-group have mismatching names.
AI-assisted analysis of angular/components@0411926e7d (2026-08-31).
Data as JSON: /api/errors/143fddef66caa5b8.
Report an issue: GitHub.