Add Visual-Based Tests and Snapshot Testing with Playwright MCP

[Copilot]

This PR implements a comprehensive visual regression testing suite using Playwright MCP to prevent UX regressions and catch visual changes early in the development cycle.

🎯 Overview

The implementation provides automated visual testing capabilities that capture screenshots of UI components and compare them against baseline images to detect unintended visual changes.

✨ Key Features

Visual Testing Engine

• Pixel-perfect comparison with configurable difference thresholds
• Automatic baseline management - creates baselines on first run, compares on subsequent runs
• Detailed diff generation highlighting visual changes in red with percentage calculations
• Multi-level testing supporting both full-page and component-level screenshots

Playwright MCP Integration

• Component workflows testing UI components with interaction sequences (hover, focus, click)
• End-to-end user journeys with visual validation at each workflow step
• Responsive automation across multiple viewport sizes
• Advanced interaction patterns for complex UI state testing

Comprehensive Test Coverage

• Home Page Tests: Layout validation, event cards, responsive behavior, button interactions
• Navigation Tests: Menu states, hover effects, mobile navigation, theme toggling
• Workflow Tests: Event browsing flows, navigation patterns, form interactions, error states
• Responsive Tests: Mobile (375×667), tablet (768×1024), desktop (1280×720), large (1920×1080)

🏗️ Implementation Details

Project Structure

tests/Visage.Tests.Visual/
├── Base/VisualTestBase.cs           # Base class with common utilities
├── Components/                      # Component-specific visual tests
├── Workflows/                       # End-to-end workflow tests
├── Infrastructure/                  # Core testing engine and MCP helpers
├── Examples/                        # Documentation and usage examples
└── README.md                        # Comprehensive documentation

Usage Examples

Basic Component Testing:

[Test]
public async Task EventCard_ShouldMatchBaseline()
{
    await NavigateToLocalAsync("/");
    var result = await CaptureComponentScreenshotAsync(".card", "event_card");
    AssertVisualTestPassed(result);
}

Responsive Testing:

[Test] 
public async Task Navigation_ResponsiveLayout_ShouldMatchBaselines()
{
    var results = await TestResponsiveComponentAsync("nav", "navigation");
    AssertAllVisualTestsPassed(results);
}

Interaction Workflows:

[Test]
public async Task Button_InteractionStates_ShouldMatchBaselines()
{
    var config = TestDataManager.Scenarios.ButtonInteraction(".btn-primary");
    var result = await McpHelper.TestComponentWorkflowAsync("button_test", config);
    result.Success.Should().BeTrue();
}

🔧 Configuration & Setup

Environment Configuration

• Configurable via JSON file or environment variables
• Support for different test environments (dev, staging, production)
• Flexible viewport and browser settings
• Customizable difference thresholds

CI/CD Integration

• GitHub Actions workflow for automated testing on PRs
• Artifact storage for test results and visual diffs
• Environment-specific URL configuration
• Clear failure reporting with visual diff uploads

🚀 Getting Started

1. Install Playwright browsers:

   ./run-visual-tests.sh --install-browsers

2. Run tests locally:

   ./run-visual-tests.sh --url https://localhost:7150

3. Add new visual tests:

   public class MyComponentTests : VisualTestBase
   {
       [Test]
       public async Task MyComponent_ShouldMatchBaseline()
       {
           await NavigateToLocalAsync("/my-page");
           var result = await CaptureComponentScreenshotAsync(".my-component", "my_component");
           AssertVisualTestPassed(result);
       }
   }

📁 Files Added

• Core Infrastructure: Visual testing engine, MCP integration, configuration management
• Test Suites: Component tests, workflow tests, responsive tests, example tests
• Automation: Shell scripts for test execution, GitHub Actions workflow
• Documentation: Comprehensive README, usage examples, configuration guides

🎁 Benefits

✅ Prevent UX Regressions: Automatically catch visual changes before production
✅ Comprehensive Coverage: Test components, layouts, and complete user workflows
✅ Developer Friendly: Simple APIs, clear documentation, easy setup
✅ CI/CD Ready: Automated testing with artifact storage and reporting
✅ Highly Configurable: Adaptable to different environments and requirements

The visual testing suite is now ready to provide confidence in UI stability and prevent accidental UX regressions across the Visage application.

Fixes #153.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• aka.ms
  • Triggering command: curl -I -sSL --retry 5 --retry-delay 2 --connect-timeout 15 REDACTED (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Join our Discord community for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.