angular/components · error

Could not find radio button matching ${JSON.stringify(filter

Error message

Could not find radio button matching ${JSON.stringify(filter)}

What it means

MatRadioGroupHarness `checkRadioButton()` throws when `getRadioButtons(filter)` returns an empty array, i.e. no child radio button matches the given filter object. It then cannot call `check()` on the first match.

Source

Thrown at src/material/radio/testing/radio-harness.ts:103

  }

  /**
   * Gets a list of radio buttons which are part of the radio-group.
   * @param filter Optionally filters which radio buttons are included.
   */
  async getRadioButtons(filter?: RadioButtonHarnessFilters): Promise<MatRadioButtonHarness[]> {
    return this.locatorForAll(this._buttonClass.with(filter))();
  }

  /**
   * Checks a radio button in this group.
   * @param filter An optional filter to apply to the child radio buttons. The first tab matching
   *     the filter will be selected.
   */
  async checkRadioButton(filter?: RadioButtonHarnessFilters): Promise<void> {
    const radioButtons = await this.getRadioButtons(filter);
    if (!radioButtons.length) {
      throw Error(`Could not find radio button matching ${JSON.stringify(filter)}`);
    }
    return radioButtons[0].check();
  }

  /** Gets the name attribute of the host element. */
  private async _getGroupNameFromHost() {
    return (await this.host()).getAttribute('name');
  }

  /** Gets a list of the name attributes of all child radio buttons. */
  private async _getNamesFromRadioButtons(): Promise<string[]> {
    const groupNames: string[] = [];
    for (let radio of await this.getRadioButtons()) {
      const radioName = await radio.getName();
      if (radioName !== null) {
        groupNames.push(radioName);
      }
    }

View on GitHub (pinned to 0411926e7d)

Solutions

1. Log `await groupHarness.getRadioButtons()` and align the filter with actual labels
2. Fix spelling/casing of the filter text
3. Ensure the radio buttons are rendered (check `*ngIf` conditions and test data)

Example fix

// before
await group.checkRadioButton({label: 'Opption A'});
// after
await group.checkRadioButton({label: 'Option A'});

const buttons = await groupHarness.getRadioButtons(filter);
if (!buttons.length) {
  throw new Error(`No radio button matches ${JSON.stringify(filter)}`);
}

function isNonEmpty<T>(arr: T[]): arr is [T, ...T[]] { return arr.length > 0; }

try {
  await groupHarness.checkRadioButton({label: 'Option A'});
} catch (e) {
  if (String(e?.message).startsWith('Could not find radio button matching')) {
    fail(`Filter ${JSON.stringify(filter)} matched no radio button`);
  }
  throw e;
}

When it happens

Trigger: `await groupHarness.checkRadioButton({label: 'Option 2'})` where no button's label matches, the group rendered no buttons, or filter text differs in case/whitespace.

Common situations: Label text changed in template; using `label` vs `selector` filters incorrectly; radios not rendered due to `*ngIf`; testing a group fixture without the buttons added.

Related errors

• Radio buttons in radio-group have mismatching names.
• The locator found a radio-group with name "${name}", but som
• Could not find item matching ${JSON.stringify(itemFilter)}
• Item matching ${JSON.stringify(itemFilter)} does not have a
• Could not find first page button inside paginator. Make sure

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