Fleet Manager UI Page Objects

The fui-po page objects are used by fleetmanagement-ui e2e tests and shared with other projects what require them for their e2e tests via the @anviltech/fui-po NPM package.

Building and publishing the @anviltech/fui-po npm package

The @anviltech/fui-po npm package is a NPM package aggregating a number of Typescript Modules, one per page object; it is a heavily modified version of the How to Create and Publish an NPM module in TypeScript recipe.

The NPM package source is hosted in the fleetmanagement-ui repository's fui-po folder. The page objects are hosted in the fui-po/page-objecs folder and exposed by the index.ts module.

The the fleetmanagement-ui package.json file includes yarn scripts to build and publish the package; po:build builds and po:pub publishes it.

Adding a page object to @anviltech/fui-po npm package

We use the fui-po/index.ts file to expose page objects; assuming we are adding the my-new-page-view page object:

// index.ts
...
export { MyNewPageView } from "./page-objects/my-new-page-view.po";
...

Next, we add the new file, fui-po/page-objecs, to the fui-po/page-objecs folder

// my-new-page-view.po.ts
import {by, element, browser} from 'protractor';

export class MyNewPageView {
  ...
}

Next we build the package:

$ yarn po:build

Publishing the @anviltech/fui-po npm package

Update the fleetmanagement-ui package.json version, and CHANGELOG; update the @anviltech/fui-po package CHANGELOG and README; notice that the new @anviltech/fui-po package will be derived from the fleetmanagement-ui version.

Next we publish the package:

$ yarn po:pub

Note that you must have credentials to publish to the NPM @anviltech organization.

Using @anviltech/fui-po page objects

This implementation offers two usage alternatives. The first supports writing E2E tests within the fleetmanagement-ui repository and the other writing E2E tests within other repositories sharing the fleetmanagement-ui page objects.

In Fleet Manager UI

The e2e test scripts refer to page objects in the fui-po/page-objecs folder:

// a fleetmanager-ui e2e spec file
import { browser } from 'protractor';

import { LayoutComponentView } from '../../fui-po/page-objects/layout.component.view.po';
import { NavigationComponentView } from '../../fui-po/page-objects/navigation.component.view.po';

Everything else remains the same.

In other applications

The fleetmanagement-ui page objects are found in the @anviltech/fui-po npm package, installed as follows:

$ yarn -D add @anviltech/fui-po

We import fleetmanagement-ui page objects slightly differently:

// a fleetmanager-ui e2e spec file
import { browser } from 'protractor';

import { LayoutComponentView } from '@anviltech/fui-po';
import { NavigationComponentView } from '@anviltech/fui-po';

Everything else remains the same.