Automated testing for single-page applications (SPAs). Small, portable, and easy to use. Click on things, fill in values, await for things exist, etc.

Overview

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:

  1. Install using npm install --save-dev spa-check and import:
import { spaCheck } from 'spa-check';
// or
const { spaCheck } = require('spa-check');
  1. 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 optionally exists and await
  • Parameter 2: Options (Object, optional)
    • awaitTimeout: (default: 15000) How long in milliseconds to wait for an element using the await command
    • continueOnFailure: (default: false) Continue to run actions even if one fails
    • globalDelay: (default: 500) time between actions in milliseconds
    • logCollapse: (default: false) Initializes the console group collapsed
    • logResult: (default: true) Show the final result in the browser console
    • logUpdates: (default: true) Show real-time progress in the browser console
    • message: (default: '') Label to show in the console and optionally in the DOM
    • messageShowInDOM: (default: false) Show the message visually on the page / DOM
    • messageStyle: Override the default message style when showing the message in the DOM

Output details:

  • The spaCheck function returns type SpaCheckReturn:
    • 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

Fill inputs with value and interact with click using Selectors:

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

Validate the DOM with exists:

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
]);

Deal with timing using await and wait:

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.

Navigate within a single-page application using nav:

spaCheck([
  'nav #some-id',
  'nav #/some/hash/routing/path',
  'nav #', // Back to the top
]);

Add notes with append, log, and write:

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 run npm run build and open up the test/test.html file

Maintainers

To publish:

  1. Bump the version number in the package.json
  2. npm i
  3. npm run build
  4. Test one last time
  5. npm publish --access public
You might also like...

This branch is created to make receive and send data to api using async and await methods

This branch is created to make receive and send data to api using async and await methods

Microverse-Leader-Board Project from module 2 week 4 This branch is created to make receive and send data to api using async and await methods Screens

Apr 22, 2022

🚀 Using top-level await in AWS Lambda with TypeScript, esbuild and Serverless Framework

🚀 Using top-level await in AWS Lambda with TypeScript, esbuild and Serverless Framework

🚀 Top-level await in AWS Lamba with TypeScript Articles https://dev.to/oieduardorabelo/top-level-await-in-aws-lamba-with-typescript-1bf0 https://medi

Nov 23, 2022

Leader Board is a simple project based on JavaScript programing language. The purpose of this project is to work with APIs and ASYNC & AWAIT methods. I have used vanilla JavaScript with web pack to implement this project

Leader Board is a simple project based on JavaScript programing language. The purpose of this project is to work with APIs and ASYNC & AWAIT methods. I have used vanilla JavaScript with web pack to implement this project

Leader Board - JavaScript Project Table of contents Overview The challenge Screenshot Links Project Setup commands My process Built with What I learne

Oct 21, 2022

Utility to automatically fill foreign income section of 3-NDFL report based on tax report from Tinkoff broker

Заполнение дохода за пределами РФ в декларации 3-НДФЛ Disclaimer Автор не несет ответственности за корректное заполнение налоговой декларации. Вы запу

Dec 9, 2022

A Flood-Fill Algorithm written in JavaScript

flood https://magnogen.net/flood A Flood-Fill Algorithm for Creative Coders This is the source code for a section of my website. You're welcome to sno

Dec 22, 2022

A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again.

A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again.

form-storage A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again. Installation via npm npm install

Dec 10, 2022

Deploy your uAdmin project and host it with a single click (and a few more steps 👀) !

Deploy your uAdmin project and host it with a single click (and a few more steps 👀) !

Golang and uAdmin CI/CD using 🚅 Railway! Steps to Deploy Make sure to create a Github account and link it with 🚅 Railway Click Give your new Reposit

Nov 13, 2022

FingerprintJS Pro Wrapper for React Single Page Applications (SPA)

FingerprintJS Pro Wrapper for React Single Page Applications (SPA)

