Added new ref images

backstop.config.js

@@ -23,6 +23,7 @@ module.exports = {
       height: 768,
     },
   ],
+  onReadyScript: 'puppeteer/onReady.js',
   scenarios: [
     ...createScenariosFromUrls(urls),
     {
@@ -55,6 +56,7 @@ module.exports = {
   engineOptions: {
     browser: 'chromium',
     timeout: 30000,
+    args: ['--no-sandbox', '--disable-setuid-sandbox', '--force-device-scale-factor=1'],
   },
   report: ['browser'],
   debug: false,

backstop_data/engine_scripts/puppeteer/onReady.js

@@ -0,0 +1,35 @@
+module.exports = async (page, scenario, vp) => {
+  console.log('SCENARIO > ' + scenario.label);
+
+  await page.evaluate(async () => {
+    const selectors = Array.from(document.images);
+    await Promise.all(selectors.map(img => {
+      if (img.complete) return;
+      return new Promise((resolve, reject) => {
+        img.addEventListener('load', resolve);
+        img.addEventListener('error', resolve);
+        setTimeout(resolve, 5000);
+      });
+    }));
+  });
+
+  await page.waitForSelector('.usa-banner__header-flag', {
+    visible: true,
+    timeout: 10000
+  });
+
+  await page.evaluate(() => {
+    const flagImg = document.querySelector('.usa-banner__header-flag');
+    if (flagImg && !flagImg.complete) {
+      return new Promise((resolve) => {
+        flagImg.onload = resolve;
+        flagImg.onerror = resolve;
+        setTimeout(resolve, 3000);
+      });
+    }
+  });
+
+  await new Promise(resolve => setTimeout(resolve, 500));
+
+  console.log('All images loaded and layout stable for: ' + scenario.label);
+};