Skip to main content

externalFilterBar <NET>

Interaction object representing a bar of toggle filter chips used to narrow results by outcome (Passed, Failed, Pending, etc.).

A FilterBar is composed into views like ScenariosView, ConsistencyView, and TagsView. It is not instantiated directly by tests — instead, views expose delegating methods like selectFilter() at the view level. The FilterBar instance itself is accessible for component tests that exercise the filter chip API in isolation.

Instantiation (within a parent interaction object)

import { FilterBar } from '@serenity-js/html-reporter/serenity';
import { By } from '@serenity-js/web';

export class MyView<NET> extends InteractionObject<NET> {
  readonly filterBar = new FilterBar(this.child(By.css('[data-testid="filter-bar"]')));
}

Usage in a component test

await actor.attemptsTo(
  filterBar.selectFilter('Failed'),
  Ensure.that(filterBar.activeFilters(), equals(['Failed'])),
  Ensure.that(filterBar.filterLabels(), equals(['All', 'Passed', 'Failed', 'Pending', 'Skipped'])),
);

Hierarchy

Index

Constructors

Methods

Constructors

externalconstructor

Methods

externalfilterLabels

  • filterLabels(): Question<Promise<string[]>>

  • The labels of all filter chips in the bar (e.g. ['All', 'Passed', 'Failed', 'Pending']).

    Returns the visible text of every chip regardless of its pressed state.

    Example

    await actor.attemptsTo(
      Ensure.that(filterBar.filterLabels(), equals(['All', 'Passed', 'Failed', 'Pending', 'Skipped'])),
    );

    Returns Question<Promise<string[]>>

externalactiveFilters

  • activeFilters(): Question<Promise<string[]>>

  • The labels of currently pressed (active) filter chips.

    Only returns chips where aria-pressed="true", indicating the filter is actively narrowing results.

    Example

    await actor.attemptsTo(
      filterBar.selectFilter('Failed'),
      Ensure.that(filterBar.activeFilters(), equals(['Failed'])),
    );

    Returns Question<Promise<string[]>>

externalselectFilter

  • Clicks a filter chip by its label text to toggle the filter on or off.

    Uses PEQL substring matching — the label doesn't need to be an exact match.

    Example

    await actor.attemptsTo(
      filterBar.selectFilter('Failed'),
      Ensure.that(filterBar.activeFilters(), equals(['Failed'])),
    );

    Parameters

    • externallabel: Answerable<string>

      The filter chip label to click (e.g. 'Failed', 'Passed', 'Pending')

    Returns Task

externalselectedSort

  • The current value of the sort dropdown (e.g. 'name', 'duration', 'outcome').

    Example

    await actor.attemptsTo(
      Ensure.that(filterBar.selectedSort(), equals('name')),
    );

    Returns QuestionAdapter<string>

externallabel

  • The filter bar's heading text (e.g. 'FILTER BY OUTCOME').

    Example

    await actor.attemptsTo(
      Ensure.that(filterBar.label(), equals('FILTER BY OUTCOME')),
    );

    Returns QuestionAdapter<string>

externalisPresent

  • Checks whether the interaction object's root element is present in the DOM.

    Since InteractionObject implements Optional, you can assert on presence directly:

    Ensure.that(view, isPresent())

    Returns Answerable<boolean>

Page Options