PHPackages                             metadrop/backstopjs-addons - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. metadrop/backstopjs-addons

ActiveComposer-plugin[Utility & Helpers](/categories/utility)

metadrop/backstopjs-addons
==========================

Metadrop custom backstopjs scripts

v1.4.2(5mo ago)320.7k↓37.5%3[1 issues](https://github.com/Metadrop/backstopjs-addons/issues)[1 PRs](https://github.com/Metadrop/backstopjs-addons/pulls)1JavaScript

Since Jun 14Pushed 5mo ago5 watchersCompare

[ Source](https://github.com/Metadrop/backstopjs-addons)[ Packagist](https://packagist.org/packages/metadrop/backstopjs-addons)[ RSS](/packages/metadrop-backstopjs-addons/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (1)Versions (27)Used By (1)

BackstopJS Addons
=================

[](#backstopjs-addons)

A library that extends and improves the default options provided by [BackstopJS](https://github.com/garris/BackstopJS).

Installation
------------

[](#installation)

```
composer require --dev metadrop/backstopjs-addons
```

Add the path of the "bacsktopjs-addons" folder to the project's .gitignore, for example:

```
/tests/backstopjs/common/libraries/
```

You can override the default destination of the library ("tests/backstopjs/common/libraries/backstopjs-addons") by adding the following parameter to the extra section of your project's composer.json file:

```
"extra": {
  "backstopjs-addons": {
    "path": "custom/destination"
  }
}
```

Options and features
--------------------

[](#options-and-features)

### Scenario setup

[](#scenario-setup)

By default, the library applies the following optimisations to the scenarios to avoid common loading issues:

- Avoid lazy CSS loading
- Remove lazy loading and force eager on all images and iframes
- Avoid asynchronous image decoding
- Force Drupal.blazy to load all images
- Pause the Slick slider autoplay
- Pause the Swiper slider autoplay
- Force oembed-lazyload videos to not load
- Stop the HTML video and go to the second one
- Wait for fonts to load
- Wait for the page to load completely
- Allow setting the `cookiePath` for the cookies.json globally to apply to all scenarios. If set in the scenario configuration, it will override the global configuration.

### Stop animations

[](#stop-animations)

It allows stopping the CSS animations on the provided CSS selectors. This can be set on each scenario using the `stopAnimationsSelectors` property.

```
"scenarios": [
  {
    "label": "Stop animations example",
    "stopAnimationsSelectors": ".selector, .selector-2"
  }
]
```

### Disable filters

[](#disable-filters)

CSS filters can be disabled on the provided CSS selectors. This can be set on each scenario using the `disableFiltersSelectors` property.

```
"scenarios": [
  {
    "label": "Disable filters example",
    "disableFiltersSelectors": ".selector, .selector-2"
  }
]
```

### Log in and navigate to a specific page

[](#log-in-and-navigate-to-a-specific-page)

It allows users to log in and navigate to a specific page before taking a screenshot. To use this feature you need to set at least the following options:

- `loginWrapperSelector` - The selector of the element that wraps the login form.
- `loginUser` - The username to login with
- `loginPass` - The password to login with

Optionally, `loginRedirectTo` can be set to navigate to a specific page after login.

```
"scenarios": [
  {
    "label": "Login and navigate to a specific page",
    "loginWrapperSelector": ".login-form",
    "loginUser": "user",
    "loginPass": "pass",
    "loginRedirectTo": "/admin"
  }
]
```

`loginUser` and `loginPass` can be set globally in the 'backstopjsAddons' settings or in the scenario configuration. If you set the login in the global configuration, you can override it in the scenario configuration.

```
"backstopjsAddons": {
  "loginUser": "global username",
  "loginPass": "global pass"
}
```

The `removeSelectors` option is applied after login and navigation.

### Wait for selector after interaction

[](#wait-for-selector-after-interaction)

This option allows to wait for a selector to appear after an interaction. This feature is configured within a scenario using the `waitForSelectorAfterInteraction' property, which takes a CSS selector.

```
"scenarios": [
  {
    "label": "Click an wait for selector example",
    "waitForSelectorAfterInteraction": ".selector"
  }
]
```

### Custom user agent by viewport

[](#custom-user-agent-by-viewport)

Allow a user agent to be set on the viewport.

```
"viewports": [
  {
    "label": "phone",
    "width": 375,
    "height": 667
    "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1"
  },
]
```

### Hide iframe content

[](#hide-iframe-content)

This option replaces the specified iframe(s) with a grey background, maintaining the size of the iframe. This feature is configured within a scenario using the `hideIframeContent' property, which takes a comma-separated list of CSS selectors.

```
"scenarios": [
  {
    "label": "Hide iframe content example",
    "hideIframeContent": ".iframe-container-selector, .iframe-container-selector-2"
  }
]
```

### Scenario load options

[](#scenario-load-options)

After all the scenario optimisations have been performed, the BackstopJS addons wait for the page to load completely. This uses the waitForNetworkIdle() function in Puppeteer to wait for the network to become idle. The 'networkOptions' option allows you to override this setting either globally or on a per-scenario basis.

ValueDescription"default"The default setup provided by Puppeteer will be applied.{ key: value }Any of the [waitfornetworkidle()](https://pptr.dev/api/puppeteer.waitfornetworkidleoptions) options can be provided."none"No wait will be applied.If not set, the "default" value will be applied.

```
"scenarios": [
  {
    "label": "Hide iframe content example",
    "networkOptions": {"concurrency" : 1 }
  }
]
```

###  Health Score

43

—

FairBetter than 91% of packages

Maintenance62

Regular maintenance activity

Popularity32

Limited adoption so far

Community18

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 62.1% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~22 days

Recently: every ~17 days

Total

24

Last Release

178d ago

Major Versions

0.0.11 → 1.0.02024-10-23

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/3202817?v=4)[Omar Mohamad - El Hassan Lopesino](/maintainers/omarlopesino)[@omarlopesino](https://github.com/omarlopesino)

---

Top Contributors

[![franrou](https://avatars.githubusercontent.com/u/27700987?v=4)](https://github.com/franrou "franrou (36 commits)")[![lpeidro](https://avatars.githubusercontent.com/u/63868167?v=4)](https://github.com/lpeidro "lpeidro (14 commits)")[![rsanzante](https://avatars.githubusercontent.com/u/776453?v=4)](https://github.com/rsanzante "rsanzante (6 commits)")[![juanjol](https://avatars.githubusercontent.com/u/4212917?v=4)](https://github.com/juanjol "juanjol (2 commits)")

### Embed Badge

![Health badge](/badges/metadrop-backstopjs-addons/health.svg)

```
[![Health](https://phpackages.com/badges/metadrop-backstopjs-addons/health.svg)](https://phpackages.com/packages/metadrop-backstopjs-addons)
```

###  Alternatives

[vaimo/composer-patches

Applies a patch from a local or remote file to any package that is part of a given composer project. Patches can be defined both on project and on package level. Optional support for patch versioning, sequencing, custom patch applier configuration and patch command for testing/troubleshooting added patches.

2994.3M16](/packages/vaimo-composer-patches)[mglaman/composer-drupal-lenient

1317.4M15](/packages/mglaman-composer-drupal-lenient)[drupal/core-composer-scaffold

A flexible Composer project scaffold builder.

5341.9M446](/packages/drupal-core-composer-scaffold)[drupal/core-project-message

Adds a message after Composer installation.

2122.6M172](/packages/drupal-core-project-message)[olvlvl/composer-attribute-collector

A convenient and near zero-cost way to retrieve targets of PHP 8 attributes

184108.8k8](/packages/olvlvl-composer-attribute-collector)[lullabot/drainpipe

An automated build tool to allow projects to have a set standardized operations scripts.

41716.4k2](/packages/lullabot-drainpipe)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)