Design token integration testing

Pixel Police makes it easy to check if pages on your website are using design tokens as you intended.

You tell it what your design tokens are, which css properties they can be used on, and Pixel Police will let you know what crimes have been committed.

Pixel Police will let you know if:

A vandal defaces a page with the wrong font
A shady suspect uses an illegal color
A smuggler dashes along a border

Let's get started

Install

npm i pixelpolice

Create a config.js file and populate it with your design tokens

const tokens = require('your-design-tokens')

module.exports = {
  urls: ['https://www.yourwebiste.com/', 'https://www.yourwebiste.com/page', ... ],
  tests: [{
    expectedPropertyValues: {
      backgroundColor: [tokens.bgColors.light, tokens.bgColors.dark],
      color: [tokens.colors.primary, tokens.colors.secondary],
      fontSize: [tokens.fontSize.small, tokens.fontSize.medium, tokens.fontSize.large]
      ...
    }
  }]
}

Add to your package.json

"scripts": {
  design-token-test: pixelpolice --config path/to/config.js
}

Run in terminal

$ npm run design-token-test

_____       _     ______    __          ____________  _
___________(_)__  _________/ /  _________________/ /_(_)__________
___/ __ \_/ /_/ |/_// _ \_/ /   ___/ __ \/ __ \_/ /_/ /_/ ___// _ \
__/ /_/ // / _>  < /  __// /    __/ /_/ / /_/ // / / / / /__ /  __/
_/ .___//_/ /_/|_| \___//_/     _/ .___/\____//_/ /_/  \___/ \___/
/_/                             /_/

testing  https://www.yourwebiste.com/ @ 800 x 600
testing  https://www.yourwebiste.com/page @ 800 x 600

█████████████████████████████████████████████████████████████████████

PIXEL POLICE REPORT:

FAIL  https://www.yourwebiste.com/ @ 800 x 600
- Number of elements tested: 911
- Passed tests: 11038
- Failed tests: 26

FAIL  https://www.yourwebiste.com/page @ 800 x 600
- Number of elements tested: 999
- Passed tests: 15999
- Failed tests: 52

█████████████████████████████████████████████████████████████████████

CLI

Option	Description
-c, --config	Path to config file
-v, --verbose	Output all test data (default: false)
-V, --version	Output the version number
-h, --help	Output usage information

Config

Attribute	Type	Description
urls	Array[String]	An array of urls that you would like to run the tests against
tests	Array[Object]	An array of test objects
tests.viewports.width	Object/Number (optional)	The viewport width (in pixels) to test against. Defaults to 800
tests.viewports.height	Object/Number (optional)	The viewport height (in pixels) to test against. Defaults to 600
tests.expectedPropertyValues	Object	A map of css properies and allowed values (or tokens)

tests.expectedPropertyValues[Object]

Attribute	Type	Suppoorted values / units
backgroundColor	Array[string] (optional)	hex, rgb, hsl, transparent - Colors are converted to RGB prior to testing.
borderTopColor	Array[string] (optional)	hex, rgb, hsl, transparent - Colors are converted to RGB prior to testing.
borderLeftColor	Array[string] (optional)	hex, rgb, hsl, transparent - Colors are converted to RGB prior to testing.
borderBottomColor	Array[string] (optional)	hex, rgb, hsl, transparent - Colors are converted to RGB prior to testing.
borderRightColor	Array[string] (optional)	hex, rgb, hsl, transparent - Colors are converted to RGB prior to testing.
borderTopStyle	Array[string] (optional)	string - e.g. 'solid', 'dashed', dotted etc
borderLeftStyle	Array[string] (optional)	string - e.g. 'solid', 'dashed', dotted etc
borderBottomStyle	Array[string] (optional)	string - e.g. 'solid', 'dashed', dotted etc
borderRightStyle	Array[string] (optional)	string - e.g. 'solid', 'dashed', dotted etc
borderTopWidth	Array[string] (optional)	px
borderLeftWidth	Array[string] (optional)	px
borderBottomWidth	Array[string] (optional)	px
borderRightWidth	Array[string] (optional)	px
color	Array[string] (optional)	hex, rgb, hsl, transparent - Colors are converted to RGB prior to testing.
marginTop	Array[string] (optional)	px
marginLeft	Array[string] (optional)	px
marginBottom	Array[string] (optional)	px
marginRight	Array[string] (optional)	px
outlineColor	Array[string] (optional)	hex, rgb, hsl, transparent - Colors are converted to RGB prior to testing.
outlineStyle	Array[string] (optional)	string - 'dashed', 'solid' etc
paddingTop	Array[string] (optional)	px
paddingLeft	Array[string] (optional)	px
paddingBottom	Array[string] (optional)	px
paddingRight	Array[string] (optional)	px
fontSize	Array[string] (optional)	px
fontFamily	Array[string] (optional)	string
fontWeight	Array[string] (optional)	number - e.g. 100, 200, 300 etc, not bold, bolder

License

MIT