ckg-link-list block automation (#450)

* check in 1

* second commit

* remove commented code

* fix eslint

* update viewport

---------

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

configs/express.config.js

@@ -58,6 +58,50 @@ const config = {
         baseURL: envs['@express_live'],
       },
     },
+    /*
+    {
+      name: 'express-milo-main-chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        baseURL: envs['@express_milo'],
+        viewport: { width: 1680, height: 1024 },
+      },
+    },
+
+    {
+      name: 'express-milo-main-firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+        baseURL: envs['@express_milo'],
+        viewport: { width: 1680, height: 1024 },
+      },
+    },
+
+    {
+      name: 'express-milo-main-webkit',
+      use: {
+        ...devices['Desktop Safari'],
+        baseURL: envs['@express_milo'],
+        viewport: { width: 1680, height: 1024 },
+      },
+    },
+
+    {
+      name: 'express-milo-main-android',
+      use: {
+        ...devices['Pixel 5'],
+        baseURL: envs['@express_milo'],
+      },
+    },
+
+    {
+      name: 'express-milo-main-iphone',
+      use: {
+        ...devices['iPhone SE'],
+        baseURL: envs['@express_milo'],
+      },
+    },
+    */
   ],
 };
 

envs/envs.js

@@ -25,6 +25,7 @@ module.exports = {
   '@dme_stage': 'https://stage--dme-partners--adobecom.hlx.live',
   '@express_stage': 'https://stage--express--adobecom.hlx.live',
   '@express_live': 'https://main--express--adobecom.hlx.live',
+  '@express_milo': 'https://main--express-milo--adobecom.hlx.live',
   '@graybox_bacom': 'https://test.business-graybox.adobe.com',
   '@graybox_dc': 'https://test.graybox.adobe.com',
 };

features/express/ckg-link-list.spec.js

@@ -0,0 +1,11 @@
+module.exports = {
+  FeatureName: 'ckg-link-list block',
+  features: [
+    {
+      tcid: '0',
+      name: '@ckg-link-list',
+      path: '/express/colors/red',
+      tags: '@ckg-link-list @smoke @regression',
+    },
+  ],
+};

selectors/express/ckg-link-list.page.js

@@ -0,0 +1,16 @@
+export default class ckgLinkList {
+  constructor(page) {
+    this.page = page;
+    this.ckgLinkList = page.locator('.ckg-link-list');
+    this.pill = page.locator('.button-container.carousel-element');
+    this.pillLink = page.locator('.button-container.carousel-element > a');
+    this.carouselArrowLeftHidden = page.locator('.ckg-link-list .carousel-fader-left.arrow-hidden');
+    this.carouselArrowRightHidden = page.locator('.ckg-link-list .carousel-fader-right.arrow-hidden');
+    this.carouselArrowLeftShow = page.locator('.ckg-link-list .carousel-fader-left');
+    this.carouselArrowRightShow = page.locator('.ckg-link-list .carousel-fader-right');
+    this.carouselArrowLeft = page.locator('.ckg-link-list .carousel-fader-left');
+    this.carouselArrowRight = page.locator('.ckg-link-list .carousel-fader-right');
+    this.leftArrowBtn = page.locator('.ckg-link-list .button.carousel-arrow.carousel-arrow-left');
+    this.rightArrowBtn = page.locator('.ckg-link-list .button.carousel-arrow.carousel-arrow-right');
+  }
+}

tests/express/ckg-link-list.test.js

@@ -0,0 +1,79 @@
+/* eslint-disable no-plusplus */
+import { expect, test } from '@playwright/test';
+import { features } from '../../features/express/ckg-link-list.spec.js';
+import CkgLinkList from '../../selectors/express/ckg-link-list.page.js';
+
+let ckgLinkList;
+
+test.describe('Ckg Link List Block Test Suite', () => {
+  // before each test block
+  test.beforeEach(async ({ page }) => {
+    ckgLinkList = new CkgLinkList(page);
+  });
+
+  test(`${features[0].name},${features[0].tags}`, async ({ page, baseURL }) => {
+    console.info(`${baseURL}${features[0].path}`);
+
+    await test.step('Go to CLL block test page', async () => {
+      await page.goto(`${baseURL}${features[0].path}`);
+      await page.waitForLoadState('domcontentloaded');
+      await expect(page).toHaveURL(`${baseURL}${features[0].path}`);
+      await page.waitForTimeout(3000);
+    });
+
+    await test.step('Verify pills are displayed ', async () => {
+      await page.waitForLoadState();
+      await ckgLinkList.ckgLinkList.scrollIntoViewIfNeeded();
+      await expect(ckgLinkList.ckgLinkList).toBeVisible();
+      const totalPills = await ckgLinkList.pill.count();
+      expect(totalPills).toBeTruthy();
+
+      for (let i = 0; i < totalPills; i++) {
+        const text = await ckgLinkList.pill.nth(i).innerText();
+        expect(text.length).toBeTruthy();
+      }
+    });
+
+    await test.step('Verify arrow buttons', async () => {
+      await ckgLinkList.carouselArrowLeftHidden.waitFor();
+      await ckgLinkList.carouselArrowRightShow.waitFor();
+      await expect(ckgLinkList.carouselArrowRightShow).toHaveCount(1);
+      await expect(ckgLinkList.carouselArrowLeftHidden).toHaveCount(1);
+    });
+
+    await test.step('Verify scroll using buttons', async () => {
+      await page.waitForLoadState();
+      await ckgLinkList.ckgLinkList.scrollIntoViewIfNeeded();
+      const totalPills = await ckgLinkList.pill.count();
+      if (totalPills) {
+        await ckgLinkList.rightArrowBtn.click();
+        await page.waitForLoadState('domcontentloaded');
+        await page.waitForTimeout(2000);
+        await ckgLinkList.carouselArrowLeftShow.waitFor();
+        await ckgLinkList.carouselArrowRightShow.waitFor();
+        expect(ckgLinkList.carouselArrowLeftShow).toHaveCount(1);
+        expect(ckgLinkList.carouselArrowRightShow).toHaveCount(1);
+
+        await ckgLinkList.leftArrowBtn.click();
+        await ckgLinkList.carouselArrowLeftHidden.waitFor();
+        await ckgLinkList.carouselArrowRightShow.waitFor();
+        await expect(ckgLinkList.carouselArrowRightShow).toHaveCount(1);
+        await expect(ckgLinkList.carouselArrowLeftHidden).toHaveCount(1);
+      }
+    });
+
+    await test.step('Click pill and go to page ', async () => {
+      await ckgLinkList.ckgLinkList.scrollIntoViewIfNeeded();
+      await page.waitForLoadState();
+      const totalPills = await ckgLinkList.pill.count();
+
+      if (totalPills) {
+        const btnText = await ckgLinkList.pill.nth(0).innerText();
+        const pageColor = btnText.toLowerCase().replace(' ', '-');
+        await ckgLinkList.pill.nth(0).click();
+        await page.waitForLoadState('domcontentloaded');
+        await expect(page).toHaveURL(`${baseURL}/express/colors/${pageColor}`);
+      }
+    });
+  });
+});