npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

bsbs

v0.2.1

Published

BackstopJS-like Visual Regression Tests for BrowserStack Automate

Downloads

17

Readme

BSBS

A BackstopJS-like Visual Regression Testing Tool for BrowserStack Automate

npx bsbs
  --mode=(reference|test|report)
  --file=<path to the backstop.json or backstop.js>
  --capabilities=<path to the selenium capability config>
  (--filter=<regexp of scenario>)
  (--local)

See Example

See example report here:

https://mangano-ito.github.io/bsbs/

Example Report

and its configurations:

  • https://github.com/mangano-ito/bsbs/blob/gh-pages/backstop.js
  • https://github.com/mangano-ito/bsbs/blob/gh-pages/capabilities.json

Usage

  1. Capture Reference Pages: npx bsbs --mode=reference --file=backstop.json --capabilities=capabilities.json
  2. Capture Test Pages: npx bsbs --mode=test --file=backstop.json --capabilities=capabilities.json
  3. Compare and Generate Test Report: npx bsbs --mode=report --file=backstop.json --capabilities=capabilities.json

Options

--mode

  • reference: run tests on reference pages
  • test: run tests on test pages
  • report: generate test reports (reference & test must be done before this)

--file

Path to BackstopJS Test: backstop.json | backstop.js

(see https://github.com/garris/BackstopJS/tree/e4ef74b0f25c27125dffab1b14237f924dbf597e#using-backstopjs)

--capabilities

Path to Selenium Capabilities Configuration for BrowserStack Automate.

(see https://www.browserstack.com/automate/capabilities)

This file also can be provided in .json ({ ... }) or in .js (with module.exports = { ... };)

--filter (Optional)

filter scenarios to run by RegExp given (e.g.: --filter="my-top-page.*")

--local (Optional)

enable BrowserStack local testing (using your internal network)

(see https://www.browserstack.com/automate/node#setting-local-tunnel)

Environment Variables

You can also always give your default Environment Variables by placing .env file. See example.env for example.

BROWSERSTACK_USERNAME (Required unless given in capabilities file)

The User ID for BrowserStack Automate

(see https://www.browserstack.com/accounts/settings)

BROWSERSTACK_ACCESS_KEY (Required unless given in capabilities file)

The Access Key for BrowserStack Automate

(see https://www.browserstack.com/accounts/settings)

ARTIFACTS_REFERENCE_PATH (Optional)

Path to the Directory for Reference Screenshots

(default: ${working directory}/artifacts/reference/)

ARTIFACTS_TEST_PATH (Optional)

Path to the Directory for Test Screenshots

(default: ${working directory}/artifacts/test/)

ARTIFACTS_DIFFERENCE_PATH (Optional)

Path to the Directory for Difference Images

(default: ${working directory}/artifacts/difference/)

ARTIFACTS_REPORT_PATH (Optional)

Path to the Directory for Test Reports

(default: ${working directory}/artifacts/)