ui-simulator v0.0.6
ui-simulator
Simulate user interactions with minimal scripting. Built on top of puppeteer, but gives you a standardized command structure for easy script authoring.
Install
npm install ui-simulator --save-dev
or
yarn add -D ui-simulator
Prerequisites
Usage
const puppeteer = require('puppeteer');
const actions = require('ui-simulator');
(async () => {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await actions(page, [
{ navigateUrl: 'http://google.com/' },
{ waitFor: 1000 },
{ focus: 'input[name=q]' },
{ type: 'puppeteer is awesome' },
{ click: 'input[type=submit][name=btnK]' },
{ waitFor: 1000 },
]);
await browser.close();
})();
Command Definitions
The command definition is a simple array of objects. Each object in the array should be interpreted as a single step or action.
In the usage example illustrated above, we are navigating to a website, waiting 1 second, setting the focus, etc. This allows you to succinctly define the user simulation and interaction with a web interface.
Commands
Each command is an object with a single key/value pair.
example: { [COMMAND_NAME]: [VALUE] },
- a11y
- assert
- click
- evaluate
- focus
- hover
- keyboardNavigateTo
- keypress
- navigateUrl
- screenshot
- select
- setValue
- type
- waitFor
a11y
Performs an accessibility analysis using the axe-core accessibility rules engine.
{ a11y: {
callback: async (results) => {
console.log('Hey these are results: ', results.violations.length);
},
config: {
include: [['#my-selector']],
},
}},
assert
Coming soon!
click
Simulates a mouse click on an element.
{ click: '#my-element' },
evaluate
Allows you to run your own javascript.
{ evaluate: async page => {
await page.evaluate(() => alert('test!'));
// do more cool stuff here...
}},
focus
Set the focus to the provided target
{ focus: '#my-element' },
hover
Simulate a hover on the provided target
{ hover: '#my-element' },
keyboardNavigateTo
Simulates keyboard navigation. This will continue to tab through the UI elements until it has reached the target.
{ keyboardNavigateTo: '#my-element' },
keypress
Simulates a keypress. Use this tool to help figure out keynames, if you need.
{ keypress: 'Enter' },
navigateUrl
Navigates to the specified URL.
{ navigateUrl: 'http://cool.site.com' },
screenshot
Coming soon!
select
Sets the value of the targeted select field.
{ select: {target: '#my-select', value: 'option1'} },
setValue
Sets the value of the targeted input field.
{ setValue: {target: '#my-field', value: 'hello world'} },
type
Simulates a user typing.
{ type: 'hello world!' },
waitFor
Pause the script for a given amount of time. Time is in milliseconds.
{ waitFor: 1000 },