Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

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

wants to merge 5 commits into from

Conversation

Copilot
Copy link

@Copilot Copilot AI commented Jul 30, 2025 •
edited
Loading

This PR implements comprehensive Playwright end-to-end tests for the Tailspin Shelter website to ensure core functionality works correctly and help streamline future PR merging.

What's Added

Test Infrastructure

  • Playwright configuration (client/playwright.config.ts) that uses the existing scripts/start-app.sh to automatically start both Flask backend (port 5100) and Astro frontend (port 4321) before running tests
  • Chromium browser configuration using Desktop Chrome device for consistent cross-platform testing
  • E2E test directory (client/e2e-tests/) containing all test files as requested
  • NPM scripts added to existing client/package.json for easy test execution

Test Coverage (12 tests total)

Homepage Tests (homepage.spec.ts):

  • Page loads with correct title and main content
  • Dog list displays properly with loading states
  • Error handling for API failures with graceful fallbacks

About Page Tests (about.spec.ts):

  • About page content displays correctly
  • Navigation between homepage and about page works

Dog Details Tests (dog-details.spec.ts):

  • Navigation from homepage to individual dog pages
  • Back navigation from dog details to homepage
  • Graceful handling of invalid dog IDs

API Integration Tests (api-integration.spec.ts):

  • Successful API responses with mock data
  • Empty dog list scenarios
  • Network error handling

Key Features

  • ✅ Uses existing infrastructure: Leverages scripts/start-app.sh as required
  • ✅ No new package.json: Extended existing client/package.json only
  • ✅ Proper test isolation: All tests stored in client/e2e-tests/ directory
  • ✅ Chromium browser: Uses Chromium (Chrome engine) for consistent testing across platforms
  • ✅ Comprehensive coverage: Tests core user journeys and error scenarios

Available Commands

npm run test:e2e          # Run all tests
npm run test:e2e:headed   # Run with visible browser
npm run test:e2e:ui       # Run with Playwright UI
npm run test:e2e:debug    # Debug mode
npm run test:e2e:chromium # Run specifically with Chromium project

All 12 tests are configured to run with Chromium, providing confidence in the website's core functionality and helping ensure future changes don't break existing features.

Fixes #114.

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Copilot AI and others added 2 commits July 30, 2025 17:48
@Copilot @GeekTrainer
Add Playwright e2e tests for core website functionality
9d3c6a9 
Co-authored-by: GeekTrainer <6109729+GeekTrainer@users.noreply.github.com>
@Copilot @GeekTrainer
Clean up gitignore and remove test artifacts from repo
67ed72d 
Co-authored-by: GeekTrainer <6109729+GeekTrainer@users.noreply.github.com>
@Copilot Copilot AI changed the title [WIP] Create Playwright tests Add Playwright end-to-end tests for core website functionality Jul 30, 2025
@Copilot Copilot AI requested a review from GeekTrainer July 30, 2025 17:55
Copilot finished work on behalf of GeekTrainer July 30, 2025 17:55
@GeekTrainer
Copy link
Collaborator

@copilot update the Playwright tests to ensure only WebKit is used. We don't need to worry about other browsers

@Copilot @GeekTrainer
Update Playwright configuration to use only WebKit browser
2e318d0 
Co-authored-by: GeekTrainer <6109729+GeekTrainer@users.noreply.github.com>
@Copilot Copilot SWE Agent
Copy link
Author

Copilot AI commented Jul 30, 2025

@copilot update the Playwright tests to ensure only WebKit is used. We don't need to worry about other browsers

Updated the Playwright configuration to use only WebKit browser. Changes made:

  • Replaced Chromium configuration with WebKit using Desktop Safari device
  • Updated npm script from test:e2e:chromium to test:e2e:webkit
  • Updated documentation to reflect WebKit usage
  • All 12 tests now configured to run with [webkit] instead of [chromium]

Commit: 2e318d0

@Copilot Copilot AI changed the title Add Playwright end-to-end tests for core website functionality Add Playwright end-to-end tests for core website functionality using WebKit Jul 30, 2025
Copilot finished work on behalf of GeekTrainer July 30, 2025 18:11
@GeekTrainer
Copy link
Collaborator

@copilot let's update this to only use Chromium instead

@Copilot @GeekTrainer
Update Playwright configuration to use only Chromium browser
5f32c3f 
Co-authored-by: GeekTrainer <6109729+GeekTrainer@users.noreply.github.com>
@Copilot Copilot SWE Agent
Copy link
Author

Copilot AI commented Jul 30, 2025

@copilot let's update this to only use Chromium instead

Updated the Playwright configuration to use only Chromium browser. Changes made:

  • Replaced WebKit configuration with Chromium using Desktop Chrome device
  • Updated npm script from test:e2e:webkit to test:e2e:chromium
  • All 12 tests now configured to run with [chromium] instead of [webkit]

Commit: 5f32c3f

@Copilot Copilot AI changed the title Add Playwright end-to-end tests for core website functionality using WebKit Add Playwright end-to-end tests for core website functionality using Chromium Jul 30, 2025
Copilot finished work on behalf of GeekTrainer July 30, 2025 19:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@GeekTrainer GeekTrainer Awaiting requested review from GeekTrainer GeekTrainer is a code owner

@peckjon peckjon Awaiting requested review from peckjon peckjon will be requested when the pull request is marked ready for review peckjon is a code owner

@chrisreddington chrisreddington Awaiting requested review from chrisreddington chrisreddington will be requested when the pull request is marked ready for review chrisreddington is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

@GeekTrainer GeekTrainer

Copilot code review Copilot

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Create Playwright tests
2 participants
@Copilot @GeekTrainer