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

  1. Provide `[pageSizeOptions]="[5, 10, 20]"` (2+ options) on the paginator
  2. Include 20 (or the target size) in `pageSizeOptions` so the option exists in the select
  3. 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

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


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