Write E2E tests with Playwright

[fusion94]

Description

Implement all 15 end-to-end feature tests using Playwright with both frontend and backend running.

Feature Tests

F-1: User login flow

• Navigate to login page, enter credentials, submit
• Verify redirect to dashboard
• Verify user info displayed in header/nav

F-2: Add a new wine and bottles

• Navigate to add wine page, fill out form
• Submit and verify redirect to wine detail
• Add bottles to the wine, verify count updates

F-3: Search and filter inventory

• Type search query, verify results update
• Apply color filter, verify filtered results
• Apply vintage range, verify combined filters
• Clear filters, verify full list returns

F-4: Consume a bottle and add tasting notes

• Navigate to wine with bottles
• Click consume on a bottle
• Fill out tasting note form
• Verify bottle status changes to consumed
• Verify tasting note appears

F-5: Dashboard displays correct statistics

• Navigate to dashboard
• Verify total bottles count matches inventory
• Verify charts render with data
• Verify summary cards show correct values

F-6: Storage location management

• Create a new storage location
• Create a child location
• Assign a bottle to a location
• Browse by location and verify bottle appears

F-7: Export collection as CSV

• Navigate to export (admin user)
• Click export CSV
• Verify file downloads
• Validate CSV content (headers, row count)

F-8: Admin creates a new user account

• Navigate to user management (admin)
• Fill out create user form
• Verify new user appears in list
• Log in as new user to verify account works

F-9: Member cannot access admin functions

• Log in as member user
• Verify user management page is not accessible
• Verify export is not accessible
• Verify collection read/write works

F-10: Edit an existing wine's details

• Navigate to wine detail, click edit
• Change fields, submit
• Verify changes reflected on detail page
• Verify changes reflected in wine list

F-11: Search with no results shows appropriate empty state

• Search for a nonsensical term
• Verify empty state message displays
• Verify suggestion to clear filters/broaden search

F-12: Drink window alerts appear for ready-to-drink wines

• Ensure test data includes wines with drink_from = current year
• Navigate to dashboard
• Verify alert section shows these wines
• Click alert to navigate to wine detail

F-13: Responsive layout works on mobile viewport

• Set viewport to 375px width
• Navigate through main pages (dashboard, wines, detail)
• Verify navigation works (hamburger menu or similar)
• Verify content is readable and usable

F-14: Pagination through a large wine list

• Ensure test data has >25 wines
• Navigate to wine list
• Verify pagination controls appear
• Navigate to page 2, verify different wines
• Change page size, verify list updates

F-15: Logout clears session and redirects to login

• Log in as user
• Click logout
• Verify redirect to login page
• Attempt to navigate to protected page
• Verify redirect back to login

Setup

• Playwright config with Chromium
• Dev server startup script for tests
• Test database seeded with known data
• Test user credentials configured
• Screenshot on failure

Acceptance Criteria

• All 15 E2E tests pass
• Tests run against a production-like build (npm run build)
• Tests are stable (no flaky tests)
• Playwright report generated on failure
• Tests complete in < 5 minutes
• CI integration via GitHub Actions

References

• PRD Section 9: Testing Strategy (Feature/Integration Tests)