Added script

backstop.config.js

@@ -1,14 +1,10 @@
-const { urls } = require('./urls');
+const { urls, baseUrl } = require('./urls');
 
-// Helper function to automatically generate scenarios from the URLs
+const createScenariosFromUrls = (urls, delay = 1000) => {
-const createScenariosFromUrls = (urlsObj, delay = 1000) => {
+  return Object.keys(urls).map((label) => ({
-  return Object.keys(urlsObj).map((label) => ({
     label,
-    url: urlsObj[label],
+    url: urls[label],
-    hideSelectors: [],
-    removeSelectors: [],
     selectors: ['document'],
-    selectorExpansion: true,
     misMatchThreshold: 0.1,
     requireSameDimensions: true,
     delay,
@@ -16,7 +12,7 @@ const createScenariosFromUrls = (urlsObj, delay = 1000) => {
 };
 
 module.exports = {
-  id: 'my_project_tests',
+  id: 'backstop_test',
   viewports: [
     {
       label: 'desktop',
@@ -24,7 +20,18 @@ module.exports = {
       height: 768,
     },
   ],
-  scenarios: createScenariosFromUrls(urls),
+  scenarios: [
+    ...createScenariosFromUrls(urls),
+    // example page with script
+    {
+      label: 'Get Started Page - Highlight Trial Mode',
+      url: `${baseUrl}/using-notify/get-started`,
+      selectors: ['document'],
+      misMatchThreshold: 0.1,
+      requireSameDimensions: true,
+      onBeforeScript: 'puppeteer/onBefore.js',
+    },
+  ],
   paths: {
     bitmaps_reference: 'backstop_data/bitmaps_reference',
     bitmaps_test: 'backstop_data/bitmaps_test',
@@ -38,5 +45,5 @@ module.exports = {
     timeout: 30000,
   },
   report: ['browser'],
-  debug: true,
+  debug: false,
 };

backstop_data/engine_scripts/puppeteer/onBefore.js

@@ -0,0 +1,18 @@
+module.exports = async (page, scenario) => {
+  await page.goto(scenario.url, { waitUntil: 'networkidle2' });
+
+  console.log('Page loaded.');
+
+  // Count the number of items in the side navigation and log their text
+  const navItems = await page.$$eval('nav ul li.usa-sidenav__item a', (items) =>
+    items.map((item) => item.textContent.trim())
+  );
+
+  console.log(`Found ${navItems.length} navigation items:`);
+  navItems.forEach((itemText, index) => {
+    console.log(`${index + 1}: ${itemText}`);
+  });
+
+  // Wait a moment for the logging to complete
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+};

urls.js

@@ -1,19 +1,19 @@
-const baseUrl = "http://localhost:6012";
+const baseUrl = 'http://localhost:6012';
 
 // List of routes with paths and labels
 const sublinks = [
-  { label: "Homepage", path: "/" },
+  { label: 'Homepage', path: '/' },
-  { label: "Accounts", path: "/accounts" },
+  { label: 'Accounts', path: '/accounts' },
-  { label: "Add Service", path: "/add-service" },
+  { label: 'Add Service', path: '/add-service' },
-  { label: "Get Started", path: "/using-notify/get-started" },
+  { label: 'Get Started', path: '/using-notify/get-started' },
-  { label: "Trial Mode", path: "/using-notify/trial-mode" },
+  { label: 'Trial Mode', path: '/using-notify/trial-mode' },
-  { label: "Pricing", path: "/using-notify/pricing" },
+  { label: 'Pricing', path: '/using-notify/pricing' },
-  { label: "Delivery Status", path: "/using-notify/delivery-status" },
+  { label: 'Delivery Status', path: '/using-notify/delivery-status' },
-  { label: "Guidance", path: "/using-notify/guidance" },
+  { label: 'Guidance', path: '/using-notify/guidance' },
-  { label: "Features", path: "/features" },
+  { label: 'Features', path: '/features' },
-  { label: "Roadmaps", path: "/features/roadmaps" },
+  { label: 'Roadmaps', path: '/features/roadmaps' },
-  { label: "Security", path: "/features/security" },
+  { label: 'Security', path: '/features/security' },
-  { label: "Support", path: "/support" },
+  { label: 'Support', path: '/support' },
   // Add more links here as needed
 ];
 
@@ -26,5 +26,6 @@ const constructUrls = (base, sublinks) =>
   }, {});
 
 module.exports = {
+  baseUrl,
   urls: constructUrls(baseUrl, sublinks),
 };