Select does not have options matching the specified filter

Error message

Select does not have options matching the specified filter

What it means

The Material select test harness throws this when `clickOptions(filter)` finds no options matching the given filter text. It fetches options via `getOptions(filter)` and fails fast when the result is empty instead of clicking nothing. It signals the harness query did not match any rendered option.

Source

Thrown at src/material/select/testing/select-harness.ts:140

      const trigger = await this.locatorFor(`.${this._prefix}-select-trigger`)();
      return trigger.click();
    }
  }

  /**
   * Clicks the options that match the passed-in filter. If the select is in multi-selection
   * mode all options will be clicked, otherwise the harness will pick the first matching option.
   */
  async clickOptions(filter?: OptionHarnessFilters): Promise<void> {
    await this.open();

    const [isMultiple, options] = await parallel(() => [
      this.isMultiple(),
      this.getOptions(filter),
    ]);

    if (options.length === 0) {
      throw Error('Select does not have options matching the specified filter');
    }

    if (isMultiple) {
      await parallel(() => options.map(option => option.click()));
    } else {
      await options[0].click();
    }
  }

  /** Closes the select's panel. */
  async close(): Promise<void> {
    if (await this.isOpen()) {
      // This is the most consistent way that works both in both single and multi-select modes,
      // but it assumes that only one overlay is open at a time. We should be able to make it
      // a bit more precise after #16645 where we can dispatch an ESCAPE press to the host instead.
      return (await this._backdrop()).click();
    }
  }

View on GitHub (pinned to 0411926e7d)

Solutions

Call `await select.open()` before `clickOptions` so options are rendered in the DOM.
Verify the filter text exactly matches the visible option text (or use a regex/substring that matches).
Assert `await harness.getOptions()` returns the expected options before clicking.
Check that the correct mat-select harness instance is being used (right control on the page).

Example fix

// before
const harness = await loader.getHarness(MatSelectHarness.with({selector: '#city'}));
await harness.clickOptions({text: 'New Yrok'});
// after
await harness.open();
await harness.clickOptions({text: 'New York'});

Defensive patterns

Strategy: validation

Validate before calling

await select.open();
const opts = await select.getOptions({text: 'New York'});
if (opts.length === 0) throw new Error('Expected option New York not found');
await select.clickOptions({text: 'New York'});

Type guard

null

Try / catch

try {
  await harness.clickOptions({text: 'New York'});
} catch (e) {
  if ((e as Error).message.includes('does not have options')) {
    throw new Error('Test fixture missing expected option: verify template/data');
  }
  throw e;
}

Prevention

Always call `open()` on the select harness before clicking options.
Match option text against the rendered label, not the underlying value.
Print `await harness.getOptionsText()` in failing tests to see available options.

When it happens

Trigger: `await harness.clickOptions({text: 'Foo'})` where no option's text matches 'Foo', the panel isn't open so options aren't rendered, or the filter string's case/whitespace differs from the option text.

Common situations: Test data renamed so the expected option text changed; forgetting to call `open()` before interacting; using partially matched text against options that render formatted values.

Related errors

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