FingerprintJS Pro React FingerprintJS Pro React is an easy-to-use React library for FingerprintJS Pro. This package works with FingerprintJS Pro, it i

Dec 15, 2022

Write on Obsidian. Publish to Ghost with a single click.

Obsidian & Ghost A simple plugin for Obsidian to publish to Ghost site with a single click. How to use Create a custom integration follow this link. Y

Dec 22, 2022
Comments
  • Add

    Add "wait" feature

    Add an option to wait for a specific element to appear:

    Action string example: 'wait .popup'

    Full example:

      spaCheck([
        'click button',
        'wait .popup',
        'click .new-button',
      ]);
    

    Should probably have a default max time to wait, perhaps add a 3rd string param override the default.

    opened by CoryLR 1
  • Add workaround for the descendant css combinator (space)

    Add workaround for the descendant css combinator (space)

    Currently spaces cannot be used in the action string CSS selectors in order to preserve the ease of a single-string action command. Recommend using >> instead. Should be able to replace >> with a space after the selector portion of the action string is already split off.

    Note: >> is not a great solution because >> diverges from standard CSS, but I think it's worth it because it's relatively intuitive, will not conflict with existing CSS (because >> is invalid normally), and will unblock cases where using the descendant css combinator (space) would be helpful.

    Example: click table>>.row:nth-child(2)>>button Edit Row // This would click an Edit button in the 2nd row of some table, regardless of how deeply nested. The resulting selector would be table .row:nth-child(2) button.

    Also update the README so this functionality is well-documented.

    opened by CoryLR 0
  • Create demo and use it as testing page

    Create demo and use it as testing page

    Replace the testing page with a demo, include some sort of flag or url parameter which runs fast robust tests. Display simpler demo tests. Host via GH Pages.

    opened by CoryLR 0
Owner
Cory Leigh Rahman
Software Engineer, Cartographer, GIS Data Scientist
Cory Leigh Rahman
A small library that helps you to use await, less.

Await Less A library to help you use await, less. In a world full of prefix awaits (ever heard of postfix await?), constantly having to wrap your expr

Daniel 7 Jun 27, 2022
Strcmp-node - A cli string comparison tool, because apparently one doesn't exist.

strcmp-node I couldn't find a string comparison command, so i made my own. its probably the ugliest thing since godzilla with makeup on, but it works.

Gingka/Ginger Pepper 1 Jan 1, 2022
Command line tool to interact with exist-db instances (pre-release)

xst [ĭg-zĭst′] Command line tool to interact with exist-db instances. Built on top of @existdb/node-exist. Installation Until this package is official

Juri Leino 0 Aug 4, 2022
A testing focused Remix Stack, that integrates E2E & Unit testing with Playwright, Vitest, MSW and Testing Library. Driven by Prisma ORM. Deploys to Fly.io

Live Demo · Twitter A testing focused Remix Stack, that integrates E2E & Unit testing with Playwright, Vitest, MSW and Testing Library. Driven by Pris

Remix Stacks 18 Oct 31, 2022
Purple hats Desktop is a customisable, automated web accessibility testing tool that allows software development teams to find and fix accessibility problems to improve persons with disabilities (PWDs) access to digital services.

Purple HATS Desktop Purple hats Desktop is a desktop frontend for Purple HATS accessibility site scanner - a customisable, automated web accessibility

Government Digital Services, Singapore 6 May 11, 2023
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
JavaScript project for the Leaderboard list app, using Webpack and ES6 features, notably modules. this app consume the Leaderboard API using JavaScript async and await and add some styling.

Leaderboard Project JavaScript project for the Leaderboard list app, using Webpack and ES6 features, notably modules. this app consume the Leaderboard

bizimungu pascal 4 May 20, 2022
For NUS PhD Students and Staffs, just one click to open the research papers on Google Scholar/IEEE/ACM, etc. with this script.

NUS Literature Quick Access For National University of Singapore's students and staffs, just with one single click you can open any paper without the

Naibo Wang 9 Nov 30, 2022