Skip to content

Conversation

@ed-fbiberger
Copy link
Contributor

@ed-fbiberger ed-fbiberger commented Dec 12, 2025

Summary

This PR adds comprehensive Playwright end-to-end testing for the data contract editor and integrates it into the CI/CD workflow, ensuring the application works correctly in production mode before deployment.

Changes

Testing Infrastructure

  • ✅ Added @playwright/test as a dev dependency
  • ✅ Created Playwright configuration (playwright.config.js)
  • ✅ Added test:playwright npm script for automated testing

Test Coverage

Created tests/editor.spec.js that verifies:

  • Editor loads successfully
  • Form elements are visible on the left (navigation menu, input fields)
  • Preview section is visible on the right
  • All key UI components render correctly

CI/CD Integration

  • ✅ Added dedicated test job to GitHub Actions workflow
  • ✅ Runs Playwright tests before deployment
  • build_and_deploy_job now depends on tests passing
  • ✅ Uploads test results and screenshots as artifacts (30-day retention)
  • No deployment happens unless all tests pass 🛡️

Test Script

The test:playwright npm script:

  1. Builds the production app
  2. Starts the server using bin/datacontract-editor.js on port 9091
  3. Runs Playwright tests
  4. Automatically cleans up by killing the server
  5. Returns correct exit code for CI/CD integration

Visual Verification

  • Includes full-page screenshot (tests/screenshots/editor-layout.png)
  • Captured during test run for visual regression testing

Other Improvements

Test Results

✓ Editor loaded successfully
✓ Form elements visible on the left
✓ Preview section visible on the right
✓ 1 test passed in 1.4s

Workflow Flow

test job (runs Playwright tests)
    ↓ (only if tests pass)
build_and_deploy_job (deploys to Azure)

Usage

Run tests locally with:

npm run test:playwright

🤖 Generated with Claude Code

ed-fbiberger and others added 2 commits December 12, 2025 11:07
- Add @playwright/test as dev dependency
- Create Playwright configuration with baseURL http://localhost:9091
- Add test:playwright npm script that builds, starts server, runs tests, and cleans up
- Create editor.spec.js test that verifies:
  - Editor loads successfully
  - Form elements visible on left (navigation, inputs)
  - Preview section visible on right
- Include full-page screenshot for visual verification
- Test runs in production mode using bin/datacontract-editor.js

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Add dedicated test job that runs Playwright tests before deployment
- Install Node.js 22 and dependencies with caching
- Install Playwright browsers (chromium only for efficiency)
- Run test:playwright npm script
- Upload test results and screenshots as artifacts (30 day retention)
- Make build_and_deploy_job depend on test job passing
- Add test-results/ and .preview-server.pid to .gitignore

This ensures no deployment happens unless all tests pass.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this screenshot be published to Git?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good point - visual regression testing should not be part of the test. will remove.

Copy link
Contributor

@jochenchrist jochenchrist left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants