Add network logging and error visibility to Playwright CAD upload test

[Copilot]

• Fix response body consumption issue causing test to fail

Issue

The test was failing with "Protocol error (Network.getResponseBody): Request content was evicted from inspector cache" because the response body was being read twice:

1. First in the response event handler (line 18)
2. Then again when explicitly calling .text() on the response object (lines 48, 57)

Once a response body is consumed with .text(), it cannot be read again.

Solution

Removed the duplicate .text() calls since the response bodies for import_cad.php and process.php are already being logged in the response event handler. The test now:

• Logs response bodies once in the event handler
• Waits for the responses to complete
• Doesn't try to read the body again

This preserves all the debugging functionality while fixing the test failure.

Original prompt

Problem

The Playwright e2e test create_case.spec.js is failing with a timeout waiting for #cad_preview to become visible after uploading a STEP file. The test times out after 30 seconds without any information about what's happening during the CAD processing.

See failing test: https://github.com/seamplex/suncae/actions/runs/21357810068/job/61469308416

The test fails at line 16:

await expect(page.locator('#cad_preview')).toBeVisible({ timeout: 30000 });

But we have no visibility into:

• What the import_cad.php endpoint is returning
• What the process.php endpoint is returning
• Whether there are JavaScript errors in the browser
• Whether the AJAX calls are even being made
• What error messages (if any) are being displayed to the user

Solution

Improve the test with comprehensive debugging and network logging:

1. Add Network Request/Response Logging

Add event listeners to log all HTTP requests and responses, with special attention to the PHP endpoints involved in CAD processing:

• import_cad.php - handles the file upload
• process.php - processes the CAD and generates preview

2. Add Browser Console Logging

Capture console messages from the browser (including JavaScript errors, console.log output, etc.)

3. Add Explicit Waits for Network Responses

Instead of just waiting for the DOM element to appear, wait for the actual network responses and log their content. This will show us exactly what the PHP scripts are returning.

4. Improve Error Reporting

When the test fails:

• Check if the #cad_error div is visible and log its contents
• Take a screenshot for visual debugging
• Provide more context about what state the page is in

5. Add HAR Recording to Playwright Config

If a playwright.config.js exists, add HAR (HTTP Archive) recording to capture all network traffic for post-mortem analysis.

Implementation Details

Update tests/e2e/create_case.spec.js with:

// Add event listeners before navigating
page.on('request', request => {
    console.log('>>', request.method(), request.url());
});

page.on('response', async response => {
    const url = response.url();
    console.log('<<', response.status(), url);
    
    // Log responses from PHP scripts involved in CAD processing
    if (url.includes('import_cad.php') || url.includes('process.php')) {
        try {
            const body = await response.text();
            console.log('Response body:', body);
        } catch (e) {
            console.log('Could not read response body:', e.message);
        }
    }
});

page.on('console', msg => {
    console.log('BROWSER:', msg.type(), msg.text());
});

Wait for actual network responses instead of just DOM elements:

// Wait for the import response
const [importResponse] = await Promise.all([
    page.waitForResponse(response => 
        response.url().includes('import_cad.php') && response.status() === 200
    ),
    page.setInputFiles('#cad', sampleFile)
]);

console.log('import_cad.php response:', await importResponse.text());

// Wait for the process response
const processResponse = await page.waitForResponse(response => 
    response.url().includes('process.php') && response.status() === 200,
    { timeout: 30000 }
);

console.log('process.php response:', await processResponse.text());

Add better error handling:

try {
    await expect(page.locator('#cad_preview')).toBeVisible({ timeout: 30000 });
} catch (error) {
    // Check if there's an error message displayed
    const errorDiv = page.locator('#cad_error');
    if (await errorDiv.isVisible()) {
        const errorText = await errorDiv.textContent();
        console.log('CAD Error displayed:', errorText);
    }
    
    // Take a screenshot for debugging
    await page.screenshot({ path: 'test-results/upload-failure.png', fullPage: true });
    
    throw error;
}

If playwright.config.js or playwright.config.ts exists, add HAR recording:

use: {
    trace: 'on-first-retry',
    video: 'retain-on-failure',
    screenshot: 'only-on-failure',
    // Add HAR recording to capture all network traffic
    recordHar: { 
        path: 'test-results/network.har',
        content: 'attach' // Include response bodies
    },
}

Expected Outcome

After these changes, when the test fails, the GitHub Actions logs will show:

• Every HTTP request and response
• The exact JSON/text returned by import_cad.php and process.php
• Any JavaScript errors or console messages from the browser
• A screenshot of what the page looked like when it failed
• A HAR file with complete network traffic (if config is updated)

This will allow us to diagnose exactly why the CAD preview is not appearing.

Files to Modify

• tests/e2e/create_case.spec.js - main test file (required)
• playwright.config.js or playwright.config.ts - if it exists (optional enhancement)

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[gtheler]

@copilot Now the test that was passing is also failing.

[Copilot]

@copilot Now the test that was passing is also failing.

Fixed in 152316e. The test was failing because response bodies were being read twice - once in the event handler and again explicitly. Removed the duplicate .text() calls since the response bodies are already logged in the event handler.

[gtheler]

@copilot Fair enough. How do I trigger the actions workflow?

[Copilot]

@copilot Fair enough. How do I trigger the actions workflow?

GitHub Actions workflows can be triggered in several ways:

1. Push commits - The workflow runs automatically when you push commits to the PR branch
2. Re-run from GitHub UI - Go to the Actions tab, find the failed workflow run, and click "Re-run jobs"
3. Close and reopen the PR - This triggers workflows configured with pull_request events
4. Add an empty commit - Run git commit --allow-empty -m "trigger workflow" && git push

For this PR, the workflow should trigger automatically when the latest commit (152316e) is pushed. You can check the status in the Actions tab or on the PR checks.