Skip to main content

externalComputedStyle <Native_Element_Type>

Uses the actor's ability to BrowseTheWeb to retrieve the value of the specified computed style property of a given PageElement.

Example widget

<ul id="shopping-list" style="display: block">
  <li style="display: block">Coffee<li>
  <li style="display: none">Honey<li>
  <li style="display: block">Chocolate<li>
</ul>

Retrieve a computed style property of a given PageElement

import { actorCalled } from '@serenity-js/core'
import { Ensure, equals } from '@serenity-js/assertions'
import { ComputedStyle, By, PageElement } from '@serenity-js/web'

const shoppingList = () =>
  PageElement.located(By.id('shopping-list'))
     .describedAs('shopping list')

await actorCalled('Lisa').attemptsTo(
  Ensure.that(
    ComputedStyle.called('display').of(shoppingList()),
    equals('block')
  ),
)

Using ComputedStyle as QuestionAdapter

import { actorCalled } from '@serenity-js/core'
import { Ensure, equals } from '@serenity-js/assertions'
import { Attribute, By, PageElement } from '@serenity-js/web'

const shoppingList = () =>
  PageElement.located(By.css('#shopping-list'))
    .describedAs('shopping list')

await actorCalled('Lisa').attemptsTo(
  Ensure.that(
    ComputedStyle.called('display').of(shoppingList()).toLocaleUpperCase(),
    equals('BLOCK')
  ),
)

Using as filter in Page Element Query Language

import { actorCalled } from '@serenity-js/core'
import { Ensure, includes } from '@serenity-js/assertions'
import { Attribute, By, PageElements } from '@serenity-js/web'

class ShoppingList {
  static items = () =>
    PageElements.located(By.css('#shopping-list li'))
      .describedAs('items')

  static outstandingItems = () =>
    ShoppingList.items()
      .where(
        ComputedStyle.called('display'),
        equals('block')
      )
}

await actorCalled('Lisa')
 .whoCan(BrowseTheWebWithWebdriverIO.using(browser))
 .attemptsTo(
   Ensure.that(
     Text.ofAll(ShoppingList.outstandingItems()),
     equals([ 'Honey', 'Chocolate' ])
   ),
 )

Learn more

Hierarchy

Implements

Index

Methods

Screenplay Pattern

Methods

staticexternalcalled

externaldescribedAs

  • Changes the description of this object, as returned by Describable.describedBy and Describable.toString.

    Parameters

    • externaldescription: Answerable<string> | MetaQuestion<string, Question<Promise<string>>>

      Replaces the current description according to the following rules:

      • If description is an Answerable, it replaces the current description
      • If description is a MetaQuestion, the current description is passed as context to description.of(context), and the result replaces the current description

    Returns this

externaldescribedBy

  • Resolves the description of this object in the context of the provided actor.

    Parameters

    Returns Promise<string>

externaltoString

  • toString(): string

  • Returns a human-readable description of this object.

    Returns string

externalofPseudoElement

externalof

externalansweredBy

Screenplay Pattern

externalas

  • Maps this question's resolved answer to a QuestionAdapter of a different type.

    Provide a function to transform the resolved answer:

    import { Question } from '@serenity-js/core'

    const number = Question.about('number returned as text', () => '42')
      .as(Number)

    const name = Question.about('name with whitespace', () => ' Alice ')
      .as(value => value.trim())

    const firstValue = Question.about('available values', () => ['first', 'second'])
      .as(values => values[0])

    Alternatively, provide a constructor. When you call .as(MyClass), Serenity/JS passes the resolved answer as MyClass's sole constructor argument. This is particularly useful when wrapping a mounted UI component in an Interaction Object for component testing:

    const card = story('components/UserCard/Default', { name: 'Alice' }).as(UserCard)

    To distinguish a mapping function from a constructor, Serenity/JS calls the mapping as a function first. If that throws a TypeError and the mapping has a prototype (indicating an ES6 class), Serenity/JS retries with new. This preserves the primitive result of Number(42), rather than producing a Number wrapper object.

    Learn more

    Type parameters

    • O

    Parameters

    • externalmapping: (answer: string) => O | Promise<O>

      A function that transforms the resolved answer, or a constructor that receives it as its sole argument.

      Returns QuestionAdapter<O>

      A QuestionAdapter that resolves to the mapped answer.

    Page Options