externalTagsView <NET>

Interaction object representing the Tags view in the HTML report.

Groups scenarios by tag type (e.g. @feature, @issue, @browser) with cards showing pass/fail counts for each tag value. Supports searching and filtering to narrow the displayed tag cards.

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

On mobile viewports, search and filter controls live inside a bottom sheet. The same find() and selectFilter() methods work regardless of viewport size when the { mobile: true } option is set.

Instantiation

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

const tagsView = new TagsView(
  PageElement.located(By.css('[data-testid="tags"]')).describedAs('tags view'),
  new Navigation(),
);

Usage in an integration test

await actor.attemptsTo(
  tagsView.open(),
  Ensure.that(tagsView.tagCount(), isGreaterThan(0)),
  Ensure.that(tagsView.groupHeadings(), contain('Feature')),
  tagsView.selectTag('@checkout'),
);

Hierarchy

• InteractionObject<NET>
  • TagsView

Index

Constructors

• constructor

Properties

• searchInput
• filterBar
• resultCount

Methods

• isPresent
• tagCount
• tagNames
• groupHeadings
• tagCardText
• selectTag
• find
• selectFilter
• resultCountText
• open

Constructors

externalconstructor

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

• Overrides InteractionObject.constructor

  Type parameters

  • NET

  Parameters

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

  • externalnavigation: Navigation = ...

  • externaloptionaloptions: InteractionObjectOptions

  Returns TagsView<NET>

Properties

externalreadonlysearchInput

searchInput: SearchInput<NET> = ...

externalreadonlyfilterBar

filterBar: FilterBar<NET> = ...

externalreadonlyresultCount

resultCount: ResultCount<NET> = ...

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>

externaltagCount

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

• The number of tag cards currently visible.

  Example

  Ensure.that(tagsView.tagCount(), equals(12))

  ---

  Returns Question<Promise<number>>

externaltagNames

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

• The display names of all currently visible tag cards.

  Example

  Ensure.that(tagsView.tagNames(), contain('@checkout'))

  ---

  Returns Question<Promise<string[]>>

externalgroupHeadings

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

• The group heading labels (e.g. 'Feature', 'Issue', 'Browser').

  Example

  Ensure.that(tagsView.groupHeadings(), equals(['Feature', 'Issue']))

  ---

  Returns Question<Promise<string[]>>

externaltagCardText

• tagCardText(name: string): QuestionAdapter<string>

• The full rendered text of a specific tag card (includes name and counts).

  Example

  Ensure.that(tagsView.tagCardText('@checkout'), includes('5 passed'))

  ---

  Parameters

  • externalname: string

    Substring to match against tag card text

  Returns QuestionAdapter<string>

externalselectTag

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

• Clicks a tag card to navigate to its associated scenario list.

  Example

  await actor.attemptsTo(
    tagsView.selectTag('@checkout'),
  );

  ---

  Parameters

  • externalname: Answerable<string>

    Substring to match against tag card text

  Returns Task

externalfind

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

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

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

  Example

  await actor.attemptsTo(
    tagsView.find('checkout'),
    Ensure.that(tagsView.tagCount(), equals(1)),
  );

  ---

  Parameters

  • externalsearchTerm: Answerable<string>

    Text to search for (matches tag names)

  Returns Task

externalselectFilter

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

• Activates a filter chip by label (e.g. 'Feature', 'Issue').

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

  Example

  await actor.attemptsTo(
    tagsView.selectFilter('Feature'),
    Ensure.that(tagsView.tagCount(), isGreaterThan(0)),
  );

  ---

  Parameters

  • externallabel: Answerable<string>

    The filter chip label to activate

  Returns Task

externalresultCountText

• resultCountText(): QuestionAdapter<string>

• The displayed result count text.

  Example

  Ensure.that(tagsView.resultCountText(), includes('12 tags'))

  ---

  Returns QuestionAdapter<string>

externalopen

• open(): Task

• Navigates to the Tags view via the sidebar navigation.

  Example

  await actor.attemptsTo(
    tagsView.open(),
    Ensure.that(tagsView.tagCount(), isGreaterThan(0)),
  );

  ---

  Returns Task