Merge pull request #45 from open-telemetry/add-puppeteer-testing

Add Playwright for visual testing

Author: austinlparker

.github/workflows/test.yml

@@ -0,0 +1,29 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test --update-snapshots
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -8,6 +8,10 @@
 
 # testing
 /coverage
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/tests/*-snapshots/
 
 # next.js
 /.next/
@@ -39,3 +43,6 @@ next-env.d.ts
 .netlify
 
 .env
+
+# Task list for Claude
+TASKS.md

CLAUDE.md

@@ -0,0 +1,54 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Build Commands
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run start` - Start production server
+- `npm run lint` - Run linting with ESLint
+- `npm test` - Run Playwright tests
+- `npm run test:ui` - Run tests with Playwright UI
+- `npm run test:debug` - Run tests in debug mode
+- `npm run test:visual` - Run visual regression tests
+- Testing: Use `/api/test` endpoint in development mode only (accessible via Test Controls button)
+
+## Development Approach
+- Use Test-Driven Development (TDD) when implementing new features
+- Write tests first, ensure they fail, then implement the feature
+- Use Playwright for visual regression and integration testing
+- Add data-testid attributes to elements for reliable test selection
+- For API changes, use the test endpoint or create simple test scripts
+- Verify changes work in both development and production builds
+
+## Code Style Guidelines
+- TypeScript: Strict mode with strictNullChecks enabled
+- ESLint: Extends Next.js core-web-vitals and TypeScript configs
+- Imports: Use absolute imports with `@/` prefix for src directory
+- Components: Use functional React components with TypeScript types
+- Error handling: Use try/catch with specific error types when possible
+- Naming: PascalCase for components, camelCase for functions/variables
+- Styling: Use Tailwind CSS with custom theme extensions
+- State management: Use React hooks (useState, useEffect)
+
+## Copyright Headers
+All source files must include the following copyright header:
+```
+/*
+ * Copyright The OpenTelemetry Authors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+```
+
+## Project Structure
+- `/src/app` - Next.js app router pages and API routes
+- `/src/components` - React components
+- `/src/lib` - Utility functions and shared code
+- `/src/types` - TypeScript type definitions
+
+## PR Guidelines
+- Each PR should address a single issue
+- Reference the issue number in the PR description with "Closes #X"
+- All linting must pass (`npm run lint`)
+- Make sure all copyright headers are present
+- Keep changes focused and minimal

README.md

@@ -1,4 +1,6 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# OpenTelemetry Changelog
+
+This is the source repository for [changelog.opentelemetry.io](https://changelog.opentelemetry.io), a website that tracks changes across OpenTelemetry repositories.
 
 ## Getting Started
 
@@ -27,10 +29,35 @@ To learn more about Next.js, take a look at the following resources:
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## Testing
+
+This project uses Playwright for end-to-end and visual regression testing.
+
+To run tests:
+
+```bash
+# Install Playwright browsers and dependencies
+npx playwright install --with-deps
+
+# Run all tests
+npm test
+
+# Run tests with UI
+npm run test:ui
+
+# Run tests in debug mode
+npm run test:debug
+
+# Run only visual regression tests
+npm run test:visual
+```
+
+Tests are located in the `tests` directory and are organized by feature. Visual regression tests automatically capture screenshots for comparison against baselines.
+
+## Contributing
 
-## Deploy on Vercel
+Please see [CONTRIBUTING.md](./CONTRIBUTING.md) for details on how to contribute to this project.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## License
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+Apache-2.0 - See [LICENSE](./LICENSE) for more information.