diff --git a/configs/express.config.js b/configs/express.config.js index f2e51a22..7e4390f5 100644 --- a/configs/express.config.js +++ b/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'], + }, + }, + */ ], }; diff --git a/envs/envs.js b/envs/envs.js index 82153eb1..c0c5a790 100644 --- a/envs/envs.js +++ b/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', }; diff --git a/features/express/ckg-link-list.spec.js b/features/express/ckg-link-list.spec.js new file mode 100644 index 00000000..ec1acb1e --- /dev/null +++ b/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', + }, + ], +}; diff --git a/selectors/express/ckg-link-list.page.js b/selectors/express/ckg-link-list.page.js new file mode 100644 index 00000000..135f264e --- /dev/null +++ b/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'); + } +} diff --git a/tests/express/ckg-link-list.test.js b/tests/express/ckg-link-list.test.js new file mode 100644 index 00000000..26f03382 --- /dev/null +++ b/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}`); + } + }); + }); +});