Could not find first page button inside paginator. Make sure

Error message

Could not find first page button inside paginator. Make sure that `showFirstLastButtons` is enabled.

What it means

MatPaginatorHarness `goToFirstPage()` throws because the first/last page buttons are only rendered when `showFirstLastButtons` is true. The harness found no first-page button and refuses to silently no-op.

Source

Thrown at src/material/paginator/testing/paginator-harness.ts:74

  /* Returns whether or not the previous page button is disabled. */
  async isPreviousPageDisabled(): Promise<boolean> {
    const disabledValue = await (await this._previousButton()).getAttribute('aria-disabled');
    return disabledValue == 'true';
  }

  /** Goes to the previous page in the paginator. */
  async goToPreviousPage(): Promise<void> {
    return (await this._previousButton()).click();
  }

  /** Goes to the first page in the paginator. */
  async goToFirstPage(): Promise<void> {
    const button = await this._firstPageButton();

    // The first page button isn't enabled by default so we need to check for it.
    if (!button) {
      throw Error(
        'Could not find first page button inside paginator. ' +
          'Make sure that `showFirstLastButtons` is enabled.',
      );
    }

    return button.click();
  }

  /** Goes to the last page in the paginator. */
  async goToLastPage(): Promise<void> {
    const button = await this._lastPageButton();

    // The last page button isn't enabled by default so we need to check for it.
    if (!button) {
      throw Error(
        'Could not find last page button inside paginator. ' +
          'Make sure that `showFirstLastButtons` is enabled.',
      );

View on GitHub (pinned to 0411926e7d)

Solutions

Add `showFirstLastButtons` to the paginator template
Use `goToPage()`/`nextPage()` instead if first/last buttons are intentionally disabled
Assert `showFirstLastButtons` in the component under test if it should be enabled

Example fix

// before
<mat-paginator [pageSizeOptions]="[5, 10]"></mat-paginator>
// after
<mat-paginator [pageSizeOptions]="[5, 10]" [showFirstLastButtons]="true"></mat-paginator>

Defensive patterns

Strategy: validation

Validate before calling

const btn = await paginatorHarness.getFirstPageButton?.() ?? null;
// or simply verify the template input before using the harness:
// <mat-paginator [showFirstLastButtons]="true">

Try / catch

try {
  await paginatorHarness.goToFirstPage();
} catch (e) {
  if (String(e?.message).includes('first page button')) {
    fail('Enable showFirstLastButtons on the paginator under test');
  }
  throw e;
}

Prevention

Set showFirstLastButtons whenever harness tests use goToFirstPage/goToLastPage
Prefer goToPage()/nextPage() when buttons are intentionally hidden
Assert paginator inputs in component tests

When it happens

Trigger: `await paginatorHarness.goToFirstPage()` on a `<mat-paginator>` without `[showFirstLastButtons]="true"` (default is false).

Common situations: Paginator markup relies on defaults so first/last buttons are absent; a teammate removed the `showFirstLastButtons` input; test copied from a different paginator configuration.

Related errors

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