externalCapabilitiesView <NET>

Interaction object representing the Capabilities view in the HTML report.

Displays a requirements hierarchy tree with confidence scores, README panels, scenario lists, and filtering/sorting controls. The tree panel on the left shows capability nodes; selecting one shows its details (confidence, child capabilities, README content, scenarios) in the right panel.

Composes child interaction objects (SearchInput, FilterBar, ResultCount) for individual UI widgets.

On mobile viewports, the tree panel lives inside a bottom sheet. The same selectCapability(), find(), and selectFilter() methods work regardless of viewport size when the { mobile: true } option is set.

Instantiation

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

const capabilitiesView = new CapabilitiesView(
  PageElement.located(By.css('[data-testid="capabilities"]')).describedAs('capabilities view'),
  new Navigation(),
);

Usage in an integration test

await actor.attemptsTo(
  capabilitiesView.open(),
  capabilitiesView.selectCapability('Authentication'),
  Ensure.that(capabilitiesView.confidence(), includes('85')),
  Ensure.that(capabilitiesView.detailTitle(), equals('Authentication')),
  Ensure.that(capabilitiesView.childCapabilityNames(), contain('Login')),
);

Hierarchy

• InteractionObject<NET>
  • CapabilitiesView

Index

Constructors

• constructor

Properties

• searchInput
• filterBar
• resultCount

Methods

• confidence
• confidenceLabel
• scenarioCount
• childCapabilityNames
• readmeContent
• readmeIsPresent
• readmeIsCollapsible
• sortOptions
• selectedSort
• treeNodeLabels
• childTreeNodeLabels
• detailTitle
• readmeLinkHref
• emptyStateText
• open
• selectCapability
• selectFilter
• find
• followReadmeLink
• selectSort
• capabilityDetailUrl
• isPresent

Constructors

externalconstructor

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

• Overrides InteractionObject.constructor

  Type parameters

  • NET

  Parameters

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

  • externalnavigation: Navigation = ...

  • externaloptionaloptions: InteractionObjectOptions

  Returns CapabilitiesView<NET>

Properties

externalreadonlysearchInput

searchInput: SearchInput<NET> = ...

externalreadonlyfilterBar

filterBar: FilterBar<NET> = ...

externalreadonlyresultCount

resultCount: ResultCount<NET> = ...

Methods

externalconfidence

• confidence(): QuestionAdapter<string>

• The confidence score for the currently selected capability (e.g. '85%').

  Example

  Ensure.that(capabilitiesView.confidence(), equals('85%'))

  ---

  Returns QuestionAdapter<string>

externalconfidenceLabel

• confidenceLabel(): QuestionAdapter<string>

• The confidence label text (e.g. 'Confidence').

  Example

  Ensure.that(capabilitiesView.confidenceLabel(), equals('Confidence'))

  ---

  Returns QuestionAdapter<string>

externalscenarioCount

• scenarioCount(): QuestionAdapter<string>

• The scenario count text for the selected capability (e.g. '12 scenarios').

  Example

  Ensure.that(capabilitiesView.scenarioCount(), includes('12'))

  ---

  Returns QuestionAdapter<string>

externalchildCapabilityNames

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

• The names of child capabilities listed in the detail panel.

  Example

  Ensure.that(capabilitiesView.childCapabilityNames(), contain('Login'))

  ---

  Returns Question<Promise<string[]>>

externalreadmeContent

• readmeContent(): QuestionAdapter<string>

• The rendered README content text for the selected capability.

  Example

  Ensure.that(capabilitiesView.readmeContent(), includes('Authentication module'))

  ---

  Returns QuestionAdapter<string>

externalreadmeIsPresent

• readmeIsPresent(): Question<Promise<boolean>>

• Whether the README section is present for the selected capability.

  Example

  Ensure.that(capabilitiesView.readmeIsPresent(), equals(true))

  ---

  Returns Question<Promise<boolean>>

externalreadmeIsCollapsible

• readmeIsCollapsible(): Question<Promise<boolean>>

• Whether the README section is inside a collapsible <details> element.

  Example

  Ensure.that(capabilitiesView.readmeIsCollapsible(), equals(true))

  ---

  Returns Question<Promise<boolean>>

externalsortOptions

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

