Initial commit

skills/visual-regression-tester/assets/README.md

@@ -0,0 +1,8 @@
+# Assets
+
+Bundled resources for visual-regression-tester skill
+
+- [ ] example_percy_config.yml: Example Percy configuration file.
+- [ ] example_chromatic_config.yml: Example Chromatic configuration file.
+- [ ] example_backstop_config.js: Example BackstopJS configuration file.
+- [ ] html_report_template.html: HTML template for generating visual regression test reports.

skills/visual-regression-tester/assets/example_backstop_config.js

@@ -0,0 +1,72 @@
+/**
+ * BackstopJS Configuration File
+ *
+ * This is an example configuration file for BackstopJS.  Customize it to fit your project's needs.
+ *
+ * For detailed documentation, visit: https://github.com/garris/BackstopJS
+ */
+
+module.exports = {
+  id: 'my-project', // A unique ID for your project, used for report naming.  Change this!
+
+  viewports: [
+    {
+      label: 'desktop',
+      width: 1920,
+      height: 1080,
+    },
+    {
+      label: 'mobile',
+      width: 320,
+      height: 480,
+    },
+  ],
+
+  onBeforeScript: 'puppet/onBefore.js',
+  onReadyScript: 'puppet/onReady.js',
+
+  scenarios: [
+    {
+      label: 'Example Homepage', // A descriptive label for this scenario
+      url: 'https://example.com', // The URL to test
+      referenceUrl: '', // Optional: URL for the baseline/reference screenshots.  Leave empty for first run.
+      readyEvent: '', // Optional: Wait for a specific event to fire before taking the screenshot.
+      readySelector: '', // Optional: Wait for a specific selector to be present before taking the screenshot.
+      delay: 0, // Optional: Wait for a specified number of milliseconds before taking the screenshot. Useful for animations.
+      hideSelectors: [], // Optional: Hide elements before taking the screenshot.  Useful for dynamic content.
+      removeSelectors: [], // Optional: Remove elements before taking the screenshot.  Useful for dynamic content.
+      selectorExpansion: true, // Optional: Expand selectors to include all matching elements.
+      selectors: [
+        'document', // Take a screenshot of the entire document
+      ],
+      misMatchThreshold: 0.1, // Percentage of acceptable pixel difference between the baseline and the test screenshot.
+      requireSameDimensions: true, // Ensure that the baseline and test screenshots have the same dimensions.
+    },
+    // Add more scenarios here to test different pages and components.
+    // Example:
+    // {
+    //   label: 'Example Contact Page',
+    //   url: 'https://example.com/contact',
+    //   selectors: [
+    //     '.contact-form',
+    //   ],
+    // },
+  ],
+
+  paths: {
+    bitmaps_reference: 'backstop_data/bitmaps_reference',
+    bitmaps_test: 'backstop_data/bitmaps_test',
+    html_report: 'backstop_data/html_report',
+    ci_report: 'backstop_data/ci_report',
+  },
+
+  report: ['browser'], // Generate a browser-based HTML report.
+  engine: 'puppeteer', // Use Puppeteer as the browser automation engine.
+  engineOptions: {
+    args: ['--no-sandbox'], // Required for running Puppeteer in some environments (e.g., Docker).
+  },
+  asyncCaptureLimit: 5, // Limit the number of concurrent screenshots to avoid overloading the system.
+  asyncCompareLimit: 50, // Limit the number of concurrent comparisons to avoid overloading the system.
+  debug: false, // Enable debug mode for more verbose logging.
+  debugWindow: false, // Open the browser window in debug mode.
+};

skills/visual-regression-tester/assets/example_chromatic_config.yml

@@ -0,0 +1,55 @@
+# Configuration for Chromatic visual regression testing
+# https://www.chromatic.com/
+
+# Project token - REPLACE_ME with your actual Chromatic project token.
+# This token is used to authenticate with Chromatic and identify your project.
+projectToken: REPLACE_ME
+
+# Branch name - Optional, defaults to the current git branch.
+# You can specify a branch name manually if needed.
+branchName: main
+
+# Commit SHA - Optional, defaults to the current git commit SHA.
+# Used to link the Chromatic build to a specific commit.
+commitSha: YOUR_VALUE_HERE # e.g., "a1b2c3d4e5f6g7h8i9j0"
+
+# Repository slug - Optional, defaults to the origin URL from git config.
+# Format: <owner>/<repository> (e.g., "my-org/my-repo")
+repositorySlug: YOUR_VALUE_HERE # e.g., "my-org/my-repo"
+
+# Build number - Optional, defaults to the CI build number (if available).
+# Useful for tracking specific builds within your CI/CD system.
+buildNumber: YOUR_VALUE_HERE # e.g., "1234"
+
+# Auto Accept Changes - Flag to automatically accept all changes. USE WITH CAUTION!
+# Useful in CI environments where you want to automatically approve visual changes.
+#  Set to 'true' to auto-accept all changes, 'false' to require manual approval.
+autoAcceptChanges: false
+
+# Ignore Files - List of file patterns to ignore during screenshot collection.
+# Use glob patterns to match files or directories.
+ignoreFiles:
+  - "**/node_modules/**"
+  - "**/dist/**"
+  - "**/build/**"
+
+# Include Files - List of file patterns to include during screenshot collection.
+# Use glob patterns to match files or directories.  If not specified, all files are considered.
+includeFiles:
+  - "**/src/**/*.stories.@(js|jsx|ts|tsx)"
+  - "**/stories/**/*.stories.@(js|jsx|ts|tsx)"
+
+# Storybook URL - The URL of your deployed Storybook instance.
+# If not specified, Chromatic will attempt to build and serve Storybook locally.
+# Useful when you want to use a pre-built Storybook instance.
+storybookUrl: YOUR_VALUE_HERE # e.g., "https://your-storybook.example.com"
+
+# Debug - Enable debug mode for more verbose logging.
+debug: false
+
+# Options specific to the Chromatic CLI.  See https://www.chromatic.com/docs/cli-options for full details.
+chromaticFlags:
+  # Example: --only-changed
+  onlyChanged: false
+  # Example: --exit-zero-on-changes
+  exitZeroOnChanges: false

