Playwright JUnit Reporter + Xray Upload Beispiel

Minimales TypeScript Projekt das zeigt wie man Playwright Tests mit JUnit Reporter ausführt und die Ergebnisse zu Jira/Xray hochlädt.

📦 Installation

# Dependencies installieren
npm install

# Playwright Browser installieren
npx playwright install chromium

🔧 Konfiguration

1. Kopiere .env.example nach .env:

cp .env.example .env

2. Fülle die Werte in .env aus:
   • Jira URL und Credentials
   • Projekt Key
   • Cloud oder Server Version

🏗️ Projekt Struktur

playwright-junit-xray/
├── src/
│   └── upload-to-xray.ts      # Axios Upload Script für Xray
├── tests/
│   └── example.spec.ts        # Beispiel Playwright Tests
├── playwright.config.ts       # Playwright Konfiguration mit JUnit Reporter
├── tsconfig.json              # TypeScript Konfiguration
├── package.json               # NPM Dependencies und Scripts
├── .env.example               # Beispiel Umgebungsvariablen
└── README.md                  # Diese Datei

🎯 Verwendung

Option 1: Standard Playwright JUnit Reporter

# Tests mit eingebautem JUnit Reporter ausführen
npm run test:junit

# Erzeugt: test-results/junit-results.xml

Option 2: Xray-Enhanced JUnit Reporter

# Tests mit Xray-spezifischem Reporter ausführen
npm run test:xray

# Erzeugt: test-results/xray-junit-results.xml

Option 3: Tests ausführen und zu Xray hochladen

# Alles in einem Schritt
npm run test:and:upload

Nur Upload zu Xray

# Lädt vorhandene XML Datei hoch
npm run upload:xray

📝 Test Annotationen für Xray

Tests können mit speziellen Kommentaren versehen werden:

/**
 * @test_key: PROJ-123        // Verknüpft mit Xray Test
 * @test_summary: Login Test   // Beschreibung
 * @requirements: PROJ-100     // Verknüpft mit Story/Requirement
 */
test('Mein Test', async ({ page }) => {
  // Test Code
});

🔄 JUnit Reporter Konfiguration

Standard Reporter (playwright.config.ts)

reporter: [
  ['junit', { 
    outputFile: 'test-results/junit-results.xml',
    includeProjectInTestName: true
  }]
]

Xray-Enhanced Reporter

reporter: [
  ['@xray-app/playwright-junit-reporter', {
    outputFile: 'test-results/xray-junit-results.xml',
    embedAnnotationsAsProperties: true,
    textContentAnnotations: ['test_key', 'test_summary', 'requirements'],
    testPlanKey: process.env.TEST_PLAN_KEY,
    testEnvironments: 'Development'
  }]
]

📤 Upload zu Xray - Die wichtigsten Details

1. Authentifizierung

Jira Cloud:

// Basic Auth mit E-Mail und API Token
Authorization: Basic base64(email:apiToken)

Jira Server/DC:

// Option 1: Basic Auth
Authorization: Basic base64(username:password)

// Option 2: Personal Access Token
Authorization: Bearer PAT_TOKEN

2. API Endpoints

Cloud:

POST https://xray.cloud.getxray.app/api/v2/import/execution/junit

Server/DC:

POST https://your-jira.com/rest/raven/2.0/import/execution/junit

3. Upload Script Funktionsweise

// 1. XML Datei lesen
const xmlContent = fs.readFileSync('junit-results.xml');

// 2. FormData erstellen
const formData = new FormData();
formData.append('file', xmlContent);
formData.append('projectKey', 'PROJ');

// 3. Upload mit Axios
await axios.post(endpoint, formData, {
  headers: {
    'Authorization': 'Basic ...',
    ...formData.getHeaders()
  }
});

🐛 Debugging

Logs aktivieren

# Playwright Debug Mode
DEBUG=pw:api npm run test

# Axios Request Logging
DEBUG=axios npm run upload:xray

Häufige Fehler

1. 401 Unauthorized: Credentials überprüfen
2. 404 Not Found: URL oder Xray Installation prüfen
3. 400 Bad Request: XML Format oder Projekt Key prüfen

📚 Weitere Ressourcen

• Playwright Dokumentation
• Xray REST API
• Xray JUnit Integration

💡 Tipps

1. Test IDs: Verwende konsistente Test Keys (z.B. PROJ-123)
2. Umgebungen: Nutze TEST_ENVIRONMENT für verschiedene Stages
3. CI/CD: Setze Umgebungsvariablen in deiner Pipeline
4. Große Dateien: Nutze den Multipart Endpoint für XML > 10MB

🚀 CI/CD Integration

GitHub Actions Beispiel

- name: Run Tests
  run: npm run test:junit
  
- name: Upload to Xray
  env:
    JIRA_EMAIL: ${{ secrets.JIRA_EMAIL }}
    JIRA_API_TOKEN: ${{ secrets.JIRA_API_TOKEN }}
  run: npm run upload:xray

Jenkins Beispiel

stage('Test & Upload') {
  steps {
    sh 'npm run test:junit'
    withCredentials([string(credentialsId: 'jira-token', variable: 'JIRA_API_TOKEN')]) {
      sh 'npm run upload:xray'
    }
  }
}