This npm package provides configuration for visual regression, or screenshot, testing with Backstop JS.
- Backstop JS and Chromium are installed as npm packages.
- This package's entry point (index.js) gets project-level configuration from larva.config.js and provides useful defaults for the Backstop JS configuration object.
- When the appropriate npm script is used, the object exported from
index.js
is passed tobackstop
CLI as configuration. - Backstop uses that configuration object when it runs the tests.
First install the package and its dependencies. This includes headless Chrome, so will take a moment.
-
Install the package. Run this command from the same location as package.json.
npm install @penskemediacorp/backstopjs-config backstopjs --save-dev
-
Add configuration to larva.config.js. You can either test modules from the Larva repo, or test a full page screenshot at specific paths.
Configuration for testing Larva modules:
// larva.config.js module.exports = { // This object will provide project-level overrides for the Backstop config. backstop: { // If testing default Larva patterns, replace "project" with "larva", in this path: testBaseUrl: 'http://localhost:3000/project', larvaModules: [ 'footer', 'breadcrumbs' ], backstopConfig: { // This is required for testing on the Larva server. It is not required for testing external URLs. 'engineOptions': { 'args': [ '--no-sandbox', '--proxy-server=127.0.0.1:3000', '--proxy-bypass-list=<-loopback>' ], } } }, }
And configuration for testing a document and external URLs:
// larva.config.js module.exports = { // This object will provide project-level overrides for the Backstop config. backstop: { // Be sure to include HTTP password in the URL testBaseUrl: 'https://pmc:for-the-win@deadline.pmcqa.com', // Use the testPaths property instead of larvaModules. These are appended to the testBaseUrl. testPaths: [ '/', '/v/film' ] }, }
-
Add the npm script to package.json:
"scripts": { "backstop": "backstop --config=node_modules/@penskemediacorp/backstopjs-config" }
After you have added the configuration, it is time to run the tests.
- You must first generate reference screenshots from a master branch, or other branch that contains the UI you want to test against. When you are on that branch, run the following:
# Generate reference screenshots npm run backstop -- reference
- Checkout to your feature branch, or the branch that contains changes you want to test for regressions.
- Run the test with:
# Run the tests, then open an HTML page with a UI for viewing results. npm run backstop -- test
- Testing full pages with ads will likely time out. There is a Puppeteer script for hiding ads, but it is currently disabled.
This package started as part of PMC Build Utils, and was migrated to the pmc-larva monorepo during the AMH redesign project to take advantage of the shared environment for developing Larva-specific tooling.
Post questions in the #larva Slack channel and @laras126. Refer to the Backstop JS documentation for troubleshooting, and consider using the search term Puppeteer
when googling for solutions.