How to Use Backstop Generator

Configure the Module

1. Navigate to: Configuration > Development > Backstop Generator (/admin/config/development/backstop-generator)
2. The Test domain will default to your current site URL.
3. In the Reference domain field, enter the URL of the site to compare against (usually your live production site).
4. Use Scenario Defaults and Profile Parameters to define default values applied to new Profiles. The default values provided can be edited later per Profile.

Configure Your Viewports

• Click the Viewports tab.
• Viewports are automatically created based on the breakpoints in your site's default theme.
• To add Viewports for other enabled themes with breakpoints, use the Viewport Generator.
• You can also manually add a new Viewport by clicking Add Viewport in the upper-right corner.

Create Your First Profile

1. Click on the Profile tab.
2. Click Add Backstop Profile.
3. Provide a title and description explaining what this Profile will test.
4. Select the Viewports to be used.
5. Set Profile Parameters and Scenario Defaults.
6. Scroll to the Scenario Generator section:
   • Languages: Choose which enabled languages to test.
   • Homepage: Check this to include your site’s homepage.
   • Menus: Select the menus from which to generate Scenarios. Use the Menu Depth setting to define how many levels deep to include.
   • Content Types: Automatically generate a set number of random nodes per content type (e.g., 5 Blog, 5 Article).
   • Nodes and Paths:
     • Select specific nodes using the Node Lookup field.
     • Manually add paths (e.g., Views or search pages) with the format: label | path
7. Click Save and generate scenarios to save the Profile and generate the Scenarios.
8. Select the Scenarios you want to include, then click Save.
9. A BackstopJS JSON file will be generated for the Profile.

🎉 Congratulations! You’ve created your first visual regression test with BackstopJS.

Run the Commands

1. Go to the Commands tab.

2. Run the displayed commands in your terminal:
   • First, run the reference command to generate baseline images.
   • Then run the test command to compare your current site to the baseline images.

Edit Your Scenarios

If a Scenario fails, you can adjust its configuration:

• Example: Hide a slideshow by adding its selector to the hideSelectors field.

Use the text filters at the top of the Scenarios page to quickly locate specific items.