Pages and components

Object models

Tarantula takes advantage of the ubiquitous concept in modern test automation, the page object model. Pages are also split into further components, modeled as component object models. These components may depend on other components in a hierarchical manner. This overall creates what can be referred to as a "COM tree". Every object model needs to have an implemented verifyCorrectDisplay method. Furthermore, a page object model should offer a visit method. POM and COM scaffoldings can be generated through the Tarantula CLI.

Example page and components

POMs and COMs are defined as classes extending the PageObjectModel and ComponentObjectModel parent classes with @Component and @Page decorators respectively.

@Component //Uses the Component decorator
export class DeepComponent extends ComponentObjectModel {
    constructor(private web: WebTarantulaAPI) { //An API can be injected through the constructor
        super(new PageConfig()); //A page configuration must be passed to the parent class constructor
    }

    async verifyCorrectDisplay() { ///Example implementation of the verifyCorrectDisplay()
        console.log("OK");
    }
}

@Component
export class SomeComponent extends ComponentObjectModel {
    //A component can request other components itself, and can also request services via constructor dependency injection,
    //resulting in a component tree
    constructor(private deepComponent: DeepComponent) {
        super(new PageConfig());
    }

    async verifyCorrectDisplay() {
        console.log("OK");
    }
}

@Component
export class LoginButton extends ComponentObjectModel {
    constructor(private api: ApplicationTarantulaAPI) { //Use the general Tarantula Application API
        super(new PageConfig());
    }

    async verifyCorrectDisplay() {
        console.log("OK");
    }

    async click() //We can use this later for nice syntax (easily clicking the button on the page through test code)
    {
        await this.api.click(100, 200);
    }
}

@Page //Uses the Page decorator
export class SomePage extends PageObjectModel {
    //A page can request COMs and Services in the constructor via Dependency Injection
    constructor(pageConfig: PageConfig, public someComponent: SomeComponent, public loginButton: LoginButton) {
        super(pageConfig); //A page configuration must be passed into the parent class constructor
    }

    async verifyCorrectDisplay() { //Example verifyCorrectDisplay() method implementation
        console.log("OK");
    }

    async visit(role: UserRole) { //The visit function must take a user role
        await this.verifyCorrectDisplay();
    }
}

Injecting pages

Within test code, a page can be injected, and the methods of its components may be called upon.

@Test('Some Test')
export class SomeTest {
    //On constructor level, a test will only request drivers and services via dependency injection
    constructor(private browser: WebTarantulaAPI, private authService: ExampleService) {}

    async example()
    {
        //For Pages, the test will use `inject` whenever it requires a page, which will then resolve the page with its entire COM tree
        const somePage = inject(SomePage);

        somePage.visit(UserRole.Visitor);
        somePage.loginButton.click();
    }
}

Such tests and subtests can be ran as described in previous sections.