SPA Check
Automated testing for single-page applications (SPAs). Small, portable, and easy to use. Click on things, fill in values, await for things exist, etc.
Access
Options:
- Install using
npm install --save-dev spa-check
and import:
import { spaCheck } from 'spa-check';
// or
const { spaCheck } = require('spa-check');
- Or copy-paste the portable template from spa-check.template.js (works if you paste into the a browser console)
Usage
SPA Check is served as a function named spaCheck
. Example:
spaCheck(
['value .myform>input Hello', 'click button.myclass'], // Actions
{ message: 'Example: Submit form', globalDelay: 1000 } // Options
);
Input details:
- Parameter 1: Actions (Array of strings like
['action selector? data?']
, can also substitute a function for custom actions)- Action keywords:
append
, e.g.'append p - Appended text'
await
, e.g.'await .modal.success-message'
or'await h1 With This Text'
click
, e.g.'click button.submit'
or'click button With This Text'
exists
, e.g.'exists .class-name'
or'exists h1 With This Text'
log
, e.g.'log Some message'
nav
, e.g.'nav #id'
or'nav #/some/hash/routing/path'
value
, e.g.'value form>input.name Cory Rahman'
wait
, e.g.'wait 3000'
(3 seconds)write
, e.g.'write p Overwritten text'
- Selector: CSS selector like
button.class-name
(should not contain spaces) - Data: Argument for
value
,write
,log
, and optionallyexists
andawait
- Action keywords:
- Parameter 2: Options (Object, optional)
awaitTimeout
: (default: 15000) How long in milliseconds to wait for an element using the await commandcontinueOnFailure
: (default: false) Continue to run actions even if one failsglobalDelay
: (default: 500) time between actions in millisecondslogCollapse
: (default: false) Initializes the console group collapsedlogResult
: (default: true) Show the final result in the browser consolelogUpdates
: (default: true) Show real-time progress in the browser consolemessage
: (default: '') Label to show in the console and optionally in the DOMmessageShowInDOM
: (default: false) Show the message visually on the page / DOMmessageStyle
: Override the default message style when showing the message in the DOM
Output details:
- The
spaCheck
function returns typeSpaCheckReturn
:export type SpaCheckReturn = { success: boolean, log: string[], message: string };
- Updates are also logged to the browser console like so:
[SPA Check] Message
* Set the value of form>input.name to 'Cory'
* Clicked on button[type="submit"]
* Awaiting 'div.success-message'...
* ...Found 'div.success-message'
* Done, success: true
Result: { success: true, log: Array(4), message: 'Message' }
Examples
Template
See the spa-check.template.js for examples of running multiple sequential tests using async/await.
Use-cases
value
and interact with click
using Selectors:
Fill inputs with spaCheck([
'value input[type="text"] Hello, world!', // Fills in the input
'value input[type="number"] 20',
'click button.some-class', // Clicks a button with class 'some-class'
'click div With certain text', // Clicks on the given text within a div
'click * With certain text', // Clicks on the given text regardless of containing element
]);
- Note: Don't include spaces in the CSS Selectors
exists
:
Validate the DOM with spaCheck([
'exists p.some-class', // Checks for the existance of this selector
'exists p.some-class With certain text', // Also checks if it includes certain text
]);
await
and wait
:
Deal with timing using spaCheck([
'await div.some-popup', // Awaits the existance of this selector
'await div.some-popup With certain text', // Also waits for it to include certain text
'wait 3000', // waits 3 seconds
]);
- Note: The default await timeout is 15000 ms (15 seconds), overwrite using the
awaitTimeout
option.
nav
:
Navigate within a single-page application using spaCheck([
'nav #some-id',
'nav #/some/hash/routing/path',
'nav #', // Back to the top
]);
append
, log
, and write
:
Add notes with spaCheck([
'write h1 Testing successful!', // overwrites the h1's textContent
'append h1 - Testing successful!', // appends to the h1's textContent
'log The testing is complete.',
]);
Pass options as a second argument:
spaCheck([
'value input.name Cory',
'click button[type="submit"]',
], { globalDelay: 1000 });
// ^ Options object with 1 second between actions
- Note: See Usage for a list of options
Development
- To run the tests, use
npm install
to and then runnpm run build
and open up thetest/test.html
file
Maintainers
To publish:
- Bump the version number in the package.json
npm i
npm run build
- Test one last time
npm publish --access public