CC Merchtable block automation (#248)

CC Merchtable block automation (JIra: MWPW-140978)

features/cc/merchtable.spec.js

@@ -0,0 +1,42 @@
+module.exports = {
+name: 'merchtable',
+  features: [
+    {
+      tcid: '0',
+      name: '@merchtable-3column-layout-block',
+      path: '/drafts/Automation-PW/merch-table?georouting=off',
+      tags: '@cc @cc-merchtable @cc-merchtableui',
+    },
+    {
+      tcid: '1',
+      name: '@merchtable-headrowitems',
+      path: '/drafts/Automation-PW/merch-table?georouting=off',
+      tags: '@cc @cc-merchtable @cc-merchtableheadrow',
+    },
+    {
+      tcid: '2',
+      name: '@merchtable-rowheadprices',
+      path: '/drafts/Automation-PW/merch-table?georouting=off',
+      tags: '@cc @cc-merchtable @cc-merchtableprices',
+      data: {
+        ccIndividualPrice: 'US$54.99/mo',
+        ccStudentPrice: 'US$9.99/mo',
+        ccTeamsprice: 'US$22.99/mo',
+        ccTeamsStrikeThrough: 'Regularly at US$54.99 per month'
+      },
+    },
+    {
+      tcid: '3',
+      name: '@merchtable-appdetails',
+      path: '/drafts/Automation-PW/merch-table?georouting=off',
+      tags: '@cc @cc-merchtable @cc-appdeatilsinrows',
+    },
+    {
+      tcid: '4',
+      name: '@merchtable-priceCTA',
+      path: '/drafts/Automation-PW/merch-table?georouting=off',
+      tags: '@cc @cc-merchtable @cc-PriceCtacommerce',
+      commerceurl : 'https://commerce.adobe.com/store/commitment?items%5B0%5D%5Bid%5D=632B3ADD940A7FBB7864AA5AD19B8D28&cli=adobe_com&co=IN&ctx=fp&lang=en',
+    },     
+  ],
+};

selectors/cc/merchtable.page.js

@@ -0,0 +1,30 @@
+export default class merchtable {
+  constructor(page) {
+    this.page = page;
+   // merch table page UI selectors to check 3 column layout
+   this.merchTableSection = page.locator('.section.table-merch-section');
+   this.firstColumn = this.merchTableSection.locator('.col.col-1.col-heading');
+   this.secondColumn = this.merchTableSection.locator('.col.col-2.col-heading.light');
+   this.thirdColumn = this.merchTableSection.locator('.col.col-3.col-heading.dark');
+   this.productMnemonics = page.locator('//img[@src="./media_139dede8055046fb80034053bbe235aaadc823b7a.png?width=750&format=png&optimize=medium"]').first();
+   //@merchtable-headrowitems
+   this.FirstRowHeading = page.locator('.row.row-1.row-heading');
+   this.firstColumnHeading = this.FirstRowHeading.locator('.col.col-1.col-heading');
+   this.secondColumnHeading = this.FirstRowHeading.locator('.col.col-2.col-heading.light');
+   this.thirdColumnHeading = this.FirstRowHeading.locator('.col.col-3.col-heading.dark');
+   this.fixedColumnheading = page.locator('//div[@class="section-head-title col col-1"]//strong[text()="Includes:"]');
+   //@merchtable-rowheadprices
+   this.ccIndividaulProductPrice = page.locator('.price.price-optical').nth(0);
+   this.ccStudentProductPrice = page.locator('.price.price-optical').nth(1);
+   this.ccTeamsProductPrice = page.locator('.price').nth(2);
+   this.freeTrialBtn = page.locator('.con-button.outline.button-l').first();
+   this.buyNowBtn = page.locator('.con-button.blue.button-l').first();
+   //@merchtable-appdetails
+   this.listOfAppsInRows1 = page.locator('.col-merch-content').nth(0);
+   this.appPhotoshop = this.listOfAppsInRows1.locator('//p[text()="Photoshop"]').nth(0);
+   this.listOfAppsInRows2 = page.locator('.col-merch-content').nth(4);
+   this.appFresco = this.listOfAppsInRows1.locator('//p[text()="fresco"]').nth(1);
+   this.listOfAppsInRows3 = page.locator('.col-merch-content').nth(8);
+   this.appPhotoshopExpress = this.listOfAppsInRows1.locator('//p[text()="Photoshop Express"]').nth(2);
+}
+};

tests/cc/merchtable.test.js

@@ -0,0 +1,97 @@
+import { expect, test } from '@playwright/test';
+import { features } from '../../features/cc/merchtable.spec.js';
+import Merchtable from '../../selectors/cc/merchtable.page.js';
+
+let merchtable;
+test.describe('verify merch table colum layout, headings, CSS styles, images rendering, price CTAs' , () =>  {
+  test.beforeEach(async ({ page }) => {
+  merchtable = new Merchtable(page);
+  });
+  // Test merch table block to be shown 3 column layout when placed on page
+  test(`${features[0].name},${features[0].tags}`, async ({ page, baseURL }) => {
+  console.info(`[Test Page]: ${baseURL}${features[0].path}`);
+  await test.step('merch table should have 3 column layout when authored', async () => {
+  await page.goto(`${baseURL}${features[0].path}`);
+  await page.waitForLoadState('domcontentloaded');
+  await expect(page).toHaveURL(`${baseURL}${features[0].path}`);
+  });
+  await test.step('step-2: 3 columns should showup with memonics', async () => {
+  await page.waitForLoadState();  
+  expect(await merchtable.merchTableSection).toBeTruthy();
+  expect(await merchtable.firstColumn).toBeTruthy();
+  expect(await merchtable.secondColumn).toBeTruthy();
+  expect(await merchtable.thirdColumn).toBeTruthy();
+  expect(await merchtable.productMnemonics).toBeTruthy();
+  });
+  });
+
+  // Test merch table first row in the 3 column has heading
+  test(`${features[1].name},${features[1].tags}`, async ({ page, baseURL }) => {
+  console.info(`[Test Page]: ${baseURL}${features[1].path}`);
+  await test.step('merch table first row in the 3 column has product headings', async () => {
+  await page.goto(`${baseURL}${features[1].path}`);
+  await page.waitForLoadState('domcontentloaded');
+  await expect(page).toHaveURL(`${baseURL}${features[1].path}`);
+  });
+  await test.step('step-2: 3 columns first row is head column', async () => {
+  await page.waitForLoadState();  
+  expect(await merchtable.fixedColumnheading).toBeTruthy();
+  expect(await merchtable.firstColumnHeading).toBeTruthy();
+  expect(await merchtable.secondColumnHeading).toBeTruthy();
+  expect(await merchtable.thirdColumnHeading).toBeTruthy();
+  });
+  });
+
+  // Test merch table column heading showing valid prodcut price with CTAs
+  test(`${features[2].name},${features[2].tags}`, async ({ page, baseURL }) => {
+  console.info(`[Test Page]: ${baseURL}${features[2].path}`);
+  const { data } = features[2];
+  await test.step('merch table column heading has valid product prices and CTAs', async () => {
+  await page.goto(`${baseURL}${features[2].path}`);
+  await page.waitForLoadState('domcontentloaded');
+  await expect(page).toHaveURL(`${baseURL}${features[2].path}`);
+  });
+  await test.step('step-2: product price checks with CTAs', async () => {
+  await page.waitForLoadState();  
+  await expect(merchtable.freeTrialBtn).toBeVisible();
+  await expect(merchtable.buyNowBtn).toBeVisible();
+  await expect(merchtable.ccIndividaulProductPrice).toContainText(data.ccIndividualPrice);
+  await expect(merchtable.ccStudentProductPrice).toContainText(data.ccStudentPrice);
+  await expect(merchtable.ccTeamsProductPrice).toContainText(data.ccTeamsprice);  
+  });
+  });
+
+  // Test merch table app details rows in each product column 
+  test(`${features[3].name},${features[3].tags}`, async ({ page, baseURL }) => {
+  console.info(`[Test Page]: ${baseURL}${features[3].path}`);
+  await test.step('merch table had product details in each column', async () => {
+  await page.goto(`${baseURL}${features[3].path}`);
+  await page.waitForLoadState('domcontentloaded');
+  await expect(page).toHaveURL(`${baseURL}${features[3].path}`);
+  });
+  await test.step('step-2: apps display in the colums as list', async () => {
+  await page.waitForLoadState();  
+  expect(await merchtable.appPhotoshop).toBeTruthy();
+  expect(await merchtable.appFresco).toBeTruthy();
+  expect(await merchtable.appPhotoshopExpress).toBeTruthy();
+  });
+  });
+
+  // Test buynow navigates to commerce page 
+  test(`${features[4].name},${features[4].tags}`, async ({ page, baseURL }) => {
+  console.info(`[Test Page]: ${baseURL}${features[4].path}`);
+  const url = features[4].commerceurl;
+  await test.step('merch table had product details in each column', async () => {
+  await page.goto(`${baseURL}${features[4].path}`);
+  await page.waitForLoadState('domcontentloaded');
+  await expect(page).toHaveURL(`${baseURL}${features[4].path}`);
+  });
+  await test.step('step-2: CTA go to commerce page', async () => {
+  await page.waitForLoadState();  
+  await expect(merchtable.buyNowBtn).toBeVisible();
+  await merchtable.buyNowBtn.click();
+  await page.waitForTimeout(1000);
+  await expect(page).toHaveURL(url);
+  });
+  });
+});