feat: enhance Playwright tests with screenshot processing and report generation

.github/workflows/docker-build-and-push.yml

@@ -227,7 +227,7 @@ jobs:
           CI: true
           OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
           PAPERLESS_GPT_IMAGE: icereed/paperless-gpt:pr-${{ github.sha }}-amd64
-      - name: Upload test results
+      - name: Upload Playwright Report
         if: always()
         uses: actions/upload-artifact@v4
         with:
@@ -241,3 +241,32 @@ jobs:
           name: test-results
           path: web-app/test-results/
           retention-days: 30
+          
+      - name: Install ImageMagick
+        if: always()
+        run: sudo apt-get update && sudo apt-get install -y imagemagick
+        
+      - name: Process Screenshots
+        if: always()
+        run: |
+          mkdir -p processed-screenshots
+          cd web-app/test-results
+          for img in *.png; do
+            if [ -f "$img" ]; then
+              convert "$img" -resize 800x processed-"$img"
+              echo "Processing screenshot for $img"
+              BASE64_IMG=$(base64 -w 0 processed-"$img")
+              echo "### ${img%.*}" >> ../../screenshot-report.md
+              echo "![${img%.*}](data:image/png;base64,${BASE64_IMG})" >> ../../screenshot-report.md
+              echo "" >> ../../screenshot-report.md
+            fi
+          done
+          cd ../..
+          
+      - name: Create PR Comment
+        if: always() && github.event_name == 'pull_request'
+        uses: peter-evans/create-or-update-comment@v3
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          body-path: screenshot-report.md
+          edit-mode: replace

.gitignore

@@ -6,3 +6,4 @@ tmp/
 db/
 web-app/playwright-report/
 web-app/test-results/.last-run.json
+web-app/test-results

web-app/e2e/document-processing.spec.ts

@@ -16,8 +16,10 @@ test.afterAll(async () => {
   await testEnv.cleanup();
 });
 
-test.beforeEach(async () => {
-  page = await testEnv.browser.newPage();
+test.beforeEach(async ({ page: testPage }) => {
+  page = testPage;
+  await page.goto(`http://localhost:${testEnv.paperlessGpt.getMappedPort(PORTS.paperlessGpt)}`);
+  await page.screenshot({ path: 'test-results/initial-state.png' });
 });
 
 test.afterEach(async () => {
@@ -74,18 +76,21 @@ test('should process document and show changes in history', async () => {
   
   // Wait for document to appear in the list
   await page.waitForSelector('.document-card', { timeout: 1000 * 60 });
+  await page.screenshot({ path: 'test-results/document-loaded.png' });
   
   // Click the process button
   await page.click('button:has-text("Generate Suggestions")');
   
   // Wait for processing to complete
   await page.waitForSelector('.suggestions-review', { timeout: 30000 });
+  await page.screenshot({ path: 'test-results/suggestions-loaded.png' });
 
   // Apply the suggestions
   await page.click('button:has-text("Apply")');
   
   // Wait for success message
   await page.waitForSelector('.success-modal', { timeout: 10000 });
+  await page.screenshot({ path: 'test-results/suggestions-applied.png' });
 
   // Click "OK" on success modal
   await page.click('button:has-text("OK")');
@@ -95,6 +100,7 @@ test('should process document and show changes in history', async () => {
   
   // Wait for history page to load
   await page.waitForSelector('.modification-history', { timeout: 5000 });
+  await page.screenshot({ path: 'test-results/history-page.png' });
 
   // Verify at least one modification entry exists
   const modifications = await page.locator('.undo-card').count();

web-app/playwright.config.ts

@@ -17,9 +17,9 @@ export default defineConfig({
   workers: 1,
   reporter: 'html',
   use: {
+    screenshot: 'on',
     baseURL: process.env.PAPERLESS_GPT_URL || 'http://localhost:8080',
     trace: 'retain-on-failure',
-    screenshot: 'only-on-failure',
     video: 'retain-on-failure',
   },
   projects: [