Base class for UI component models. A component model is an abstraction of a playwright locator. Specific UI components can be modelled by extending this class and a UI structure can be represented through composition.

A component model is initiated with a parent object and an xpath. The DOM element which is represented by the model is found by applying the xpath relative to the parent.

The getLocator method exposes a playwright locator. This method can be used with 0 arguments to get a locator directly to the DOM element the model represents, or it can be used with an xpath argument to get a relative element.

Only XPATH selectors can be used. This is because xpaths are combined through string concatenation so that the selector for a component model is always absolute. An absolute xpath is convenient when debugging failed matches as it can be copied and analyzed with browser dev tools. This approach was preferred over using Playwright relative locators because relative locators are logged in test output as a series of selectors, possibly using mixed technologies.

Hierarchy

Constructors

  • A model which represents a DOM element.

    Parameters

    • parent: Page | FrameLocator | ComponentModel

      The playwright page object, frame or component model to be used as the parent of this component.

    • xpath: string

      A relative xpath to this component from the parent.

    • Optional nth: number

      Optional position of this component among xpath matches. Position is 1 indexed. Negative numbers count from the end.

    Returns NavigationCategory

Properties

label: Locator = ...

Label of navigation category

root: Page | FrameLocator

The root playwright entity from which to resolve this component model's xpath.

xpath: string

An absolute xpath to the DOM element that this component model represents.

Methods

  • This method gets a child component model with a provided type. This is useful for modelling a page where the UI is composed in a custom manner.

    Type Parameters

    Parameters

    • model: ComponentModelType<TModel>

      A ComponentModel type. e.g. ToggleButton / Modal

    • Optional xpath: string

      An optional xpath relative to this component. If not provided, the model's default xpath will be used.

    • Optional nth: number

      Optional position among matches. Position is 1 indexed. Negative numbers count from the end.

    Returns TModel

  • This method gets a locator to the DOM element represented by this component model.

    Returns Locator

  • This method gets a locator to a DOM element relative to the element represented by this component model.

    Parameters

    • xpath: string

      An xpath relative to this component.

    • Optional nth: number

      Optional position among matches. Position is 1 indexed. Negative numbers count from the end.

    Returns Locator

  • Gets navigation item by matching label text in the navigation category

    Parameters

    • label: string

      Text of the navigation item label

    • nth: number = 1

      1-based index. Specifies which match to return in case multiple items match label, defaults to 1

    Returns Locator

  • Gets navigation item group by position

    Parameters

    • position: number

      1-based index. Negative numbers count from the end.

    Returns NavigationItemGroup

  • Gets navigation item group by matching groups label text in category

    Parameters

    • label: string

      Navigation item label text to use for matches

    • nth: number = 1

      1-based index. Specifies which match to return in case multiple items match label, defaults to 1

    Returns NavigationItemGroup

Generated using TypeDoc