Skip to main content

CssClasses

Uses the actor’s ability to BrowseTheWeb to retrieve a list of CSS classes of a given PageElement.

Example widget

<ul id="shopping-list" class="active favourite">
  <li class="bought">Coffee<li>
  <li class="buy">Honey<li>
  <li class="buy">Chocolate<li>
</ul>

Retrieve CSS classes of a given PageElement

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

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

await actorCalled('Lisa')
  .attemptsTo(
    Ensure.that(
      CssClasses.of(shoppingList()),
      equals([ 'active', 'favourite' ])
    ),
  )

Using CssClasses as QuestionAdapter

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

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

await actorCalled('Lisa')
  .attemptsTo(
    Ensure.that(
      CssClasses.of(shoppingList()).length,
      equals(2)
    ),
    Ensure.that(
      CssClasses.of(shoppingList())[0],
      equals('active')
    ),
  )

Using as filter in Page Element Query Language

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

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

  static outstandingItems = () =>
    ShoppingList.items()
      .where(CssClasses, contain('buy'))
}

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

Learn more

Index

Constructors

Methods

Constructors

constructor

Methods

staticof