skills/visual-regression-tester/assets/example_percy_config.yml

@@ -0,0 +1,42 @@
+# Percy configuration file example
+# This file defines the settings for running visual regression tests using Percy.
+
+version: 2
+# Percy configuration version.  Keep this as 2 for the latest stable features.
+
+percy:
+  # Percy specific settings
+  token: REPLACE_ME # Your Percy project token.  Get this from the Percy dashboard.
+  branch: main # The branch to compare against.  Defaults to 'main' or environment variable.
+  parallel: true # Enable parallel test execution for faster results.
+  widths: # Viewport widths to capture screenshots at.  Important for responsive testing.
+    - 375 # Mobile
+    - 768 # Tablet
+    - 1280 # Desktop
+  minimum_height: 1024 # Minimum height for the screenshot.  Useful for pages that dynamically load content.
+  debug: false # Enable debug logging.  Useful for troubleshooting.
+
+# Generic configuration for test execution
+test:
+  url: "YOUR_VALUE_HERE" # The base URL of your application.  e.g., "https://example.com"
+  files:
+    - "path/to/your/test/file.js" # Example test file.  Can be a glob pattern.
+    - "another/test/file.spec.ts" # Example test file.  Can be a glob pattern.
+  # Test framework specific configurations.  These are examples, adjust to your framework.
+  # This plugin doesn't execute the tests, it just passes the config along to Percy CLI or similar.
+  framework:
+    type: playwright # Example: "playwright", "cypress", "selenium"
+    options: # Framework specific options. Consult your framework's documentation.
+      headless: true # Run tests in headless mode.  Good for CI/CD.
+      browser: chromium # Browser to use for testing.  e.g., "chromium", "firefox", "webkit"
+
+# Environment variables to pass to the test execution environment.
+# Useful for injecting credentials or other configuration values.
+environment:
+  API_KEY: "YOUR_API_KEY" # Example API key.  Replace with your actual key.
+  DATABASE_URL: "YOUR_DATABASE_URL" # Example database URL. Replace with your actual URL.
+
+# Optional: Configure custom snapshot names.  Useful for making reports easier to read.
+snapshots:
+  prefix: "Component_" # Prefix for all snapshot names.
+  suffix: "_Example" # Suffix for all snapshot names.

skills/visual-regression-tester/assets/html_report_template.html

@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Visual Regression Test Report</title>
+    <style>
+        /* Inline CSS for styling */
+        body {
+            font-family: sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f4f4;
+            color: #333;
+        }
+
+        .container {
+            max-width: 960px;
+            margin: 20px auto;
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        h1 {
+            text-align: center;
+            margin-bottom: 20px;
+            color: #007bff;
+        }
+
+        h2 {
+            margin-top: 30px;
+            margin-bottom: 10px;
+            color: #333;
+        }
+
+        .test-suite {
+            margin-bottom: 20px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 10px;
+        }
+
+        .test-case {
+            margin-bottom: 10px;
+            padding: 10px;
+            border: 1px solid #eee;
+            border-radius: 4px;
+            background-color: #f9f9f9;
+        }
+
+        .test-case h3 {
+            margin-top: 0;
+            margin-bottom: 5px;
+            font-size: 1.2em;
+        }
+
+        .image-comparison {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-top: 10px;
+        }
+
+        .image-container {
+            flex: 1 1 300px;
+            text-align: center;
+            border: 1px solid #ccc;
+            padding: 5px;
+            border-radius: 4px;
+            background-color: #fff;
+        }
+
+        .image-container img {
+            max-width: 100%;
+            height: auto;
+            display: block;
+            margin: 0 auto;
+        }
+
+        .status-passed {
+            color: green;
+        }
+
+        .status-failed {
+            color: red;
+        }
+
+        .status-pending {
+            color: orange;
+        }
+
+        .footer {
+            text-align: center;
+            margin-top: 30px;
+            padding-top: 20px;
+            border-top: 1px solid #eee;
+            color: #777;
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 600px) {
+            .container {
+                padding: 10px;
+                margin: 10px auto;
+            }
+
+            .image-comparison {
+                flex-direction: column;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="container">
+        <h1>Visual Regression Test Report</h1>
+
+        <p><strong>Date:</strong> {{report_date}}</p>
+        <p><strong>Generated By:</strong> Visual Regression Tester Plugin</p>
+
+        <h2>Summary</h2>
+        <p><strong>Total Tests:</strong> {{total_tests}}</p>
+        <p><strong>Passed:</strong> <span class="status-passed">{{passed_tests}}</span></p>
+        <p><strong>Failed:</strong> <span class="status-failed">{{failed_tests}}</span></p>
+        <p><strong>Pending:</strong> <span class="status-pending">{{pending_tests}}</span></p>
+
+        <h2>Test Results</h2>
+
+        {{test_results}} <!-- Placeholder for dynamically generated test results -->
+
+        <div class="footer">
+            <p>Report generated by Visual Regression Tester plugin.</p>
+        </div>
+    </div>
+
+</body>
+</html>