externalScenariosView <NET>

Interaction object representing the Test Scenarios view in the HTML report.

Models the complete user workflow for finding, filtering, and inspecting test scenarios. Composes child interaction objects (SearchInput, FilterBar, ResultCount) that handle individual UI widgets, while the view itself exposes the high-level actions a user performs when navigating their test results.

On mobile viewports, search and filter controls live inside a bottom sheet rather than being always visible. The interaction object handles this transparently — the same find() and selectFilter() methods work regardless of viewport size when the { mobile: true } option is set.

Instantiation

import { ScenariosView, Navigation } from '@serenity-js/html-reporter/serenity';
import { By, PageElement } from '@serenity-js/web';

const scenariosView = new ScenariosView(
  PageElement.located(By.css('[data-testid="tests"]')).describedAs('scenarios view'),
  new Navigation(),
);

Wiring into a Playwright Test fixture

scenariosView: async ({ page, navigation }, use) => {
  const viewport = page.viewportSize();
  const options = { mobile: viewport ? viewport.width <= 768 : false };
  const rootElement = PageElement.located(By.css('[data-testid="tests"]'))
    .describedAs('scenarios view');
  await use(new ScenariosView(rootElement, navigation, options));
},

Usage in an integration test

await actor.attemptsTo(
  scenariosView.open(),
  scenariosView.selectFilter('Failed'),
  scenariosView.find('expired card'),

  Ensure.that(scenariosView.scenarioCount(), equals(1)),
  Ensure.that(scenariosView.scenarioCalled(failingTest).outcome(), equals('FAILURE')),
  Ensure.that(scenariosView.scenarioCalled(failingTest).sourceLocation(), includes('checkout.spec.ts')),
);

Hierarchy

• InteractionObject<NET>
  • ScenariosView

Index

Constructors

• constructor

Properties

• searchInput
• filterBar
• resultCount

Methods

• isPresent
• scenarioCount
• scenarioCalled
• scenarioNames
• find
• selectFilter
• resultCountText
• searchInputValue
• activeFilters
• runSelectorIsPresent
• runSelectorText
• searchUrl
• filterUrl
• scenarioDetailUrl
• open

Constructors

externalconstructor

• new ScenariosView<NET>(rootElement: PageElement<NET> | QuestionAdapter<PageElement<NET>>, navigation?: Navigation, options?: InteractionObjectOptions): ScenariosView<NET>

• Overrides InteractionObject.constructor

  Type parameters

  • NET

  Parameters

  • externalrootElement: PageElement<NET> | QuestionAdapter<PageElement<NET>>

  • externalnavigation: Navigation = ...

  • externaloptionaloptions: InteractionObjectOptions

  Returns ScenariosView<NET>

Properties

externalreadonlysearchInput

searchInput: SearchInput<NET> = ...

The search input widget. Available for direct use in component tests.

externalreadonlyfilterBar

filterBar: FilterBar<NET> = ...

The filter chip bar. Available for direct use in component tests.

externalreadonlyresultCount

resultCount: ResultCount<NET> = ...

The result count display. Available for direct use in component tests.

Methods

externalisPresent

• isPresent(): Answerable<boolean>

• Inherited from InteractionObject.isPresent

  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>

externalscenarioCount

• scenarioCount(): Question<Promise<number>>

• The number of scenario rows currently visible in the list.

  Reflects the current filter and search state — if filters are active, this returns only the count of matching scenarios.

  Example

  await actor.attemptsTo(
    scenariosView.selectFilter('Failed'),
    Ensure.that(scenariosView.scenarioCount(), equals(7)),
  );

  ---

  Returns Question<Promise<number>>

externalscenarioCalled

• scenarioCalled(name: string): ScenarioItem<NET>

• Locates a scenario by name and returns a ScenarioItem interaction object for inspecting its state or performing actions on it.

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

  Example

  const scenario = scenariosView.scenarioCalled('Payment should reject an expired card');
  
  await actor.attemptsTo(
    Ensure.that(scenario.outcome(), equals('FAILURE')),
    Ensure.that(scenario.sourceLocation(), includes('checkout.spec.ts')),
    scenario.viewDetails(),
  );

  ---

  Parameters

  • externalname: string

    Substring to match against scenario names

  Returns ScenarioItem<NET>

externalscenarioNames

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

• The display names of all currently visible scenarios.

  Example

  await actor.attemptsTo(
    Ensure.that(scenariosView.scenarioNames(), contain('Payment should reject an expired card')),
  );

  ---

  Returns Question<Promise<string[]>>

