@dreipol/dreiguard
Compare cross browser screenshots for url
Last updated 2 years ago by faebeee .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @dreipol/dreiguard 
SYNC missed versions from official npm registry.

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

Current Tags

  • 0.9.1                                ...           latest (2 years ago)

14 Versions

  • 0.9.1                                ...           2 years ago
  • 0.9.0                                ...           2 years ago
  • 0.8.2                                ...           2 years ago
  • 0.8.0                                ...           2 years ago
  • 0.7.4                                ...           2 years ago
  • 0.7.3                                ...           2 years ago
  • 0.7.2                                ...           2 years ago
  • 0.7.1                                ...           2 years ago
  • 0.7.0                                ...           2 years ago
  • 0.6.0                                ...           2 years ago
  • 0.5.1                                ...           2 years ago
  • 0.5.0                                ...           2 years ago
  • 0.4.0                                ...           2 years ago
  • 0.3.2                                ...           2 years ago
Downloads
Today 0
This Week 0
This Month 22
Last Day 0
Last Week 18
Last Month 1
Dependencies (11)
Dev Dependencies (12)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |