locators.ts proposal

locators.ts

import { Question } from '@serenity-js/core';
import type { Browser, Element, ElementArray, Selector } from 'webdriverio';

import { BrowseTheWeb } from '../abilities';

export class Locator {
    constructor(
        private readonly description: string,
        private readonly selector: Selector
    ) {
    }

    firstMatching(): Question<Promise<Element<'async'>>> {
        return Question.about(this.description, actor =>
            BrowseTheWeb.as(actor).browser.$(this.selector)
        )
    }

    allMatching(): Question<Promise<ElementArray>> {
        return Question.about(this.description, actor =>
            BrowseTheWeb.as(actor).browser.$$(this.selector)
        )
    }
}

export class Locators {

    id(id: string): Locator {
        return new Locator(
            `by id #${ id }`,
            `#${id}`
        )
    }

    css(selector: Selector): Locator {
        return new Locator(
            `by css ${ selector }`,
            selector
        )
    }

    tagName(tagName: string): Locator {
        return new Locator(
            `by tag name <${ tagName } />`,
            `<${ tagName } />`
        )
    }

    linkText(linkText: string): Locator {
        return new Locator(
            `by link text ${ linkText }`,
            `=${ linkText }`
        )
    }

    partialLinkText(partialLinkText: string): Locator {
        return new Locator(
            `by partial link text ${ partialLinkText }`,
            `*=${ partialLinkText }`
        )
    }

    xpath(xpath: string): Locator {
        return new Locator(
            `by xpath ${ xpath }`,
            xpath
        )
    }
}

export const by = new Locators();