• The labels of all available sort dropdown options.

  Example

  Ensure.that(capabilitiesView.sortOptions(), equals(['Name', 'Confidence', 'Scenarios']))

  ---

  Returns Question<Promise<string[]>>

externalselectedSort

• selectedSort(): QuestionAdapter<string>

• The currently selected sort option value.

  Example

  Ensure.that(capabilitiesView.selectedSort(), equals('name'))

  ---

  Returns QuestionAdapter<string>

externaltreeNodeLabels

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

• The labels of all tree nodes in the capability hierarchy.

  Example

  Ensure.that(capabilitiesView.treeNodeLabels(), contain('Authentication'))

  ---

  Returns Question<Promise<string[]>>

externalchildTreeNodeLabels

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

• The labels of child tree nodes (excluding the root node).

  Example

  Ensure.that(capabilitiesView.childTreeNodeLabels(), equals(['Login', 'Logout']))

  ---

  Returns Question<Promise<string[]>>

externaldetailTitle

• detailTitle(): QuestionAdapter<string>

• The title text shown in the detail panel for the selected capability.

  Example

  Ensure.that(capabilitiesView.detailTitle(), equals('Authentication'))

  ---

  Returns QuestionAdapter<string>

externalreadmeLinkHref

• readmeLinkHref(linkText: string): QuestionAdapter<string>

• The href attribute of a link within the README content, located by link text.

  Example

  Ensure.that(capabilitiesView.readmeLinkHref('API docs'), includes('serenity-js.org'))

  ---

  Parameters

  • externallinkText: string

    Substring to match against link text within the README

  Returns QuestionAdapter<string>

externalemptyStateText

• emptyStateText(): QuestionAdapter<string>

• The empty state text shown when no capabilities are found.

  Example

  Ensure.that(capabilitiesView.emptyStateText(), includes('No capabilities'))

  ---

  Returns QuestionAdapter<string>

externalopen

• open(): Task

• Navigates to the Capabilities view via the sidebar navigation.

  Example

  await actor.attemptsTo(
    capabilitiesView.open(),
  );

  ---

  Returns Task

externalselectCapability

• selectCapability(name: Answerable<string>): Task

• Selects a capability node in the tree by its label text.

  Example

  await actor.attemptsTo(
    capabilitiesView.selectCapability('Authentication'),
    Ensure.that(capabilitiesView.detailTitle(), equals('Authentication')),
  );

  ---

  Parameters

  • externalname: Answerable<string>

    Substring to match against tree node labels

  Returns Task

externalselectFilter

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

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

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

  Example

  await actor.attemptsTo(
    capabilitiesView.selectFilter('Failed'),
  );

  ---

  Parameters

  • externallabel: Answerable<string>

    The filter chip label to activate

  Returns Task

externalfind

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

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

  On mobile viewports, opens the tree bottom sheet to access the search input.

  Example

  await actor.attemptsTo(
    capabilitiesView.find('auth'),
  );

  ---

  Parameters

  • externalsearchTerm: Answerable<string>

    Text to search for (matches capability names)

  Returns Task

externalfollowReadmeLink

• followReadmeLink(linkText: Answerable<string>): Task

• Clicks a link within the README content section.

  Example

  await actor.attemptsTo(
    capabilitiesView.followReadmeLink('API documentation'),
  );

  ---

  Parameters

  • externallinkText: Answerable<string>

    Substring to match against link text within the README

  Returns Task

externalselectSort

• selectSort(option: Answerable<string>): Task

• Selects a sort option from the sort dropdown.

  On mobile viewports, opens the tree bottom sheet to access the sort dropdown.

  Example

  await actor.attemptsTo(
    capabilitiesView.selectSort('confidence'),
    Ensure.that(capabilitiesView.selectedSort(), equals('confidence')),
  );

  ---

  Parameters

  • externaloption: Answerable<string>

    The sort option value to select

  Returns Task

externalcapabilityDetailUrl

• capabilityDetailUrl(path: string): string

• Builds URL for viewing capability detail.

  ---

  Parameters

  • externalpath: string

    Capability tree path (e.g., 'authentication/login')

  Returns string

  URL path with hash and query parameters

  Example

  view.capabilityDetailUrl('authentication/login')
  // → '#/capabilities?path=authentication%2Flogin'

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>