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

Locators

You can directly use an instance of this class. by

Locator factory. You probably want to use by instead in your tests.

Method Summary

Public Methods
public

css(selector: Selector): Locator

Locates elements using a CSS selector

public

id(id: string): Locator

Locates elements by their id attribute.

public

linkText(linkText: string): Locator

Locates an HTML anchor element with a specific text in it.

public

partialLinkText(partialLinkText: string): Locator

Locates an HTML anchor element with which visible text partially matches partialLinkText

public

tagName(tagName: string): Locator

Locates elements by HTML tag name

public

xpath(xpath: string): Locator

Locates elements using an XPath selector.

Public Methods

public css(selector: Selector): Locator source

Locates elements using a CSS selector

Params:

NameTypeAttributeDescription
selector Selector

Returns:

Locator

Examples:

Example widget
 <div id="article">
     <h1>Title</h1>
     <h2>Section 1</h2>
     <h2>Section 2</h2>
 </div>
Locating a single element
 import { by, Target } from '@serenity-js/webdriverio';

 const title = Target.the('article title').located(by.css('#article h1'));
Locating multiple elements
 import { by, Target } from '@serenity-js/webdriverio';

 const titles = Target.all('section titles').located(by.css('#article h2'));

public id(id: string): Locator source

Locates elements by their id attribute.

Params:

NameTypeAttributeDescription
id string

Returns:

Locator

Examples:

Example widget
 <input id="username" />
 import { by, Target } from '@serenity-js/webdriverio';

 const usernameField = Target.the('username field').located(by.id('username'));

public linkText(linkText: string): Locator source

Locates an HTML anchor element with a specific text in it.

Params:

NameTypeAttributeDescription
linkText string

Returns:

Locator

Examples:

Example widget
 <a href="https://serenity-js.org">Serenity/JS</a>
Locating a single element
 import { by, Target } from '@serenity-js/webdriverio';

 const serenityWebsite = Target.the('Serenity/JS website link').located(by.linkText('Serenity/JS'));
Locating multiple elements
 import { by, Target } from '@serenity-js/webdriverio';

 const items = Target.all('Serenity/JS website links').located(by.linkText('Serenity/JS'));

public partialLinkText(partialLinkText: string): Locator source

Locates an HTML anchor element with which visible text partially matches partialLinkText

Params:

NameTypeAttributeDescription
partialLinkText string

Returns:

Locator

Examples:

Example widget
 <a href="https://serenity-js.org">Serenity/JS</a>
 <a href="https://serenity-bdd.info/#/">Serenity BDD</a>
Locating a single element
 import { by, Target } from '@serenity-js/webdriverio';

 const serenityWebsite = Target.the('Serenity/JS website link').located(by.partialLinkText('JS'));
Locating multiple elements
 import { by, Target } from '@serenity-js/webdriverio';

 const serenityWebsites = Target.all('Serenity frameworks').located(by.partialLinkText('Serenity'));

public tagName(tagName: string): Locator source

Locates elements by HTML tag name

Params:

NameTypeAttributeDescription
tagName string

Returns:

Locator

Examples:

Example widget
 <ul>
     <li>Item 1</li>
     <li>Item 2</li>
 </ul>
 <span>Total price: £5</span>
Locating a single element
 import { by, Target } from '@serenity-js/webdriverio';

 const totalPrice = Target.the('total price').located(by.tagName('span'));
Locating multiple elements
 import { by, Target } from '@serenity-js/webdriverio';

 const items = Target.all('shopping basket items').located(by.tagName('li'));

public xpath(xpath: string): Locator source

Locates elements using an XPath selector.

Please note that whenever possible you should use Locators#id and Locators#css locators instead of XPath to make your tests more robust.

Params:

NameTypeAttributeDescription
xpath string

Returns:

Locator

Examples:

Example widget
 <div id="article">
     <h1>Title</h1>
     <h2>Section 1</h2>
     <h2>Section 2</h2>
 </div>
Locating a single element
 import { by, Target } from '@serenity-js/webdriverio';

 const title = Target.the('article title').located(by.xpath('//*[@id="article"]/h1'));
Locating multiple elements
 import { by, Target } from '@serenity-js/webdriverio';

 const title = Target.the('article title').located(by.xpath('//*[@id="article"]/h2'));