import {Target} from '@serenity-js/protractor/lib/screenplay/questions/targets'
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 { Target } from '@serenity-js/protractor';
  import { by } from 'protractor';

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

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

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

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

  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 { Target, Text } from '@serenity-js/protractor';
  import { endsWith } from '@serenity-js/assertions';
  import { Question } from '@serenity-js/core';
  import { by } from 'protractor';

  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 { Target, Text } from '@serenity-js/protractor';
  import { endsWith } from '@serenity-js/assertions';
  import { by, ElementFinder } from 'protractor';

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

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

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

  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<ElementFinder>  =
      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/protractor';
  import { protractor } from 'protractor';

  actorCalled('Jane')
      .whoCan(BrowseTheWeb.using(protractor.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, Click, Text } from '@serenity-js/protractor';
  import { protractor } from 'protractor';

  const basketItemNames = Text.ofAll(basketItems);

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

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

Tests:

Static Method Summary

Static Public Methods
public static

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

Locates a group of web elements

public static

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

Locates a single web element

Static Public Methods

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

Locates a group of web elements

Params:

NameTypeAttributeDescription
name string

A human-readable name of the elements to be used in the report

Returns:

TargetBuilder<TargetElements> & NestedTargetBuilder<TargetNestedElements>

Tests: