Cards (#462)

* first commit

* remove card files

* express milo card

* add timeout

---------

Co-authored-by: Haris Bijli <all46558@adobe.com>

configs/express.config.js

@@ -58,6 +58,14 @@ const config = {
         baseURL: envs['@express_live'],
       },
     },
+
+    {
+      name: 'express-live-webkit',
+      use: {
+        ...devices['Desktop Safari'],
+        baseURL: envs['@express_live'],
+      },
+    },
   ],
 };
 

features/express/cards.spec.js

@@ -0,0 +1,47 @@
+module.exports = {
+  FeatureName: 'cards block',
+  features: [
+    {
+      tcid: '0',
+      name: '@cards cards default',
+      path: '/drafts/nala/blocks/cards-default',
+      tags: '@cards @smoke @regression',
+    },
+    {
+      tcid: '1',
+      name: '@cards cards highlight',
+      path: '/drafts/nala/blocks/cards-highlight',
+      tags: '@cards @smoke @regression',
+    },
+    {
+      tcid: '2',
+      name: '@cards cards default one card',
+      path: '/drafts/nala/blocks/cards-default-1-card',
+      tags: '@cards @smoke @regression',
+    },
+    {
+      tcid: '3',
+      name: '@cards cards default 2 cards',
+      path: '/drafts/nala/blocks/cards-default-2-cards',
+      tags: '@cards @smoke @regression',
+    },
+    {
+      tcid: '4',
+      name: '@cards cards featured',
+      path: '/drafts/nala/blocks/cards-featured',
+      tags: '@cards @smoke @regression',
+    },
+    {
+      tcid: '5',
+      name: '@cards cards large',
+      path: '/drafts/nala/blocks/cards-large',
+      tags: '@cards @smoke @regression',
+    },
+    {
+      tcid: '6',
+      name: '@cards cards dark',
+      path: '/drafts/nala/blocks/cards-dark',
+      tags: '@cards @smoke @regression',
+    },
+  ],
+};

selectors/express/cards.page.js

@@ -0,0 +1,12 @@
+export default class cards {
+  constructor(page) {
+    this.page = page;
+    this.cards_highlight = page.locator('.cards.highlight');
+    this.cards = page.locator('.cards');
+    this.card = page.locator('.card');
+    this.cardTitle = page.locator('.card-content > h2');
+    this.cardImage = page.locator('.card-image');
+    this.link = page.locator('.card-content > p > a');
+    this.button = page.locator('.card-content > p.button-container > a');
+  }
+}

tests/express/cards.test.js

@@ -0,0 +1,275 @@
+/* eslint-disable no-plusplus */
+import { expect, test } from '@playwright/test';
+import { features } from '../../features/express/cards.spec.js';
+import Card from '../../selectors/express/cards.page.js';
+
+let card;
+const prodHomePage = 'https://www.adobe.com/express/';
+const edExHomePage = 'https://edex.adobe.com/express/';
+
+test.describe('Cards block testing', () => {
+  // before each test block
+  test.beforeEach(async ({ page }) => {
+    card = new Card(page);
+  });
+
+  test(`${features[0].name},${features[0].tags}`, async ({ page, baseURL }) => {
+    console.info(`${baseURL}${features[0].path}`);
+
+    await test.step('Go to Cards (default) block test page', async () => {
+      await page.goto(`${baseURL}${features[0].path}`);
+      await page.waitForLoadState('domcontentloaded');
+      await expect(page).toHaveURL(`${baseURL}${features[0].path}`);
+    });
+
+    await test.step('Verify block displayed ', async () => {
+      await page.waitForLoadState();
+      await expect(card.cards).toBeVisible();
+    });
+
+    await test.step('On click, goes to homepage ', async () => {
+      await page.waitForLoadState();
+
+      const totalButtons = await card.button.count();
+      expect(totalButtons).toBeTruthy();
+
+      for (let i = 0; i < totalButtons; i++) {
+        await page.waitForTimeout(2000);
+        const text = await card.button.nth(i).innerText();
+        console.log(text);
+        await card.button.nth(i).click();
+        await page.waitForLoadState();
+        await expect(page).toHaveURL(`${prodHomePage}`);
+        await page.goBack();
+        await page.waitForLoadState();
+      }
+    });
+  });
+
+  test(`${features[1].name},${features[1].tags}`, async ({ page, baseURL }) => {
+    console.info(`${baseURL}${features[1].path}`);
+
+    await test.step('Go to Cards (highlight) block test page', async () => {
+      await page.goto(`${baseURL}${features[1].path}`);
+      await page.waitForLoadState('domcontentloaded');
+      await expect(page).toHaveURL(`${baseURL}${features[1].path}`);
+    });
+
+    await test.step('Verify block displayed ', async () => {
+      await page.waitForLoadState();
+      await expect(card.cards_highlight).toBeVisible();
+    });
+
+    await test.step('On click, goes to homepage ', async () => {
+      await page.waitForLoadState();
+
+      const totalButtons = await card.button.count();
+      expect(totalButtons).toBeTruthy();
+
+      // buttons
+      for (let i = 0; i < totalButtons; i++) {
+        await page.waitForTimeout(2000);
+        const text = await card.button.nth(i).innerText();
+        console.log(text);
+        await card.button.nth(i).click();
+        await expect(page).toHaveURL(`${prodHomePage}`);
+        await page.goBack();
+        await page.waitForLoadState();
+      }
+
+      // links
+      await page.getByRole('link', { name: 'Getting Started Guide' }).click();
+      await page.waitForLoadState();
+      await expect(page).toHaveURL(`${prodHomePage}`);
+      await page.goBack();
+      await page.waitForLoadState();
+
+      await page.getByRole('link', { name: 'Deployment Guide' }).click();
+      await page.waitForLoadState();
+      await expect(page).toHaveURL(`${prodHomePage}`);
+      await page.goBack();
+      await page.waitForLoadState();
+    });
+  });
+
+  test(`${features[2].name},${features[2].tags}`, async ({ page, baseURL }) => {
+    console.info(`${baseURL}${features[2].path}`);
+
+    await test.step('Go to Cards (default - 1 card) block test page', async () => {
+      await page.goto(`${baseURL}${features[2].path}`);
+      await page.waitForLoadState('domcontentloaded');
+      await expect(page).toHaveURL(`${baseURL}${features[2].path}`);
+    });
+
+    await test.step('Verify block displayed ', async () => {
+      await page.waitForLoadState();
+      await expect(card.cards).toBeVisible();
+
+      const noOfCards = await card.card.count();
+      expect(noOfCards).toEqual(1);
+    });
+
+    await test.step('On click, goes to homepage ', async () => {
+      await page.waitForLoadState();
+
+      const totalButtons = await card.button.count();
+      expect(totalButtons).toEqual(2);
+
+      const text1 = await card.button.nth(0).innerText();
+      const text2 = await card.button.nth(1).innerText();
+      expect(text1).toBe('Teaching Resources');
+      expect(text2).toBe('Try now');
+
+      for (let i = 0; i < totalButtons; i++) {
+        await page.waitForTimeout(2000);
+        const [newTab] = await Promise.all([
+          page.waitForEvent('popup'),
+          await card.button.nth(i).click(),
+        ]);
+        await newTab.waitForLoadState();
+        await expect(newTab).toHaveURL(`${edExHomePage}`);
+        await newTab.close();
+      }
+    });
+  });
+
+  test(`${features[3].name},${features[3].tags}`, async ({ page, baseURL }) => {
+    console.info(`${baseURL}${features[3].path}`);
+
+    await test.step('Go to Cards (default - 2 cards) block test page', async () => {
+      await page.goto(`${baseURL}${features[3].path}`);
+      await page.waitForLoadState('domcontentloaded');
+      await expect(page).toHaveURL(`${baseURL}${features[3].path}`);
+    });
+
+    await test.step('Verify block displayed ', async () => {
+      await page.waitForLoadState();
+      await expect(card.cards).toBeVisible();
+
+      const noOfCards = await card.card.count();
+      expect(noOfCards).toEqual(2);
+    });
+
+    await test.step('Validate buttons and links, on click ', async () => {
+      await page.waitForLoadState();
+
+      const totalButtons = await card.button.count();
+      expect(totalButtons).toEqual(4);
+
+      for (let i = 0; i < totalButtons; i++) {
+        await page.waitForTimeout(2000);
+        const text = await card.button.nth(i).innerText();
+        console.log(text);
+        const [newTab] = await Promise.all([
+          page.waitForEvent('popup'),
+          await card.button.nth(i).click(),
+        ]);
+        await newTab.waitForLoadState();
+        await expect(newTab).toHaveURL(`${edExHomePage}`);
+        await newTab.close();
+      }
+    });
+  });
+
+  test(`${features[4].name},${features[4].tags}`, async ({ page, baseURL }) => {
+    console.info(`${baseURL}${features[4].path}`);
+
+    await test.step('Go to Cards (featured) block test page', async () => {
+      await page.goto(`${baseURL}${features[4].path}`);
+      await page.waitForLoadState('domcontentloaded');
+      await expect(page).toHaveURL(`${baseURL}${features[4].path}`);
+    });
+
+    await test.step('Verify block displayed ', async () => {
+      await page.waitForLoadState();
+      await expect(card.cards).toBeVisible();
+
+      const noOfCards = await card.card.count();
+      expect(noOfCards).toEqual(4);
+    });
+
+    await test.step('Validate buttons and links, on click ', async () => {
+      await page.waitForLoadState();
+
+      const totalButtons = await card.button.count();
+      expect(totalButtons).toEqual(8);
+
+      for (let i = 0; i < totalButtons; i++) {
+        await page.waitForTimeout(2000);
+        const [newTab] = await Promise.all([
+          page.waitForEvent('popup'),
+          await card.button.nth(i).click(),
+        ]);
+        await newTab.waitForLoadState();
+        await expect(newTab).toHaveURL(`${edExHomePage}`);
+        await newTab.close();
+      }
+    });
+  });
+
+  test(`${features[5].name},${features[5].tags}`, async ({ page, baseURL }) => {
+    console.info(`${baseURL}${features[5].path}`);
+
+    await test.step('Go to Cards (large) block test page', async () => {
+      await page.goto(`${baseURL}${features[5].path}`);
+      await page.waitForLoadState('domcontentloaded');
+      await expect(page).toHaveURL(`${baseURL}${features[5].path}`);
+    });
+
+    await test.step('Verify block displayed ', async () => {
+      await page.waitForLoadState();
+      await expect(card.cards).toBeVisible();
+    });
+
+    await test.step('Validate buttons and links, on click ', async () => {
+      await page.waitForLoadState();
+
+      const totalButtons = await card.button.count();
+      expect(totalButtons).toEqual(6);
+
+      for (let i = 0; i < totalButtons; i++) {
+        await page.waitForTimeout(2000);
+        const [newTab] = await Promise.all([
+          page.waitForEvent('popup'),
+          await card.button.nth(i).click(),
+        ]);
+        await newTab.waitForLoadState();
+        await expect(newTab).toHaveURL(`${edExHomePage}`);
+        await newTab.close();
+      }
+    });
+  });
+
+  test(`${features[6].name},${features[6].tags}`, async ({ page, baseURL }) => {
+    console.info(`${baseURL}${features[6].path}`);
+
+    await test.step('Got to Cards (dark) block test page', async () => {
+      await page.goto(`${baseURL}${features[6].path}`);
+      await page.waitForLoadState('domcontentloaded');
+      await expect(page).toHaveURL(`${baseURL}${features[6].path}`);
+    });
+
+    await test.step('Verify block displayed ', async () => {
+      await page.waitForLoadState();
+      await expect(card.cards).toBeVisible();
+    });
+
+    await test.step('Validate buttons and links, on click ', async () => {
+      await page.waitForLoadState();
+
+      const totalButtons = await card.button.count();
+      expect(totalButtons).toEqual(6);
+
+      for (let i = 0; i < totalButtons; i++) {
+        await page.waitForTimeout(2000);
+        const [newTab] = await Promise.all([
+          page.waitForEvent('popup'),
+          await card.button.nth(i).click(),
+        ]);
+        await newTab.waitForLoadState();
+        await expect(newTab).toHaveURL(`${edExHomePage}`);
+        await newTab.close();
+      }
+    });
+  });
+});