Problem
I have a journey that needs to take a screenshot of a PDF document. The same code works perfectly locally but fails on the Elastic Synthetics server due to different tab/navigation behavior.
Environment
- Elastic Synthetics: Latest version
- Browser: Chromium (headless on server)
- Local testing: Using @elastic/synthetics package locally
- PDF URL structure:
api.example.com/v1/invoice/inline/document.pdf
Code Example
step('Open PDF invoice', async () => {
const invoiceLink = page.getByRole('link', { name: 'INVOICE-123' });
await invoiceLink.waitFor({ state: 'visible' });
// Remove target attribute to force same tab opening
await invoiceLink.evaluate(node => node.removeAttribute('target'));
// Click the invoice link
await invoiceLink.click();
await page.waitForTimeout(5000);
const currentUrl = page.url();
console.log('URL after click:', currentUrl);
expect(currentUrl).toContain('.pdf'); // Fails on server
});
Behavior Differences
Local Execution (works):
- PDF opens in same tab
- URL becomes the PDF document URL
- PDF is visible in browser when running with --no-headless
- Test passes
Elastic Synthetics Server (fails):
- Despite removeAttribute('target'), PDF does not open in same tab
- Remains on the original overview page
- Screenshot shows the invoice list instead of PDF
- Test fails with expect().toContain('.pdf')
Failed Attempts
- waitForNavigation: page.waitForNavigation() causes ERR_ABORTED; frame was detached
- Direct navigation: page.goto(pdfUrl) causes ERR_ABORTED
- New tab handling: context.waitForEvent('page') - new tab had empty URL
":"
- Different wait strategies: load, networkidle, etc. - same issues
Question
How can I reliably capture PDF screenshots in Elastic Synthetics when PDFs open in new tabs on the server but same tab locally?
Is there a recommended approach for PDF monitoring in Elastic Synthetics? The goal is to verify that invoices are accessible and take a screenshot for monitoring purposes.