angular/components · error · Error

Could not find tab matching filters: ${JSON.stringify(filter

Error message

Could not find tab matching filters: ${JSON.stringify(filters)}

What it means

selectTab is a convenience method on the tabs harness that finds tabs matching TabHarnessFilters and clicks the first match. If zero tabs match the filters, there is nothing to select, so it throws with the serialized filters.

Source

Thrown at src/aria/tabs/testing/tabs-harness.ts:109

    return new HarnessPredicate(TabsHarness, options);
  }

  /** Gets all tabs inside the tabs container. */
  async getTabs(filters: TabHarnessFilters = {}): Promise<TabHarness[]> {
    return await this.locatorForAll(TabHarness.with(filters))();
  }

  /** Gets the currently selected tab. */
  async getSelectedTab(): Promise<TabHarness | null> {
    const tabs = await this.getTabs({selected: true});
    return tabs.length > 0 ? tabs[0] : null;
  }

  /** Selects a tab matching the given filters. */
  async selectTab(filters: TabHarnessFilters = {}): Promise<void> {
    const tabs = await this.getTabs(filters);
    if (tabs.length === 0) {
      throw new Error(`Could not find tab matching filters: ${JSON.stringify(filters)}`);
    }
    await tabs[0].select();
  }
}

View on GitHub (pinned to 0411926e7d)

Solutions

Verify the filter matches a rendered tab (await getTabs() first and inspect length).
Loosen or correct the filter (e.g. text substring, remove extra filters).
Ensure the tab group is rendered/initialized before selecting (flush change detection, await whenStable).
Guard with a check: const tabs = await harness.getTabs(filters); if (tabs.length) await tabs[0].select();
Use getTabsAtIndex/selectedTab APIs when you want index-based or current-tab behavior.

Example fix

// before
await harness.selectTab({text: 'Setings'});
// after
const tabs = await harness.getTabs();
const target = tabs.find(async t => (await t.getLabel()) === 'Settings');
if (!target) throw new Error('Settings tab not rendered');
await target.select();

Defensive patterns

Strategy: validation

Validate before calling

const tabs = await harness.getTabs(filters);
if (tabs.length === 0) throw new Error(`No tab matches ${JSON.stringify(filters)}`);
await tabs[0].select();

Try / catch

try {
  await harness.selectTab({text: 'Settings'});
} catch (e) {
  if ((e as Error).message.startsWith('Could not find tab matching filters')) {
    console.warn('Tab missing; rendering may be lazy');
  } else throw e;
}

Prevention

Fetch getTabs() and assert count before selecting.
Keep tab labels in constants shared between templates and tests.
Flush change detection/await stability before interacting with lazy tab groups.

When it happens

Trigger: Calling harness.selectTab({text: 'Settings'}) (or label/other filters) where no rendered tab matches; tabs not yet rendered; filter text mismatching due to whitespace/case; wrong harness instance (another tab group).

Common situations: Typo or renamed tab label after a UI change; asserting on tabs inside a lazy-rendered tab group before change detection runs; using a filter field not supported/overridden by the tab harness.

Related errors

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