import {Target} from '@serenity-js/webdriverio/lib/screenplay/questions'
public class | source

Target

Provides a convenient way to retrieve a single web element or multiple web elements, so that they can be used with Serenity/JS Interactions.

Check out the examples below, as well as the unit tests demonstrating the usage.

Examples:

Imaginary website under test
  <body>
      <ul id="basket">
          <li><a href="#">Apple</a></li>
          <li><a href="#">Banana</a></li>
          <li><a href="#">Coconut</a></li>
          <li><a href="#" class="has-discount">Date</a></li>
      </ul>
      <div id="summary">
          <strong class="out-of-stock">Coconut</strong> is not available
      </div>
      <button type="submit">Proceed to Checkout</button>
  </body>
Locating a single element
  import { by, Target, TargetElement } from '@serenity-js/webdriverio';

  const proceedToCheckoutButton: TargetElement =
      Target.the('Proceed to Checkout button').located(by.css(`button[type='submit']`));
Locating multiple elements
  import { by, Target, TargetElements } from '@serenity-js/webdriverio';

  const basketItems: TargetElements =
      Target.all('items in the basket').located(by.css('ul#basket li'));
Locating element relative to another element
  import { by, Target, TargetElement } from '@serenity-js/webdriverio';

  const summary: TargetElement =
      Target.the('summary').located(by.id('message'));

  const outOfStockItem: TargetElement =
      Target.the('out of stock item').of(summary).located(by.css('.out-of-stock'))
Filtering elements matched by a locator
  import { by, Target, Text } from '@serenity-js/webdriverio';
  import { endsWith } from '@serenity-js/assertions';

  const basketItems =
      Target.all('items in the basket').located(by.css('ul#basket li'))
         .where(Text, endsWith('e'));    // Apple, Date
Counting items matched by a locator
  import { endsWith } from '@serenity-js/assertions';
  import { Question } from '@serenity-js/core';
  import { by, Target, Text } from '@serenity-js/webdriverio';

  const basketItemsCount: Question<Promise<number>> =
      Target.all('items in the basket').located(by.css('ul#basket li'))
         .count()    // 4
Getting first item matched by a locator
  import { Question } from '@serenity-js/core';
  import { by, Target } from '@serenity-js/webdriverio';
  import { Element } from 'webdriverio';

  const apple: Question<Promise<Element<'async'>>>  =
      Target.all('items in the basket').located(by.css('ul#basket li'))
         .first()
Getting last item matched by a locator
  import { Question } from '@serenity-js/core';
  import { by, Target } from '@serenity-js/webdriverio';
  import { endsWith } from '@serenity-js/assertions';
  import { Element } from 'webdriverio';

  const date: Question<Promise<Element<'async'>>>  =
      Target.all('items in the basket').located(by.css('ul#basket li'))
         .last()
Getting nth item matched by a locator
  import { Question } from '@serenity-js/core';
  import { by, Target } from '@serenity-js/webdriverio';
  import { Element } from 'webdriverio';

  const banana: Question<Promise<Element<'async'>>>  =
      Target.all('items in the basket').located(by.css('ul#basket li'))
         .get(1)
Using multiple filters and nested targets
  import { Question } from '@serenity-js/core';
  import { contain, endsWith } from '@serenity-js/assertions';
  import { by, CSSClasses, Target, Text } from '@serenity-js/webdriverio';
  import { Element } from 'webdriverio';

  class Basket {
      static component = Target.the('basket').located(by.id('basket'));

      static items     = Target.all('items').located(by.css('li'))
         .of(Basket.component);

      static link      = Target.the('link').located(by.css('a'));
  }

  const date: Question<Promise<Element<'async'>>>  =
      Basket.items
         .where(Text, endsWith('e'))
         .where(CSSClasses.of(Basket.link), contain('has-discount'))
         .first()
Clicking on an element
  import { actorCalled } from '@serenity-js/core';
  import { BrowseTheWeb, Click } from '@serenity-js/webdriverio';

  actorCalled('Jane')
      .whoCan(BrowseTheWeb.using(browser))
      .attemptsTo(
          Click.on(proceedToCheckoutButton),
      );
Retrieving text of multiple elements and performing an assertion
  import { Ensure, contain } from '@serenity-js/assertions';
  import { actorCalled } from '@serenity-js/core';
  import { BrowseTheWeb, Text } from '@serenity-js/webdriverio';

  const basketItemNames = Text.ofAll(basketItems);

  actorCalled('Jane')
      .whoCan(BrowseTheWeb.using(browser))
      .attemptsTo(
          Ensure.that(basketItemNames, contain('Apple'))
      );
Waiting on an element
  import { actorCalled } from '@serenity-js/core';
  import { BrowseTheWeb, Wait, isClickable } from '@serenity-js/webdriverio';

  actorCalled('Jane')
      .whoCan(BrowseTheWeb.using(browser))
      .attemptsTo(
          Wait.until(proceedToCheckoutButton, isClickable()),
      );

Tests:

Static Method Summary

Static Public Methods
public static

all(description: string): TargetBuilder<TargetElements> & NestedTargetBuilder<TargetNestedElements>

Locates a group of Web elements

public static

the(description: string): TargetBuilder<TargetElement> & NestedTargetBuilder<TargetNestedElement>

Locates a single Web element

Static Public Methods

public static all(description: string): TargetBuilder<TargetElements> & NestedTargetBuilder<TargetNestedElements> source

Locates a group of Web elements

Params:

NameTypeAttributeDescription
description string

A human-readable name of the group of elements, which will be used in the report

Returns:

TargetBuilder<TargetElements> & NestedTargetBuilder<TargetNestedElements>

Tests:

public static the(description: string): TargetBuilder<TargetElement> & NestedTargetBuilder<TargetNestedElement> source

Locates a single Web element

Params:

NameTypeAttributeDescription
description string

A human-readable name of the element, which will be used in the report

Returns:

TargetBuilder<TargetElement> & NestedTargetBuilder<TargetNestedElement>