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

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

externalas

  • Maps this question to one of a different type.

    Question.about('number returned as string', actor => '42')   // returns: QuestionAdapter<string>
      .as(Number)                                                // returns: QuestionAdapter<number>

    Type parameters

    • O

    Parameters

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

      Returns QuestionAdapter<O>

    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