Download the PHP package sitegeist/monocle-backstopjs without Composer

On this page you can find all versions of the php package sitegeist/monocle-backstopjs. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Informations about the package monocle-backstopjs

Sitegeist.Monocle.BackstopJS

BackstopJS connector for the Sitegeist.Monocle Styleguide

This package implements the command ./flow backstop:Configuration to create a BackstopJS configuration file for a whole Monocle styleguide to test all prototypes with all propSets in all viewports. The generated configuration and scenarios can be adjusted via package setting or via @styleguide.options.backstop.

Authors & Sponsors

The development and the public-releases of this package was generously sponsored by our customer https://www.cornelsen.de and our employer https://www.sitegeist.de.

Installation

Sitegeist.Monocle.BackstopJS is available via packagist run composer require sitegeist/monocle-backstopjs.

We use semantic-versioning so every breaking change will increase the major-version number.

Basic Tutorial

  1. Install BackstopJS: npm install -g backstopjs or install BackstopJS as dev depencency of your project
  2. Sitegeist.Monocle.BackstopJS: composer require sitegeist/monocle-backstopjs
  3. Create BackstopJS Configuration: ./flow backstop:configuration --package-key Vendor.Site --base-uri http://127.0.0.1:8081 > custom-backstop.json
  4. Start Flow Webserver: FLOW_CONTEXT=Development/VisualRegressionTesting ./flow server:run
  5. Create Reference Files: backstop reference --config=custom-backstop.json
  6. Run Test: backstop test --config=custom-backstop.json

CLI Command

The package provides a single cli command that can be that create a backstop js configuration on the fly for a given site package and baseUri.

Configuration

The generated backstop configuration is configured via Settings.yaml and the @styleguide.options.backtop annotation for fusion prototypes.

Settings.yaml:

All settings can be overwritten for each site-package to adjust to multi site environments

Prototype.fusion:

Advanced scenarios

BackstopJS offers quite a bit of settings to adjust specific scenarios which is documented here https://github.com/garris/BackstopJS#advanced-scenarios. While the general scenario template can be adjusted via Settings.yaml the scenario configuration of each prototyoe can be adjusted by the fusion annotations @styleguide.options.backstop.scenario. All keys defined here there will override the generated scenario.

Common problems and solutions

LazyLoading of Images

If the images in the project use lazy loading it is quite likely that the images are not reliably loaded before the screenshot ist taken. This can be mitigated with by disabling the lazy loading in the styleguide.

The following fusion code that will disable layzyloading for Sitegeist.Kaleidoscope and Sitegeist.Lazybones is included via FlowContext Development/VisualRegressionTesting.

!!! Do not include this code in the regular fusion code for Deveopment or Production !!!

Alternatively you can also use the following options:

  1. Configure a delay in the setting Sitegeist.Monocle.BackstopJS.scenarioTemplate.delay: 3000
  2. Configure a delay for specific prototypes @styleguide.options.backstop.scenario.delay = 3000
  3. Configure an onBeforeScript in the setting Sitegeist.Monocle.BackstopJS.configurationTemplate.onBeforeScript see https://github.com/garris/BackstopJS#running-custom-scripts that ensures that responsive images have been loaded.

Cross platform rendering inconsistencies

Since the rendering especially of fonts has slight deviations between different operation systems it is important to run the tests always in a very similar environment to avoid false errors. BackstopJS come with a --docker option that will execute all tests using a docker container running headless chrome on linux.

If the --docker option is used make sure to call the ./flow backstop:configuration command with a --base-uri that can be reolved from the docker container like in the example below.

Contribution

We will gladly accept contributions. Please send us pull requests.

All versions of monocle-backstopjs with dependencies

PHP Build Version
Package Version
Requires neos/neos Version ~5.0 || ~7.0 || ~8.0 || dev-master
neos/fusion Version ~5.0 || ~7.0 || ~8.0 || dev-master
sitegeist/monocle Version ~7.4 || dev-master
neos/utility-arrays Version *
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package sitegeist/monocle-backstopjs contains the following files

Loading the files please wait ....