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.