usability-tracker v1.0.3
usability-tracker
The goal of this application is to provide a method for automating the usability test process.
should eventually include all of these events in playback: https://developer.mozilla.org/en-US/docs/Web/Events
UserTracker
The module has only one export; it is the UserTracker class which is used to handle what is done each time an event is added to the history, what events to ignore, and what id to use when tracking the user.
import UserTracker from "usability-tracker"
let user = new UserTracker(saveCallback, ignoreFilter, storageTag);methods
constructor(onUpdate, filter, storageTag)
| field | description |
|---|---|
| onUpdate | is a callback for every time a new item is added to the log. |
| filter | example output of obj is a filter function that is used to determine if this log should be blocked from being added to the history |
| storageTag | this is the tag used to identify the user for multi page websites in localStorage. If unset it will be given custom tag defined internally |
get history(): log
returns the current total history
replay(history): undefined
| field | description |
|---|---|
| history | an array of logs |
This simulates the user's actions on the screen.
Warning: replay does not work as robustly as it could if an external program written with something, such as pyautogui, would work. This is due to events with isTrusted=false being ignored.
toString(): String
returns a string of the history in json format
example log
This is an example of what a history log looks like:
{
"pressed": {
"mousemove": true
},
"event": {
"isTrusted": true,
"key": "mousemove",
"currentKey": "mousemove",
"ratioX": 0.941696113074205,
"ratioY": 0.750561797752809,
"wheelRatioX": null,
"wheelRatioY": null
},
"time": 1660187659423,
"userID": "2cab6f8a-ffea-4f86-9a38-baea73735cfc",
"type": "mousemove",
"html": "<header class=\"App-header\"><img src=\"/static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg\" class=\"App-logo\" alt=\"logo\"><p>Edit <code>src/App.js</code> and save to reload.</p><input type=\"password\"><input type=\"text\"><button id=\"alert\">alert</button></header>"
}