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

• BrowseTheWeb
• MetaQuestion
• QuestionAdapter
• Question

Hierarchy

• Question<Promise<string>>
  • ComputedStyle

Implements

• MetaQuestion<PageElement<Native_Element_Type>, Question<Promise<string>>>

Index

Methods

• called
• describedAs
• as
• describedBy
• toString
• ofPseudoElement
• of
• answeredBy

Methods

staticexternalcalled

• called<NET>(name: Answerable<string>): ComputedStyle<NET>

• Instantiates a Question that uses the actor's ability to BrowseTheWeb to retrieve the value of the specified computed style property of a given PageElement.

  ---

  Type parameters

  • NET = any

  Parameters

  • externalname: Answerable<string>

    The name of the computed style property to retrieve

  Returns ComputedStyle<NET>

externaldescribedAs

• describedAs(description: Answerable<string> | MetaQuestion<string, Question<Promise<string>>>): this

• Inherited from Question.describedAs

  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

• as<O>(mapping: (answer: string) => O | Promise<O>): QuestionAdapter<O>

• Inherited from Question.as

  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

• describedBy(actor: AnswersQuestions & UsesAbilities & { name: string }): Promise<string>

• Inherited from Question.describedBy

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

  ---

  Parameters

  • externalactor: AnswersQuestions & UsesAbilities & { name: string }

  Returns Promise<string>

externaltoString

• toString(): string

• Implementation of MetaQuestion.toString

  Inherited from Question.toString

  Returns a human-readable description of this object.

  ---

  Returns string

externalofPseudoElement

• ofPseudoElement(pseudoElement: Answerable<string>): MetaQuestionAdapter<PageElement<Native_Element_Type>, string>

• Instantiates a Question that uses the actor's ability to BrowseTheWeb to retrieve the value of the specified computed style property of the specified pseudo-element of a given PageElement.

  ---

  Parameters

  • externalpseudoElement: Answerable<string>

    The pseudo-element to retrieve the computed style property from, such as ::before or ::after

  Returns MetaQuestionAdapter<PageElement<Native_Element_Type>, string>

externalof

• of(pageElement: PageElement<Native_Element_Type> | QuestionAdapter<PageElement<Native_Element_Type>>): MetaQuestionAdapter<PageElement<Native_Element_Type>, string>

• Implementation of MetaQuestion.of

  Resolves to the value of a computed style property of the pageElement.

  Learn more

  • MetaQuestion

  ---

  Parameters

  • externalpageElement: PageElement<Native_Element_Type> | QuestionAdapter<PageElement<Native_Element_Type>>

  Returns MetaQuestionAdapter<PageElement<Native_Element_Type>, string>

externalansweredBy

• answeredBy(actor: AnswersQuestions & UsesAbilities): Promise<string>

• Overrides Question.answeredBy

  @inheritDoc

  ---

  Parameters

  • externalactor: AnswersQuestions & UsesAbilities

  Returns Promise<string>