PDF Screenshot Issue: Different Behavior Local vs Elastic Synthetics Server

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

  1. waitForNavigation: page.waitForNavigation() causes ERR_ABORTED; frame was detached
  2. Direct navigation: page.goto(pdfUrl) causes ERR_ABORTED
  3. New tab handling: context.waitForEvent('page') - new tab had empty URL ":"
  4. 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.