End-to-End Testing with Playwright

Setup

npm install --save-dev @playwright/test
npx playwright install

Commands

npm run test:e2e              # Run all tests
npm run test:e2e:ui           # Run with UI mode
npm run test:e2e:debug        # Run in debug mode
npx playwright test [file]    # Run specific test file

Test Structure

homepage.spec.js - Home page tests
navigation.spec.js - Navigation tests
auth.spec.js - Authentication tests
components.spec.js - Component interaction tests
forms.spec.js - Form tests
page-analyzer.spec.js - Page analysis utilities
advanced.spec.js - Advanced interaction examples
utils/helpers.js - Helper functions

Key Findings

Navigation - page.goto() is more reliable than clicking links
Selectors - getByRole() is more reliable than locator() with CSS selectors
Structure - Main navigation has links to grammar, resources, and auth pages

Page Structure Notes

Home page: Links to resources, grammar, login, and register
Resources: Chapter navigation and content
No hamburger menu or mobile-specific UI elements

Best Practices

Use page-analyzer.spec.js to understand page structure
Review screenshots in screenshots/ to understand the UI
Use role-based selectors: getByRole('link', { name: 'Kapitel 1' })
For navigation, use direct page.goto() rather than clicking links
Add appropriate assertions to verify page content

Common Issues

Element not found: Use more robust selectors
Strict mode violations: Use more specific selectors when multiple elements match
Navigation timeouts: Use direct navigation
Timing issues: Use waitForLoadState('networkidle')

Next Steps

Form submission tests after analyzing form behavior
Content interaction tests
User journey tests
Visual regression tests

2.1 KiB Raw Blame History

End-to-End Testing with Playwright

Setup

Commands

Test Structure

Key Findings

Page Structure Notes

Best Practices

Common Issues

Next Steps

Resources

2.1 KiB

Raw Blame History