fix visual test failures

data/uar/quiz/ai/quiz-ai-basic.yml

@@ -3,7 +3,7 @@
 'How to edit PDF > A student or teacher discount': 'Acrobat Pro'
 'I need to create page design layouts for books, magazines, and brochures > Licenses and business features for teams': InDesign
 'create a simple flyer for a work event > Licenses and business features for teams': Adobe Express
-'How to upload video? > Neither apply': Adobe Express
+'How to upload video > Neither apply': Adobe Express
 'Create a composite of two or more images > Neither apply': We think you'll love
 'Combine images > Neither apply': We think you'll love
-'Photography + Video + PDFs > Take the time to control every detail > Get them sorted and organized > Create, edit, and share on social > Create and export PDFs to Office > A student or teacher discount': We think you'll love
+'Photography + Video > Take the time to control every detail > Get them sorted and organized > Create, edit, and share on social > A student or teacher discount': We think you'll love

features/visual/caas/cards.spec.js

@@ -4,29 +4,33 @@ module.exports = {
     {
       tcid: '0',
       name: '@onehalfcollection-visual',
-      stable: '/fragments/caas/test-pages/onehalfcollection',
-      beta: '/fragments/caas/test-pages/onehalfcollection?caasver=beta',
+      path: '/fragments/caas/test-pages/onehalfcollection',
+      stable: '@milo_live',
+      beta: '@milo_stage',
       tags: '@onehalfcollection-visual @visual @caas-screenshots',
     },
     {
       tcid: '1',
       name: '@threefourthscollection-visual',
-      stable: '/fragments/caas/test-pages/threefourthscollection',
-      beta: '/fragments/caas/test-pages/threefourthscollection?caasver=beta',
+      path: '/fragments/caas/test-pages/threefourthscollection',
+      stable: '@milo_live',
+      beta: '@milo_stage',
       tags: '@threefourthscollection-visual @visual @caas-screenshots',
     },
     {
       tcid: '2',
       name: '@halfheightcollection-visual',
-      stable: '/fragments/caas/test-pages/halfheightcollection',
-      beta: '/fragments/caas/test-pages/halfheightcollection?caasver=beta',
+      path: '/fragments/caas/test-pages/halfheightcollection',
+      stable: '@milo_live',
+      beta: '@milo_stage',
       tags: '@halfheightcollection-visual @visual @caas-screenshots',
     },
     {
       tcid: '3',
       name: '@fullwidthcollection-visual',
-      stable: '/fragments/caas/test-pages/textcardcollection',
-      beta: '/fragments/caas/test-pages/textcardcollection?caasver=beta',
+      path: '/fragments/caas/test-pages/textcardcollection',
+      stable: '@milo_live',
+      beta: '@milo_stage',
       tags: '@fullwidthcollection-visual @visual @caas-screenshots',
     },
   ],

features/visual/feds/feds.spec.js

@@ -5,13 +5,17 @@ module.exports = {
       tcid: '0',
       name: '@header-visual',
       path: '/libs/feds/drafts/qa/header/feds-header-page',
+      stable: '@milo_live',
+      beta: '@milo_stage',
       tags: '@header-visual @visual @feds-screenshots',
       browserParams: '?georouting=off',
     },
     {
       tcid: '1',
       name: '@footer-visual',
       path: '/libs/feds/drafts/qa/footer/feds-default-footer',
+      stable: '@milo_live',
+      beta: '@milo_stage',
       tags: '@footer-visual @visual @feds-screenshots',
       browserParams: '?georouting=off',
     },

features/visual/milo/milo.spec.js

@@ -5,12 +5,16 @@ module.exports = {
       tcid: '0',
       name: '@columns-visual',
       path: '/test/features/blocks/columns',
+      stable: '@milo_live',
+      beta: '@milo_stage',
       tags: '@columns-visual @visual @milo-screenshots',
     },
     {
       tcid: '1',
       name: '@marquee-visual',
       path: '/test/features/blocks/marquee',
+      stable: '@milo_live',
+      beta: '@milo_stage',
       tags: '@marquee-visual @visual @milo-screenshots',
     },
   ],

libs/screenshot/compare.mjs

