PageObjectJS

A platform- and framework-independent UI test automation library.

Getting started

You can find the complete code of all examples here. To run them, you need Node.js version 8 or higher.

Example 1: Writing your first automated web UI test

In this example we write a test which opens the website example.com and asserts its page title:

function example(test, app) {
  test
    .perform(app.page.goto('http://example.com/'))
    .assert(app.page.getTitle(), is('Example Domain'));
}

We also need to write our first component, which currently serves only to give us access to its page object:

// ES2015 notation
class App extends WebComponent {
  get selector() {
    return ':root';
  }
}

// TypeScript/Babel notation
class App extends WebComponent {
  selector = ':root';
}

The test is performed in Node.js without a real browser using jsdom:

const adapter = new JSDOMAdapter();

await Test.run(new App(adapter), 10, example);

Example 2: Using a real browser

To use a real browser instead of jsdom, we have to choose another adapter.

Adapters for the following test automation solutions are currently available:

We only need to change one line to run the above test in a headless Chrome:

const adapter = await PuppeteerAdapter.create();

Example 3: Writing and using another component

Next we write a component for the “more information” link:

class Link extends WebComponent {
  get selector() {
    return 'a';
  }
}

We declare the link as a descendant of the app component:

class App extends WebComponent {
  get selector() {
    return ':root';
  }

  get moreInformationLink() {
    return new Link(this.adapter, this);
  }
}

Now we extend our existing test so that it asserts the link text and then clicks on the link:

function example(test, app) {
  test
    .perform(app.page.goto('http://example.com/'))
    .assert(app.page.getTitle(), is('Example Domain'))
    .assert(app.moreInformationLink.getText(), is('More information...'))
    .perform(app.moreInformationLink.click());
}

Further examples

@pageobject/todomvc

An exemplary test suite for the popular TodoMVC application.

Packages

@pageobject/base

A declarative API as a basis for platform- and framework-independent UI test automation.

@pageobject/web

A declarative API for framework-independent web UI test automation.

@pageobject/protractor

A web API adapter for Protractor.

@pageobject/puppeteer

A web API adapter for Puppeteer.

@pageobject/selenium-webdriver

A web API adapter for Selenium.