Merge pull request #115 from github-samples/copilot/fix-114

Add Playwright end-to-end tests for core website functionality using Chromium

Author: GeekTrainer

.gitignore

@@ -37,4 +37,8 @@ instance/
 .webassets-cache
 flask_session/
 .coverage
-htmlcov/
+htmlcov/
+
+# playwright
+client/test-results/
+client/playwright-report/

client/e2e-tests/README.md

@@ -0,0 +1,67 @@
+# End-to-End Tests for Tailspin Shelter
+
+This directory contains Playwright end-to-end tests for the Tailspin Shelter website.
+
+## Test Files
+
+- `homepage.spec.ts` - Tests for the main homepage functionality
+- `about.spec.ts` - Tests for the about page
+- `dog-details.spec.ts` - Tests for individual dog detail pages
+- `api-integration.spec.ts` - Tests for API integration and error handling
+
+## Running Tests
+
+### Prerequisites
+
+Make sure you have installed dependencies:
+```bash
+npm install
+```
+
+### Running Tests
+
+```bash
+# Run all tests
+npm run test:e2e
+
+# Run tests with UI mode (for debugging)
+npm run test:e2e:ui
+
+# Run tests in headed mode (see browser)
+npm run test:e2e:headed
+
+# Debug tests
+npm run test:e2e:debug
+```
+
+## Test Coverage
+
+The tests cover the following core functionality:
+
+### Homepage Tests
+- Page loads with correct title and content
+- Dog list displays properly
+- Loading states work correctly
+- Error handling for API failures
+
+### About Page Tests
+- About page content displays correctly
+- Navigation back to homepage works
+
+### Dog Details Tests
+- Navigation from homepage to dog details
+- Navigation back from dog details to homepage
+- Handling of invalid dog IDs
+
+### API Integration Tests
+- Successful API responses
+- Empty dog list handling
+- Network error handling
+
+## Configuration
+
+Tests are configured in `../playwright.config.ts` and automatically start the application servers using the existing `scripts/start-app.sh` script before running tests.
+
+The tests run against:
+- Client (Astro): http://localhost:4321
+- Server (Flask): http://localhost:5100

client/e2e-tests/about.spec.ts

@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('About Page', () => {
+  test('should load about page and display content', async ({ page }) => {
+    await page.goto('/about');
+    
+    // Check that the page title is correct
+    await expect(page).toHaveTitle(/About - Tailspin Shelter/);
+    
+    // Check that the main heading is visible
+    await expect(page.getByRole('heading', { name: 'About Tailspin Shelter' })).toBeVisible();
+    
+    // Check that content is visible
+    await expect(page.getByText('Nestled in the heart of Seattle')).toBeVisible();
+    await expect(page.getByText('The name "Tailspin" reflects')).toBeVisible();
+    
+    // Check the fictional organization note
+    await expect(page.getByText('Tailspin Shelter is a fictional organization')).toBeVisible();
+  });
+
+  test('should navigate back to homepage from about page', async ({ page }) => {
+    await page.goto('/about');
+    
+    // Click the "Back to Dogs" button
+    await page.getByRole('link', { name: 'Back to Dogs' }).click();
+    
+    // Should be redirected to homepage
+    await expect(page).toHaveURL('/');
+    await expect(page.getByRole('heading', { name: 'Welcome to Tailspin Shelter' })).toBeVisible();
+  });
+});

client/e2e-tests/api-integration.spec.ts

@@ -0,0 +1,56 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('API Integration', () => {
+  test('should fetch dogs from API', async ({ page }) => {
+    // Mock successful API response
+    await page.route('/api/dogs', route => {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify([
+          { id: 1, name: 'Buddy', breed: 'Golden Retriever' },
+          { id: 2, name: 'Luna', breed: 'Husky' },
+          { id: 3, name: 'Max', breed: 'Labrador' }
+        ])
+      });
+    });
+
+    await page.goto('/');
+    
+    // Check that mocked dogs are displayed
+    await expect(page.getByText('Buddy')).toBeVisible();
+    await expect(page.getByText('Golden Retriever')).toBeVisible();
+    await expect(page.getByText('Luna')).toBeVisible();
+    await expect(page.getByText('Husky')).toBeVisible();
+    await expect(page.getByText('Max')).toBeVisible();
+    await expect(page.getByText('Labrador')).toBeVisible();
+  });
+
+  test('should handle empty dog list', async ({ page }) => {
+    // Mock empty API response
+    await page.route('/api/dogs', route => {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify([])
+      });
+    });
+
+    await page.goto('/');
+    
+    // Check that empty state message is displayed
+    await expect(page.getByText('No dogs available at the moment')).toBeVisible();
+  });
+
+  test('should handle network errors', async ({ page }) => {
+    // Mock network error
+    await page.route('/api/dogs', route => {
+      route.abort('failed');
+    });
+
+    await page.goto('/');
+    
+    // Check that error message is displayed
+    await expect(page.getByText(/Error:/)).toBeVisible({ timeout: 10000 });
+  });
+});