@@ -82,7 +82,7 @@ async function main() {
 
       const baseImage = fs.readFileSync(entry.a);
       const currImage = fs.readFileSync(entry.b);
-      result.order = 1;
+      result.order = entry.order;
       result.a = entry.a;
       result.b = entry.b;
       result.urls = entry.urls;

libs/screenshot/take.js

@@ -65,7 +65,7 @@ async function takeOne(page, url, callback, folderPath, fileName, options = {})
  * @param {string} fileName - The file name of the screenshots
  * @returns {object} The screenshot results
  */
-async function takeTwo(page, urlStable, callbackStable, urlBeta, callbackBeta, folderPath, fileName) {
+async function takeTwo(page, urlStable, callbackStable, urlBeta, callbackBeta, folderPath, fileName, options = {}) {
   const urls = [];
   const result = {};
 
@@ -74,7 +74,12 @@ async function takeTwo(page, urlStable, callbackStable, urlBeta, callbackBeta, f
   urls.push(urlStable);
   if (typeof callbackStable === 'function') { await callbackStable(); }
   const nameStable = `${folderPath}/${fileName}-a.png`;
-  await page.screenshot({ path: nameStable, fullPage: true });
+  options.path = nameStable;
+  if (options.selector) {
+    await page.locator(options.selector).screenshot(options);
+  } else {
+    await page.screenshot(options);
+  }
   result.order = 1;
   result.a = nameStable;
 
@@ -83,7 +88,12 @@ async function takeTwo(page, urlStable, callbackStable, urlBeta, callbackBeta, f
   urls.push(urlBeta);
   if (typeof callbackBeta === 'function') { await callbackBeta(); }
   const nameBeta = `${folderPath}/${fileName}-b.png`;
-  await page.screenshot({ path: nameBeta, fullPage: true });
+  options.path = nameBeta;
+  if (options.selector) {
+    await page.locator(options.selector).screenshot(options);
+  } else {
+    await page.screenshot(options);
+  }
 
   result.b = nameBeta;
   result.urls = urls.join(' | ');

tests/visual/caas/cards.test.js

@@ -4,20 +4,26 @@ import { features } from '../../../features/visual/caas/cards.spec.js';
 import { takeTwo } from '../../../libs/screenshot/take.js';
 import { writeResultsToFile } from '../../../libs/screenshot/utils.js';
 
+const envs = require('../../../envs/envs.js');
+
 const folderPath = 'screenshots/caas';
 const results = {};
 
 test.describe('Milo Caas block visual comparison test suite', () => {
   // eslint-disable-next-line no-restricted-syntax
   for (const feature of features) {
     // eslint-disable-next-line no-loop-func
-    test(`${feature.name},${feature.tags}`, async ({ page, baseURL }, testInfo) => {
+    test(`${feature.name},${feature.tags}`, async ({ page }, testInfo) => {
       const name = `${feature.name}-${testInfo.project.name}`;
+      const stableURL = `${envs[feature.stable]}${feature.path}`;
+      console.info(stableURL);
+      const betaURL = `${envs[feature.beta]}${feature.path}`;
+      console.info(betaURL);
       const result = await takeTwo(
         page,
-        baseURL + feature.stable,
+        stableURL,
         async () => { await page.waitForTimeout(3000); },
-        baseURL + feature.beta,
+        betaURL,
         async () => { await page.waitForTimeout(3000); },
         folderPath,
         name,

tests/visual/feds/feds.test.js

@@ -1,10 +1,12 @@
 /* eslint-disable import/named */
 import { expect, test } from '@playwright/test';
 import { features } from '../../../features/visual/feds/feds.spec.js';
-import { takeOne } from '../../../libs/screenshot/take.js';
+import { takeTwo } from '../../../libs/screenshot/take.js';
 import { writeResultsToFile } from '../../../libs/screenshot/utils.js';
 import FedsHeader from '../../../selectors/feds/feds.header.page.js';
 
+const envs = require('../../../envs/envs.js');
+
 const folderPath = 'screenshots/feds';
 let Header;
 const results = {};
@@ -14,14 +16,29 @@ test.describe('Feds blocks visual comparison test suite', () => {
     Header = new FedsHeader(page);
   });
 
-  test(`${features[0].name}, ${features[0].tags}`, async ({ page, baseURL }, testInfo) => {
+  test(`${features[0].name}, ${features[0].tags}`, async ({ page }, testInfo) => {
     const name = `${features[0].name}-${testInfo.project.name}`;
-    const result = await takeOne(
+    const stableURL = `${envs[features[0].stable]}${features[0].path}${features[0].browserParams}`;
+    console.info(stableURL);
+    const betaURL = `${envs[features[0].beta]}${features[0].path}${features[0].browserParams}`;
+    console.info(betaURL);
+    const result = await takeTwo(
       page,
-      baseURL + features[0].path + features[0].browserParams,
+      stableURL,
+      async () => {
+        await page.waitForSelector('.feds-footer-privacyLink');
+        if (testInfo.project.name === 'ipad' || testInfo.project.name === 'iphone') {
+          await page.locator('.feds-toggle').click();
+        }
+        await Header.megaMenuToggle.click();
+        await expect(Header.megaMenuContainer).toBeVisible();
+      },
+      betaURL,
       async () => {
-        await page.waitForLoadState('domcontentloaded');
-        await Header.megaMenuToggle.waitFor({ state: 'visible', timeout: 5000 });
+        await page.waitForSelector('.feds-footer-privacyLink');
+        if (testInfo.project.name === 'ipad' || testInfo.project.name === 'iphone') {
+          await page.locator('.feds-toggle').click();
+        }
         await Header.megaMenuToggle.click();
         await expect(Header.megaMenuContainer).toBeVisible();
       },
@@ -33,11 +50,17 @@ test.describe('Feds blocks visual comparison test suite', () => {
     writeResultsToFile(folderPath, testInfo, results);
   });
 
-  test(`${features[1].name}, ${features[1].tags}`, async ({ page, baseURL }, testInfo) => {
+  test(`${features[1].name}, ${features[1].tags}`, async ({ page }, testInfo) => {
     const name = `${features[1].name}-${testInfo.project.name}`;
-    const result = await takeOne(
+    const stableURL = `${envs[features[1].stable]}${features[1].path}${features[1].browserParams}`;
+    console.info(stableURL);
+    const betaURL = `${envs[features[1].beta]}${features[1].path}${features[1].browserParams}`;
+    console.info(betaURL);
+    const result = await takeTwo(
       page,
-      baseURL + features[1].path + features[1].browserParams,
+      stableURL,
+      async () => { await page.waitForSelector('.feds-footer-privacyLink'); },
+      betaURL,
       async () => { await page.waitForSelector('.feds-footer-privacyLink'); },
       folderPath,
       name,

tests/visual/milo/milo.test.js

@@ -1,21 +1,29 @@
 /* eslint-disable import/named */
 import { test } from '@playwright/test';
 import { features } from '../../../features/visual/milo/milo.spec.js';
-import { takeOne } from '../../../libs/screenshot/take.js';
+import { takeTwo } from '../../../libs/screenshot/take.js';
 import { writeResultsToFile } from '../../../libs/screenshot/utils.js';
 
+const envs = require('../../../envs/envs.js');
+
 const folderPath = 'screenshots/milo';
 const results = {};
 
 test.describe('Milo blocks visual comparison test suite', () => {
   // eslint-disable-next-line no-restricted-syntax
   for (const feature of features) {
     // eslint-disable-next-line no-loop-func
-    test(`${feature.name},${feature.tags}`, async ({ page, baseURL }, testInfo) => {
+    test(`${feature.name},${feature.tags}`, async ({ page }, testInfo) => {
       const name = `${feature.name}-${testInfo.project.name}`;
-      const result = await takeOne(
+      const stableURL = `${envs[feature.stable]}${feature.path}`;
+      console.info(stableURL);
+      const betaURL = `${envs[feature.beta]}${feature.path}`;
+      console.info(betaURL);
+      const result = await takeTwo(
         page,
-        baseURL + feature.path,
+        stableURL,
+        async () => { await page.waitForSelector('.feds-footer-privacyLink'); },
+        betaURL,
         async () => { await page.waitForSelector('.feds-footer-privacyLink'); },
         folderPath,
         name,