Add End-to-End Testing Infrastructure with Playwright

[IliasHad]

Add End-to-End Testing Infrastructure with Playwright

Summary

This PR adds a comprehensive end-to-end testing infrastructure to the Shopify Remix template using Playwright. It includes MSW (Mock Service Worker) for mocking Shopify API responses, a custom Shopify test harness for authentication, and initial test examples.

Motivation

End-to-end testing is essential for ensuring the reliability of Shopify apps. This implementation allows developers to:

• Test the full app flow in an isolated environment
• Mock Shopify API responses without requiring a real store connection
• Validate UI components and user interactions
• Ensure changes don't break existing functionality

Implementation Details

Core Components:

1. Mock Service Worker Configuration:

   • Added handlers for simulating Shopify GraphQL and REST API responses
   • Implemented product creation and variant update mocks

2. Custom Shopify Test Harness:

   • Created a specialized Playwright test extension with Shopify authentication
   • Handles JWT token generation and session management
   • Provides automatic cleanup after tests

3. Environment Configuration:

   • Added .env.testing support for test-specific environment variables
   • Validates required environment variables before tests run

4. Example Tests:

   • Implemented basic navigation and UI interaction tests
   • Demonstrated testing of product generation workflow

File Changes:

• tests/constants/index.ts: Added constants for test shop and API version
• tests/mocks/node.ts: Setup MSW server for Node.js environment
• tests/mocks/handlers.ts: Implemented GraphQL and REST API mock handlers
• tests/global/shopify.ts: Created custom Shopify test harness
• tests/e2e/example.spec.ts: Added example test cases
• .env.testing.example: Added example environment file for testing

How to Test

1. Copy .env.testing.example to .env.testing and fill in your Shopify API credentials
2. Run tests with npm run test