wdio-page-objects

Simple page object library for WebdriverIO using Typescript decorators.

Inspired by xenon library for protractor.

Installation

npm install wdio-page-objects

Also it is necessary to allow decorators in tsconfig.json:

"experimentalDecorators": true,
"emitDecoratorMetadata": true

Example

import { PageComponent, PageElement, element, child, text } from 'wdio-page-objects';


export class Row extends PageComponent {

    @element('.element')
    public rowElement: PageElement;
    
}

export class List extends PageComponent {

    @child(Row, ".row")
    public rows: Row[];
}

export class Filter extends PageComponent {

    @text('.input')
    public input: string;

    @element('.filter')
    public filter: PageElement[]; 
    
}

export class Page extends PageComponent {

    @child(Filter, ".filter")
    public filter: Filter;

    @child(List, ".list")
    public list: List;
    
}

let po = new Page(browser, { timeoutMs: 10000 });

po.list.element.click();

po.list.rows.forEach((e: Row) => {
    e.rowElement.getText();
});

po.filter.input = "test";

Getting started

There are two different elements:

• PageComponent

It is the main block of page objects.

• PageElement

It is shortcut for WebdriverIO.Client

export declare type PageElement = WebdriverIO.Client<WebdriverIO.RawResult<WebdriverIO.Element>>;

To create embedded PageComponent use @child decorator.