client/e2e-tests/dog-details.spec.ts

@@ -0,0 +1,51 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Dog Details', () => {
+  test('should navigate to dog details from homepage', async ({ page }) => {
+    await page.goto('/');
+    
+    // Wait for dogs to load
+    await page.waitForSelector('.grid a[href^="/dog/"]', { timeout: 10000 });
+    
+    // Get the first dog link
+    const firstDogLink = page.locator('.grid a[href^="/dog/"]').first();
+    
+    // Get the dog name for verification
+    const dogName = await firstDogLink.locator('h3').textContent();
+    
+    // Click on the first dog
+    await firstDogLink.click();
+    
+    // Should be on a dog details page
+    await expect(page.url()).toMatch(/\/dog\/\d+/);
+    
+    // Check that the page title is correct
+    await expect(page).toHaveTitle(/Dog Details - Tailspin Shelter/);
+    
+    // Check for back button
+    await expect(page.getByRole('link', { name: 'Back to All Dogs' })).toBeVisible();
+  });
+
+  test('should navigate back to homepage from dog details', async ({ page }) => {
+    // Go directly to a dog details page (assuming dog with ID 1 exists)
+    await page.goto('/dog/1');
+    
+    // Click the back button
+    await page.getByRole('link', { name: 'Back to All Dogs' }).click();
+    
+    // Should be redirected to homepage
+    await expect(page).toHaveURL('/');
+    await expect(page.getByRole('heading', { name: 'Welcome to Tailspin Shelter' })).toBeVisible();
+  });
+
+  test('should handle invalid dog ID gracefully', async ({ page }) => {
+    // Go to a dog page with an invalid ID
+    await page.goto('/dog/99999');
+    
+    // The page should still load (even if no dog is found)
+    await expect(page).toHaveTitle(/Dog Details - Tailspin Shelter/);
+    
+    // Back button should still be available
+    await expect(page.getByRole('link', { name: 'Back to All Dogs' })).toBeVisible();
+  });
+});

client/e2e-tests/homepage.spec.ts

@@ -0,0 +1,58 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tailspin Shelter Homepage', () => {
+  test('should load homepage and display title', async ({ page }) => {
+    await page.goto('/');
+    
+    // Check that the page title is correct
+    await expect(page).toHaveTitle(/Tailspin Shelter - Find Your Forever Friend/);
+    
+    // Check that the main heading is visible
+    await expect(page.getByRole('heading', { name: 'Welcome to Tailspin Shelter' })).toBeVisible();
+    
+    // Check that the description is visible
+    await expect(page.getByText('Find your perfect companion from our wonderful selection')).toBeVisible();
+  });
+
+  test('should display dog list section', async ({ page }) => {
+    await page.goto('/');
+    
+    // Check that the "Available Dogs" heading is visible
+    await expect(page.getByRole('heading', { name: 'Available Dogs' })).toBeVisible();
+    
+    // Wait for dogs to load (either loading state, error, or actual dogs)
+    await page.waitForSelector('.grid', { timeout: 10000 });
+  });
+
+  test('should show loading state initially', async ({ page }) => {
+    await page.goto('/');
+    
+    // Check that loading animation is shown initially
+    // Look for the loading skeleton cards
+    const loadingElements = page.locator('.animate-pulse').first();
+    
+    // Either loading should be visible initially, or dogs should load quickly
+    try {
+      await expect(loadingElements).toBeVisible({ timeout: 2000 });
+    } catch {
+      // If loading finishes too quickly, that's fine - check for dog content instead
+      await expect(page.locator('.grid')).toBeVisible();
+    }
+  });
+
+  test('should handle API errors gracefully', async ({ page }) => {
+    // Intercept the API call and make it fail
+    await page.route('/api/dogs', route => {
+      route.fulfill({
+        status: 500,
+        contentType: 'application/json',
+        body: JSON.stringify({ error: 'Internal Server Error' })
+      });
+    });
+
+    await page.goto('/');
+    
+    // Check that error message is displayed
+    await expect(page.getByText(/Failed to fetch data/)).toBeVisible({ timeout: 10000 });
+  });
+});

client/package-lock.json

@@ -6,7 +6,12 @@
     "dev": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:chromium": "playwright test --project=chromium"
   },
   "dependencies": {
     "@astrojs/node": "^9.1.3",
@@ -17,6 +22,7 @@
     "typescript": "^5.8.2"
   },
   "devDependencies": {
+    "@playwright/test": "^1.49.1",
     "@types/node": "^22.13.11",
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.3",