Add screenshots for UAR in CC (#238)

* 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

* add screenshot for milo main live vs uar-integration live

* add timestamp js for time stampe recording

* add screenshot diff for uar stable and beta

* move uar screenshots into visual compare folder

* add UI screenshots for DX Quiz

* build a function to get screenshots

* update locator

* udate uar to only run basic tests

* update according to feedback

* add screenshot for UAR in CC which will go live

---------

Co-authored-by: xiasun <[email protected]>
Co-authored-by: Aaron Mauchley <[email protected]>
Co-authored-by: xiasun <[email protected]>

data/cc/quiz/quiz-basic.yml

@@ -0,0 +1,17 @@
+---
+'Photography > Edit quickly and customize templates > A student or teacher discount': 'template single > Adobe Express'
+'PDFs > Edit quickly and customize templates > Licenses and business features for teams': 'template single with PDF > Acrobat Pro'
+'Video + Graphic design > Edit quickly and customize templates > Neither apply': 'template double > Adobe Express'
+'Illustration + PDFs > Edit quickly and customize templates > Neither apply': 'template double with PDF > Acrobat Pro'
+'Photography + Video + Graphic design > Edit quickly and customize templates > A student or teacher discount': 'template triple > Adobe Express'
+'Photography + Illustration + PDFs > Edit quickly and customize templates > Neither apply': 'template triple with PDF > Acrobat Pro'
+
+'Photography > Take the time to control every detail > Get them sorted and organized > A student or teacher discount': 'flagship single > Lightroom'
+'Video > Take the time to control every detail > Create, edit, and share on social > Licenses and business features for teams': 'flagship single > Premiere Pro'
+'Photography + Illustration > Take the time to control every detail > Correct color and lighting like a pro > Paint, draw, or doodle like on paper > A student or teacher discount': 'flagship double > Lightroom,Photoshop'
+'Graphic design + Illustration > Take the time to control every detail > Create layouts for magazines, books, or posters > Draw crisp lines and smooth curves > Licenses and business features for teams': 'flagship double > InDesign,Illustrator'
+'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': 'flagship triple > Premiere Pro,Lightroom,Acrobat'
+
+'3D/AR > Assemble, stage, and render 3D scenes > Neither apply': '3D single > Substance 3D Stager'
+'Photography + 3D/AR > Get them sorted and organized > Create 3D models with digital clay > A student or teacher discount': '3D doouble > Lightroom,Substance 3D Modeler'
+'Photography + Video + 3D/AR > Get them sorted and organized > Create, edit, and share on social > Texture 3D assets in real time > Licenses and business features for teams': '3D triple > Lightroom,Premiere Pro,Substance 3D Painter'

features/cc/quiz.screenshots.spec.js

@@ -0,0 +1,12 @@
+module.exports = {
+  name: 'Quiz Recommender Blocks',
+  features: [
+    {
+      tcid: '0',
+      name: '@quiz screenshots',
+      path: '/cc-shared/uar/plan-recommender/',
+      tags: '@cc @uar-quiz-screenshots @uar-quiz-static',
+      data: 'data/cc/quiz/quiz-basic.yml',
+    },
+  ],
+};

tests/cc/quiz.screenshots.test.js

@@ -0,0 +1,65 @@
+/* eslint-disable no-await-in-loop */
+/* eslint-disable no-loop-func */
+/* eslint-disable no-restricted-syntax */
+import { expect, test } from '@playwright/test';
+import Quiz from '../../selectors/uar/quiz.page.js';
+import QuizOldPage from '../../selectors/uar/quiz.old.page.js';
+
+const QuizSpec = require('../../features/cc/quiz.screenshots.spec.js');
+
+const { features } = QuizSpec;
+const { WebUtil } = require('../../libs/webutil.js');
+
+test.describe('Quiz flow test suite', () => {
+  // reset timeout because we use this to run all test data
+  test.setTimeout(10 * 60 * 1000);
+  for (const feature of features) {
+    test(
+      `${feature.name}, ${feature.tags}`,
+      async ({ page, baseURL }) => {
+        const quiz = new Quiz(page);
+        const quizOldPage = new QuizOldPage(page);
+        const url = `${baseURL}${feature.path}`;
+        console.info(url);
+
+        // load test data from static files
+        const testdata = await WebUtil.loadTestData(`${feature.data}`);
+
+        let keyNumber = 0;
+
+        for (let key of Object.keys(testdata)) {
+          console.log(key);
+          let oldProduct = '';
+          let newProduct = '';
+          keyNumber += 1;
+          await test.step(`Old: Select each answer on test page according to ${key}`, async () => {
+            await quizOldPage.clickEachAnswer('https://www.adobe.com/creativecloud/quiz-recommender.html', key, keyNumber, true);
+          });
+
+          await test.step('Old: Check results on test page', async () => {
+            oldProduct = await quizOldPage.checkResultPage(testdata[key], key, keyNumber, true);
+          });
+
+          if (key.includes('PDFs > Edit quickly')) {
+            // eslint-disable-next-line no-continue
+            continue;
+          }
+
+          if (key.includes('PDFs > Take the time to control')) {
+            key = key.replace('PDFs > Take the time to control every detail', 'PDFs');
+          }
+
+          await test.step(`New: Select each answer on test page according to ${key}`, async () => {
+            await quiz.clickEachAnswer(url, key, keyNumber, 'new', true);
+          });
+
+          await test.step('New: Check results on test page', async () => {
+            newProduct = await quiz.checkResultPage(testdata[key], key, keyNumber, 'new', true);
+          });
+
+          // expect.soft(newProduct).toContain(oldProduct);
+        }
+      },
+    );
+  }
+});