A simple script to attempt to identify the cause of differences between running puppeteer in headless and non-headless mode.

sanity_check.js

#!/usr/bin/env nodejs
const puppeteer = require('puppeteer');

function get_url(url, headless){
  return new Promise(async function(resolve, reject){
    const browser = await puppeteer.launch({headless: headless});
    const page = await browser.newPage();
    page.setViewport({'width':1920, 'height':1080});

    page.goto(url).then(async function(){
      await page.waitFor(".finished_expansion", {timeout: 30000});
      await page.waitFor("svg");
      let svg = await page.evaluate(function() {
        return document.querySelector("svg svg").outerHTML;
      });
      let font_styles = await page.evaluate(function() {
        return document.querySelector("#original_template style").outerHTML;
      });

      await browser.close();
      resolve(font_styles + svg)
    }).catch(async function(rej){
      await browser.close();
      reject(rej)
    })

  })
}

async function run_test(){
  // let url = "https://4395622217feda217b7a-52848b3a7e27ea93749e71b4383fc980.ssl.cf2.rackcdn.com/puppeteer_headless_test.html"
  let url = "http://files.amad.ca/puppeteer_headless_test.html"

  console.log('Running with head...')
  res1 = await get_url(url, false)
  console.log('Running with head. Done.')

  console.log('Running headless...')
  res2 = await get_url(url, true)
  console.log('Running headless. Done.')

  // There's a false positive here, where results differ because elements have randomly generated ids, which will never match.
  // id="gSjnc6552tay"
  res1 = res1.replace(/id="(.+?)"/g, "")
  // console.log(res1)
  res2 = res2.replace(/id="(.+?)"/g, "")
  // console.log(res2)

  if(res1 != res2){
    console.log('Test failed. Results differ!')
  }else{
    console.log('All tests pass ok.')
  }
}

run_test()