dreiguard

Compare versions of website across different browsers using browserstack api. This cli app will use the browserstack api to create a screenshot of your site. You'll have to configure multiple environments & browsers. Thos screenshots are the compared to each other.

Note: In order to maintain decent performance only the centered 500px x 500px are compared.

Install

npm i @dreipol/dreiguard -g

Usage

dreiguard compare http://dreipol.ch ./config/index.js --json --cli -p dreipol.ch --slack all

Commands

compare

Run comparison for url with configuration from provided file

dreiguard compare <URL> <FILE> [--json] [--cli] [--project NAME] [--slack MODE] [--quiet]

• --quiet Suppress console output
• --json will create a json file in the folder configured in the configfile called {PROJECT}.json.
• --cli will print a more readable table.
• --slack [all|diff|whitepage] will print the failing results to slack. The webhook url is configured in the configfile. Only send the selected diff warnings.
• --project <PROJECTNAME> used for creating screenshots and assign them in browserstack (Used for better search)

Example:

dreiguard compare https://dreipol.ch ./dreiguard/config.js

output

┌────────────────────┬────────────────────┬────────────────────┬────────────────────┬──────────┐
│ Device             │ Browser            │ Comp. Device       │ Comp. Browser      │ Diff     │
├────────────────────┼────────────────────┼────────────────────┼────────────────────┼──────────┤
│ Windows 10         │ Chrome 66.0        │ OS X High Sierra   │ Chrome 66.0        │ 0.113069 │
├────────────────────┼────────────────────┼────────────────────┼────────────────────┼──────────┤
│ OS X High Sierra   │ Chrome 66.0        │ Windows 10         │ Chrome 66.0        │ 0.113069 │
└────────────────────┴────────────────────┴────────────────────┴────────────────────┴──────────┘

init

Setup initial configuration file

dreiguard init <FILE>

Example:

dreiguard init ./dreiguard/config.js

Environment variables

In order not to have some sensitive information in the reporsitories there are a couple of env variables you have to either replace in your project or add them.

• BROWSERSTACK_USER user used to access browserstack
• BROWSERSTACK_KEY key used to access browserstack
• SLACK_WEBHOOK webhook to send slack notifications

For local testing you can create a .env file in the project root and than work with dotenv node module. You can use confg/index.js for testing. There dotenv is already set up

Example .env

BROWSERSTACK_USER=REPLACE
BROWSERSTACK_KEY=REPLACE
SLACK_WEBHOOK=REPLACE

Development

In order not have to compile the typescript code every execution, you can use ts-node.

ts-node ./src/cli/index.ts compare https://dreipol.ch ./config/index.js --project dreipol.ch --json --cli