Ordino Playwright Element Core

A comprehensive library of UI elements and behaviors for Playwright-based test automation.

Overview

ordino-pw-element-core provides a set of reusable UI elements and behaviors to help build robust, maintainable UI automation tests with Playwright. This library implements the Page Object Model pattern with a focus on async/await support for modern Playwright tests.

Installation

npm install @ordino.ai/ordino-pw-element-core

Requirements

• Node.js 14+
• Playwright 1.25.0+

Usage

Basic Example Using Page Object Model

// file: tests/pages/base.page.ts
import { TextBox, Button } from '@ordino.ai/ordino-pw-element-core';
import { Page } from 'playwright';

export class BasePage {
    protected page: Page;

    constructor(page: Page) {
        this.page = page;
    }

    // Helper methods
    protected textBox(locator: string): TextBox {
        return new TextBox(locator, this.page);
    }
    
    protected button(locator: string): Button {
        return new Button(locator, this.page);
    }
}

// file: tests/pages/login.page.ts
import { Page } from 'playwright';
import { BasePage } from './base.page';

export class LoginPage extends BasePage {
    // Element locators
    private txt_username = "input[name='username']";
    private txt_password = "input[name='password']";
    private btn_login = "button[type='submit']";
    
    constructor(page: Page) {
        super(page);
    }
    
    async enter_username(username: string) {
        await this.textBox(this.txt_username).enterText(username);
        return this;
    }

    async enter_password(password: string) {
        await this.textBox(this.txt_password).enterText(password);
        return this;
    }

    async click_login() {
        await this.button(this.btn_login).click();
        return this;
    }

    async goto() {
        await this.page.goto('https://your-application.com');
    }
}

// file: tests/login.spec.ts
import { test, expect } from '@playwright/test';
import { LoginPage } from './pages/login.page';

test('Login Success', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.enter_username("username");
  await loginPage.enter_password("password");
  await loginPage.click_login();
  await expect(page).toHaveURL(/dashboard/);
});

Available Elements

The library includes the following UI elements, each with specialized methods for common interactions:

| Element | Description | Example | |---------|-------------|---------| | Button | Buttons and clickable elements | await button.click() | | TextBox | Input fields and text areas | await textBox.enterText('Hello') | | CheckBox | Checkbox elements | await checkbox.check() | | RadioButton | Radio button elements | await radioButton.select() | | Dropdown | Select and dropdown elements | await dropdown.select('Option') | | Link | Hyperlink elements | await link.click() | | Image | Image elements | await image.isVisible() | | Table | Table elements with row/column operations | await table.getRowCount() | | Label | Text labels and content | await label.assertText('Expected text') | | DatePicker | Date selection components | await datePicker.selectDate(new Date()) | | Browser | Browser-level operations | await browser.goBack() | | Keyboard | Keyboard interactions | await keyboard.pressKey('Enter') | | FileInput | File upload fields | await fileInput.uploadFile('path/to/file') | | Toast | Toast/notification elements | await toast.assertToast('Success') | | Div | Generic div containers | await div.isVisible() | | Scroller | Scrollable containers | await scroller.scrollToBottom() |

Element Usage Examples

ButtonElement Properties

const submitButton = new Button('#submit-btn', page);
await submitButton.click();
await submitButton.isVisible(); // Check if button is visible

TextBoxElement Properties

const emailField = new TextBox('#email', page);
await emailField.enterText('[email protected]');
await emailField.clearText();
await emailField.typeAndPressEnter('[email protected]');

TableElement Properties

const usersTable = new Table('#users-table', page);
const rowCount = await usersTable.getRowCount();
const cellValue = await usersTable.getCellValue(1, 2); // Row 1, Column 2
await usersTable.clickTableCell(1, 3); // Click a specific cell

Recommended Pattern

We recommend structuring your tests using the Page Object Model pattern as shown in the example above. This helps to:

1. Improve Test Maintainability - Locators are defined in one place
2. Enhance Code Reusability - Page methods can be reused across tests
3. Create Better Abstractions - Hide complex interactions behind simple methods
4. Use Fluent Interfaces - Chain methods for better readability

Example of Fluent Interface

await loginPage
  .goto()
  .then(() => loginPage.enter_username("username"))
  .then(() => loginPage.enter_password("password"))
  .then(() => loginPage.click_login());

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For questions and support, please contact the Ordino.ai team.