Add visual test for CAAS (#213)

* add test for quiz and result pages * add test for quiz and result pages * add test for quiz and result pages * add POC for analytics test * update analytics tests and envs * result envs * update analytics only on firefox * add dynamic tests * add dynamic test for quiz page * update quiz test * update test structure * add test for quiz and result pages * add POC for analytics test * update analytics tests and envs * result envs * update analytics only on firefox * add dynamic tests * add dynamic test for quiz page * update quiz test * update test structure * update uar tests to new format * update uar tests * move everything to uar folder * add dependency for js-yaml * update test according to latest comments * update test according to latest comments * update tests according to the latest comments * add uar config * add analytics for uar * update according to feedbacks * update tags * add @cc tag * update according to feedbacks * add dynamic tests for uar * update according to review comments * fix some typos * update according to review comments * merge console log info * add UI screenshots for UAR * move view point to test * update according to feedback * add analytics test for UAR * update validation and uar libs * update libs * update by feedback * update some config and tests * update some config and tests * update test content path to common path * update analytics tests * fix test failures caused by test code * fix test failures * fix test failures * add visual test for CAAS with two pages * update according to feedbacks * update report in config file --------- Co-authored-by: xiasun <[email protected]> Co-authored-by: Aaron Mauchley <[email protected]>
adobecom · Nov 28, 2023 · 8e01f49 · 8e01f49
1 parent 7cb650d
commit 8e01f49
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 4 deletions.
diff --git a/configs/visual.config.js b/configs/visual.config.js
@@ -6,8 +6,9 @@ const { devices } = require('@playwright/test');
  * @type {import('@playwright/test').PlaywrightTestConfig}
  */
 const config = {
-  testDir: './tests/milo', // TODO: Switch to ./tests once baseURL conditional checks have been made on individual tests
-  outputDir: './test-results',
+  testDir: '../visual-compare-tests', // TODO: Switch to ./tests once baseURL conditional checks have been made on individual tests
+  outputDir: '../test-results',
+  globalSetup: '../global.setup.js',
   /* Maximum time one test can run for. */
   timeout: 30 * 1000,
   /**
@@ -33,8 +34,8 @@ const config = {
   workers: process.env.CI ? 2 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: process.env.CI
-    ? [['github'], ['./utils/reporters/json-reporter.js'], ['./utils/reporters/api-reporter.js']]
-    : [['html', { outputFolder: 'test-html-results' }]],
+    ? [['github'], ['list'], ['../utils/reporters/base-reporter.js']]
+    : [['html', { outputFolder: 'test-html-results' }], ['list'], ['../utils/reporters/base-reporter.js']],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */

diff --git a/features/visual-compare/caas/cards.block.spec.js b/features/visual-compare/caas/cards.block.spec.js
@@ -0,0 +1,89 @@
+module.exports = {
+  name: 'Caas Visual Comparison',
+  features: [
+    {
+      tcid: '0',
+      name: '@caas-visual-onehalfcollection-desktop',
+      stable: '/fragments/caas/test-pages/onehalfcollection',
+      beta: '/fragments/caas/test-pages/onehalfcollection?caasver=beta',
+      tags: '@caas-visual-onehalfcollection-desktop, @caas-visual-desktop, @visual, @visual-smoke, @visual-regression',
+    },
+    {
+      tcid: '1',
+      name: '@caas-visual-threefourthscollection-desktop',
+      stable: '/fragments/caas/test-pages/threefourthscollection',
+      beta: '/fragments/caas/test-pages/threefourthscollection?caasver=beta',
+      tags: '@caas-visual-threefourthscollection-desktop, @caas-visual-desktop, @visual, @visual-smoke, @visual-regression',
+    },
+    {
+      tcid: '2',
+      name: '@caas-visual-halfheightcollection-desktop',
+      stable: '/fragments/caas/test-pages/halfheightcollection',
+      beta: '/fragments/caas/test-pages/halfheightcollection?caasver=beta',
+      tags: '@caas-visual-halfheightcollection-desktop, @caas-visual-desktop, @visual, @visual-smoke, @visual-regression',
+    },
+    {
+      tcid: '3',
+      name: '@caas-visual-fullwidthcollection-desktop',
+      stable: '/fragments/caas/test-pages/textcardcollection',
+      beta: '/fragments/caas/test-pages/textcardcollection?caasver=beta',
+      tags: '@caas-visual-fullwidthcollection-desktop, @caas-visual-desktop, @visual, @visual-smoke, @visual-regression',
+    },
+    {
+      tcid: '4',
+      name: '@caas-visual-onehalfcollection-tablet',
+      stable: '/fragments/caas/test-pages/onehalfcollection',
+      beta: '/fragments/caas/test-pages/onehalfcollection?caasver=beta',
+      tags: '@caas-visual-onehalfcollection-tablet, @caas-visual-tablet, @visual, @visual-smoke, @visual-regression',
+    },
+    {
+      tcid: '5',
+      name: '@caas-visual-threefourthscollection-tablet',
+      stable: '/fragments/caas/test-pages/threefourthscollection',
+      beta: '/fragments/caas/test-pages/threefourthscollection?caasver=beta',
+      tags: '@caas-visual-threefourthscollection-tablet, @caas-visual-tablet, @visual, @visual-smoke, @visual-regression',
+    },
+    {
+      tcid: '6',
+      name: '@caas-visual-halfheightcollection-tablet',
+      stable: '/fragments/caas/test-pages/halfheightcollection',
+      beta: '/fragments/caas/test-pages/halfheightcollection?caasver=beta',
+      tags: '@caas-visual-halfheightcollection-tablet, @caas-visual-tablet, @visual, @visual-smoke, @visual-regression',
+    },
+    {
+      tcid: '7',
+      name: '@caas-visual-fullwidthcollection-tablet',
+      stable: '/fragments/caas/test-pages/textcardcollection',
+      beta: '/fragments/caas/test-pages/textcardcollection?caasver=beta',
+      tags: '@caas-visual-fullwidthcollection-tablet, @caas-visual-tablet, @visual, @visual-smoke, @visual-regression',
+    },
+    {
+      tcid: '8',
+      name: '@caas-visual-onehalfcollection-phone',
+      stable: '/fragments/caas/test-pages/onehalfcollection',
+      beta: '/fragments/caas/test-pages/onehalfcollection?caasver=beta',
+      tags: '@caas-visual-onehalfcollection-phone, @caas-visual-phone, @visual, @visual-smoke, @visual-regression',
+    },
+    {
+      tcid: '9',
+      name: '@caas-visual-threefourthscollection-phone',
+      stable: '/fragments/caas/test-pages/threefourthscollection',
+      beta: '/fragments/caas/test-pages/threefourthscollection?caasver=beta',
+      tags: '@caas-visual-threefourthscollection-phone, @caas-visual-phone, @visual, @visual-smoke, @visual-regression',
+    },
+    {
+      tcid: '10',
+      name: '@caas-visual-halfheightcollection-phone',
+      stable: '/fragments/caas/test-pages/halfheightcollection',
+      beta: '/fragments/caas/test-pages/halfheightcollection?caasver=beta',
+      tags: '@caas-visual-halfheightcollection-phone, @caas-visual-phone, @visual, @visual-smoke, @visual-regression',
+    },
+    {
+      tcid: '11',
+      name: '@caas-visual-fullwidthcollection-phone',
+      stable: '/fragments/caas/test-pages/textcardcollection',
+      beta: '/fragments/caas/test-pages/textcardcollection?caasver=beta',
+      tags: '@caas-visual-fullwidthcollection-phone, @caas-visual-phone, @visual, @visual-smoke, @visual-regression',
+    },
+  ],
+};
diff --git a/libs/webutil.js b/libs/webutil.js
@@ -3,6 +3,7 @@
 /* eslint-disable max-len */
 // eslint-disable-next-line import/no-import-module-exports
 import { expect } from '@playwright/test';
+import { getComparator } from 'playwright-core/lib/utils';
 
 const fs = require('fs');
 // eslint-disable-next-line import/no-extraneous-dependencies
@@ -290,4 +291,27 @@ exports.WebUtil = class WebUtil {
     await this.page.setViewportSize({ width, height });
     await this.page.screenshot({ path: `${folderPath}/${fileName}`, fullPage: true });
   }
+
+  async takeScreenshotAndCompare(urlA, urlB, folderPath, fileName) {
+    console.info(`[Test Page]: ${urlA}`);
+    await this.page.goto(urlA);
+    await this.page.waitForTimeout(3000);
+    await this.page.screenshot({ path: `${folderPath}/${fileName}-a.png`, fullPage: true });
+    const baseImage = fs.readFileSync(`${folderPath}/${fileName}-a.png`);
+
+    console.info(`[Test Page]: ${urlB}`);
+    await this.page.goto(urlB);
+    await this.page.waitForTimeout(3000);
+    await this.page.waitForSelector('.feds-footer-privacyLink');
+    await this.page.screenshot({ path: `${folderPath}/${fileName}-b.png`, fullPage: true });
+    const currImage = fs.readFileSync(`${folderPath}/${fileName}-b.png`);
+
+    const comparator = getComparator('image/png');
+    const diffImage = comparator(baseImage, currImage);
+
+    if (diffImage) {
+      fs.writeFileSync(`${folderPath}/${fileName}-diff.png`, diffImage.diff);
+      console.info('Differences found');
+    }
+  }
 };
diff --git a/visual-compare-tests/caas/cards.vc.test.js b/visual-compare-tests/caas/cards.vc.test.js
@@ -0,0 +1,25 @@
+/* eslint-disable import/named */
+import { features } from '../../features/visual-compare/caas/cards.block.spec.js';
+import { WebUtil } from '../../libs/webutil.js';
+
+const { test } = require('@playwright/test');
+
+// Global declarations
+let webUtil;
+
+test.describe('Milo Caas block visual comparison test suite', () => {
+  // before each test block
+  test.beforeEach(async ({ page }) => {
+    webUtil = new WebUtil(page);
+  });
+
+  // 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 ({ baseURL }) => {
+      const folderPath = 'screenshots/caas';
+      // eslint-disable-next-line max-len
+      await webUtil.takeScreenshotAndCompare(baseURL + feature.stable, baseURL + feature.beta, folderPath, feature.name);
+    });
+  }
+});