Skip to main content

externalBy

By produces a Selector used to locate a PageElement or PageElement on a web page. Selectors can be defined using a static value or a Question to be resolved at runtime.

Defining a selector using a static value

import { PageElement, By } from '@serenity-js/web'

class LoginForm {
  static usernameField = () =>
    PageElement.located(By.id('username'))              // locate element by its id
      .describedAs('username field')

  static passwordField = () =>
    PageElement.located(By.css('[data-test="password"]'))    // locate element using a CSS selector
      .describedAs('password field')
}

Defining a selector using a Question

Each method on this class accepts an Answerable to allow for dynamic resolution of the selector. This can be useful when the selector is not known at the time of writing the test, or when the selector needs to be calculated based on the state of the system under test.

The example below demonstrates how to use q to define a selector that includes a dynamic value.

import { q } from '@serenity-js/core'
import { PageElement, By } from '@serenity-js/web'

class FormField {
  static withTestId = (id: Answerable<string>) =>
    PageElement.located(By.css(q`input[data-test-id="${ id }"]`))
      .describedAs('form field')
}

Learn more

Index

Constructors

Methods

Constructors

externalconstructor

  • new By(): By

  • Returns By

Methods

staticexternalcss

staticexternalcssContainingText

staticexternaldeepCss

staticexternalid

staticexternaltagName

staticexternalxpath