@vitalets/page-object

A library for building Page Object CSS selectors for UI testing.

Installation

npm install -D @vitalets/page-object

Usage

The syntax is based on Tagged templates. It makes code short and readable:

const po = require('@vitalets/page-object');

const chat = po`.chat`;                                 // => '.chat'
chat.title = chat` h2`;                                 // => '.chat h2'
chat.messages = chat` .messages`;                       // => '.chat .messages'
chat.messages.item = chat.messages` li`;                // => '.chat .messages li'
chat.messages.focusedItem = chat.messages.item`:focus`; // => '.chat .messages li:focus'

You can also attach selectors dynamically in tests:

await page.click(chat.messages.item`:focus`);

Converting to string

Any created page-object is actually a function - this is required for tagged templates. If you pass page-object to console.log, you will not get just a string, because console.log does not call toString() method automatically:

console.log(chat.title); // => { [Function: ".chat h2"] toJSON: [Function], toString: [Function] }

Although there is a selector in function name that is useful for debugging.

To explicitly convert page-object to string - call it as a function without arguments:

console.log(chat.title()); // => '.chat h2'

License

MIT @ Vitaliy Potapov