Dorama

Dorama provides you with an elegant way to build page objects for web testing using both inheritance and composition. It provides two abstract classes - Page and Component to build page objects and combine everthing together, allowing you to focus on the business logic of the application and write more readable tests.

Installation

npm i -D dorama

Usage

Page creation

import { Dorama } from "dorama";

export class IndexPage extends Dorama.Page {
  url = () => "/";

  // returns playwright's Locator
  readonly startNowButton = this.locator("a");

  // returns array of playwright's Locator
  readonly lineItems = this.locators("a");
  
  // return complex component Header with it's own root container
  readonly headerComponent = this.component(Header, "header");

  // return array of components BookComponent
  readonly booksComponents = this.components(BookComponent, ".books-list li");
}

API

| Method | Description | |------------|---------------------------------------| | abstract url(routes?: RoutesType): string; | Abstract method you have to implement in inherited class to be able to navigate to page | | goto(routes?: RoutesType): Promise<Response> | Go to url | | protected locator(selector: string): Locator | Return Locator by passed selector | | protected locators(selector: string): Promise<Array<Locator>> | Return array of Locators by passed selector (made only for code readability) | | protected component<T extends Component>(ComponentClass, componentContainer): T | Returns instance of Component | | protected components<T extends Component>(ComponentClass, componentContainer): Components<T> | Returns array of Components | | getPage() | Returns playwright's page |

url(routes?: RoutesType) optionaly accepts routes param (Record<string, string>), which allows you build url dynamicaly. For example url = (routes: { authorId: string }) => '/app/#/author/${routes.authorId}'; allows you to navigate to particular author

Component creation

import { Dorama } from "dorama";

export class BookComponent extends Dorama.Component {
  readonly cover = this.locator(".cover");
  readonly title = this.locator(".list-book-item-title");
  readonly data = this.locator(".book-info-data");
}

All locators and components inside component are built relative to component's root container

API

| Method | Description | |------------|---------------------------------------| | protected locator(selector: string): Locator | Return Locator by passed selector relative to component root container | | protected locators(selector: string): Promise<Array<Locator>> | Return array of Locators by passed selector (made only for code readability) relative to component root container | | protected component<T extends Component>(ComponentClass, componentContainer): T | Returns instance of Component relative to component root container | | protected components<T extends Component>(ComponentClass, componentContainer): Components<T> | Returns array of Components relative to component root container|

You also have access to component's root container by component property

Components list

When there is list of similar components on web page, use components() method to get Components instance (which stores list of your components). It was implemented this way to provide API to asynchronously iterate over list of components:

| Method | Description | |------------|---------------------------------------| | filter(callback: (component: T) => Promise<boolean>): Promise<T[]> | Filter list of T components | | find(callback: (component: T) => Promise<boolean>): Promise<T> | Find T component in list | | map<R>(callback: (section: T) => Promise<R>): Promise<Awaited<R>[]> | Map over list of T components | | nth(index: number): T | Return nth T component by index | | first(): T | Return first T component | | all(reInit?: boolean): Promise<Array<T>> | Return components array. Use reInit flag to reinit when there are corresponding changes on page | | count(): number | Return components count |

Resources

An example of usage - https://github.com/PaulTriandafilov/dorama-test

Contacts

For any questions and troublshooting DM in telegram