externalfind

• find(searchTerm: Answerable<string>): Task

• Searches for scenarios by entering text into the search input.

  On mobile viewports (when { mobile: true } is set), this opens the bottom sheet, enters the search term, and closes the sheet. On desktop, it types directly into the always-visible search input.

  Example

  await actor.attemptsTo(
    scenariosView.find('expired card'),
    Ensure.that(scenariosView.scenarioCount(), equals(1)),
  );

  ---

  Parameters

  • externalsearchTerm: Answerable<string>

    Text to search for (matches scenario names)

  Returns Task

externalselectFilter

• selectFilter(label: Answerable<string>): Task

• Activates a filter chip by label (e.g. 'Failed', 'Passed', 'Pending').

  On mobile viewports, opens the bottom sheet to access filters.

  Example

  await actor.attemptsTo(
    scenariosView.selectFilter('Failed'),
    Ensure.that(scenariosView.scenarioCount(), equals(7)),
  );

  ---

  Parameters

  • externallabel: Answerable<string>

    The filter chip label to activate

  Returns Task

externalresultCountText

• resultCountText(): QuestionAdapter<string>

• The displayed result count text (e.g. '7 of 23 scenarios').

  Example

  Ensure.that(scenariosView.resultCountText(), includes('7 of 23'))

  ---

  Returns QuestionAdapter<string>

externalsearchInputValue

• searchInputValue(): QuestionAdapter<string>

• The current value of the search input field.

  Example

  await actor.attemptsTo(
    scenariosView.find('checkout'),
    Ensure.that(scenariosView.searchInputValue(), equals('checkout')),
  );

  ---

  Returns QuestionAdapter<string>

externalactiveFilters

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

• Labels of the currently active (pressed) filter chips.

  Example

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

  ---

  Returns Question<Promise<string[]>>

externalrunSelectorIsPresent

• runSelectorIsPresent(): Answerable<boolean>

• Whether the run selector dropdown is present (visible when multiple runs exist).

  ---

  Returns Answerable<boolean>

externalrunSelectorText

• runSelectorText(): QuestionAdapter<string>

• The displayed text of the run selector dropdown.

  ---

  Returns QuestionAdapter<string>

externalsearchUrl

• searchUrl(searchTerm: string, runId?: string): string

• Builds URL for searching scenarios.

  ---

  Parameters

  • externalsearchTerm: string

    Search query (e.g., '@module:playwright-web', '@browser:chromium', 'authentication')

  • externaloptionalrunId: string

    Optional test run ID

  Returns string

  URL path with hash and query parameters

  Example

  view.searchUrl('@module:playwright-web')
  // → '#/tests?search=%40module%3Aplaywright-web'
  
  view.searchUrl('@module:playwright-web', '42')
  // → '#/tests?run=42&search=%40module%3Aplaywright-web'

externalfilterUrl

• filterUrl(filter: OutcomeFilter, runId?: string): string

• Builds URL for filtering scenarios by outcome.

  ---

  Parameters

  • externalfilter: OutcomeFilter

    Outcome filter type

  • externaloptionalrunId: string

    Optional test run ID

  Returns string

  URL path with hash and query parameters

  Example

  view.filterUrl('failed')
  // → '#/tests?filter=failed'
  
  view.filterUrl('passed', '42')
  // → '#/tests?run=42&filter=passed'

externalscenarioDetailUrl

• scenarioDetailUrl(scenario: { path: string; line?: number }, runId?: string): string

• Builds URL for viewing scenario detail.

  ---

  Parameters

  • externalscenario: { path: string; line?: number }

    Scenario source location

  • externalpath: string

  • externaloptionalline: number

  • externaloptionalrunId: string

    Optional test run ID

  Returns string

  URL path with hash and query parameters

  Example

  view.scenarioDetailUrl({ path: 'auth.spec.ts', line: 42 })
  // → '#/tests/auth.spec.ts%3A42'
  
  view.scenarioDetailUrl({ path: 'auth.spec.ts', line: 42 }, '8333')
  // → '#/tests/auth.spec.ts%3A42?run=8333'

externalopen

• open(): Task

• Navigates to the Test Scenarios view via the sidebar navigation.

  Example

  await actor.attemptsTo(
    scenariosView.open(),
    Ensure.that(scenariosView.scenarioCount(), isGreaterThan(0)),
  );

  ---

  Returns Task