Skip to main content

UI Test Utilities (@utils-test-ui)

The @wrkbelt/ui/utils-test-ui package provides utilities for UI testing with Playwright. These utilities help you create more maintainable and reliable UI tests by providing page object models and component abstractions.

Installation​

npm install @wrkbelt/ui/utils-test-ui --save-dev

Components​

BaseComponent​

The BaseComponent is an abstract class that provides a foundation for creating component objects in UI tests. It wraps Playwright's Locator to help build maintainable component abstractions.

import { BaseComponent } from '@wrkbelt/ui/utils-test-ui';
import { Locator } from '@playwright/test';

// Extend BaseComponent to create specific UI component wrappers
export class Button extends BaseComponent {
  async click() {
    await this.baseLocator.click();
  }

  async isDisabled() {
    return this.baseLocator.isDisabled();
  }
}

// Example usage in a test
test('button interaction', async ({ page }) => {
  const button = new Button(page.locator('button.submit'));
  await button.click();
});

Key features:

  • Encapsulates UI element interactions
  • Simplifies test maintenance by centralizing element selectors
  • Provides reusable component behaviors

Page Objects​

The library includes utilities for creating page objects that represent screens in your application:

import { BasePage } from '@wrkbelt/ui/utils-test-ui';
import { Page } from '@playwright/test';

export class LoginPage extends BasePage {
  readonly usernameInput: Locator;
  readonly passwordInput: Locator;
  readonly submitButton: Locator;

  constructor(page: Page) {
    super(page);
    this.usernameInput = page.locator('input[name="username"]');
    this.passwordInput = page.locator('input[name="password"]');
    this.submitButton = page.locator('button[type="submit"]');
  }

  async login(username: string, password: string) {
    await this.usernameInput.fill(username);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
  }
}

Best Practices​

  • Create component abstractions for reusable UI elements
  • Build page objects for each major screen in your application
  • Separate test logic from UI interaction details
  • Structure tests using the Page Object Model pattern
  • Combine with Playwright's built-in assertions for validation