Giter VIP home page Giter VIP logo

chaos-frontend-toolkit's Introduction

Chaos Frontend Toolkit

A set of tools to break your web apps and, in doing so, find ways to improve them.

License: Apache 2.0 License: Apache 2.0 Twitter: Errorname_

Chaos Frontend Toolkit is both a Web Extension and a JS library.

๐Ÿงฉ Web Extension

Check out https://chaos-frontend-toolkit.web.app

๐Ÿ“˜ Library

Using NPM

Installation

npm i chaos-frontend-toolkit

Usage

import chaosFrontendToolkit from 'chaos-frontend-toolkit'

// Start the experiment either with the main lib or directly using the experiment
chaosFrontendToolkit.start({ pseudoLocalization: true }) // or .stop()
chaosFrontendToolkit.pseudoLocalization.start() // or .stop()

// Or...

import pseudoLocalization from 'chaos-frontend-toolkit/pseudo-localization'

pseudolocalization.start() // or .stop()

See Experiments to learn more about the usage of each experiment

Using script tag

Installation

<script src="https://raw.githubusercontent.com/Errorname/chaos-frontend-toolkit/main/web-extension/chaos-frontend-toolkit.js"></script>

โš ๏ธ You should host this file yourself when in production.

Usage

// Start the experiment either with the main lib or directly using the experiment
window.chaosFrontendToolkit.start({ pseudoLocalization: true }) // or.stop()
window.chaosFrontendToolkit.pseudoLocalization.start() // or .stop()

See Experiments to learn more about the usage of each experiment

๐Ÿ›  Experiments

Request delaying

Randomly delays your http requests for up to X milliseconds.

chaosFrontendToolkit.requestDelaying.start({
  maxDelay: 15000, // Max delay in milliseconds
  probabilityOfDelay: 0.5, // Probability of delay (between 0 and 1)
})

Request failing

Randomly fails your http requests.

chaosFrontendToolkit.requestFailing.start({
  probabilityOfFail: 0.05, // Probability of fail (between 0 and 1)
})

Denylist

Fails every http requests from a regex list.

chaosFrontendToolkit.requestDenylist.start({
  urls: ['cdn.my-app.com'], // You can use regex here
})

Pseudo-localization

Applies Pseudolocalization to every text of your app. (By Tryggvigy)

chaosFrontendToolkit.pseudoLocalization.start({
  strategy: 'accented', // Either "accented" or "bidi". (Bidi can be used to test RTL languages)
})

Timer throttling

Randomly adds or removes up to X milliseconds to your timeout and intervals.

chaosFrontendToolkit.timerThrottling.start({
  probabilityOfDelay: 0.5, // Max delay deviation in milliseconds
  maxDelayDeviation: 500, // Probability of delay (between 0 and 1)
})

Random history navigation

Randomly navigates backward or forward in the app history every 60 seconds.

chaosFrontendToolkit.historySwitch.start({
  interval: 60, // Interval in seconds between possible navigations
  probabilityOfSwitch: 0.1, // Probability of navigation (between 0 and 1)
})

Double every clicks

Every user's click on your app will be doubled with a second click on the same target.

chaosFrontendToolkit.doubleClicks.start({
  delay: 100, // Delay before second click
})

Gremlins

Simulates random user actions (mouse and keyboard) by unleashing a horde of X gremlins on your app (1 every ~50ms). (By Marmelab)

chaosFrontendToolkit.gremlins.start({
  numberOfWaves: 100, // Number of gremlins
})

Black and white

Removes all colors from your app.

chaosFrontendToolkit.blackAndWhite.start()

๐Ÿ‘ค Author

Thibaud Courtoison

๐Ÿ“ License

Copyright ยฉ 2021 Thibaud Courtoison.

This project is Apache 2.0 licensed.

Flask icon by Freepik UI Icons by Feather

chaos-frontend-toolkit's People

Contributors

errorname avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.