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 6bd09d30..c0c5a790 100644 --- a/envs/envs.js +++ b/envs/envs.js @@ -23,8 +23,9 @@ module.exports = { '@helpx_live': 'https://helpx-internal.stage.adobe.com', '@dx_stage': 'https://stage--dx-partners--adobecom.hlx.live', '@dme_stage': 'https://stage--dme-partners--adobecom.hlx.live', - '@express_stage': 'https://stage--express--adobecom.hlx.live/express', - '@express_live': 'https://main--express--adobecom.hlx.live/express', + '@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/features/express/important-pages.spec.js b/features/express/important-pages.spec.js index 57c8b805..7e601118 100644 --- a/features/express/important-pages.spec.js +++ b/features/express/important-pages.spec.js @@ -5,69 +5,69 @@ module.exports = { tcid: '0', name: '@express-imp-pages', path: [ - '/', - '/create/story/instagram', - '/create/video/instagram/reel', - '/create/post/instagram', - '/create/video/tiktok', - '/create/story/facebook', - '/create/post/facebook', - '/create/video/youtube', - '/create/thumbnail/youtube', - '/create/banner/youtube', - '/create/meme', - '/create/poster', - '/create/brochure', - '/create/invitation', - '/create/menu', - '/create/card', - '/create/certificate', - '/create/resume', - '/create/invoice', - '/feature/image/qr-code-generator', - '/create/print/flyer', - '/create/print/poster', - '/create/print/card', - '/create/print/invitation', - '/create/print/business-card', - '/create/print/t-shirt', - '/print', - '/feature/content-scheduler', - '/create/business-card', - '/create/flyer', - '/create/logo', - '/create/advertisement', - '/create/photo-collage', - '/create/presentation', - '/create/profile-picture', - '/create', - '/feature/image/editor', - '/feature/video/editor', - '/templates', - '/feature/image/remove-background', - '/feature/image/resize', - '/feature/image/convert/png-to-jpg', - '/feature/image/convert/jpg-to-png', - '/feature/image/convert/jpg-to-svg', - '/feature/image/crop', - '/feature/video/convert/video-to-gif', - '/feature/video/crop', - '/feature/video/trim', - '/feature/video/resize', - '/feature/video/merge', - '/feature/video/convert/mp4', - '/feature/video/animate/audio', - '/feature/video/add-caption', - '/feature', - '/feature/video/remove-background', - '/business/teams', - '/business', - '/nonprofits', - '/entitled', - '/business#sales-contact-form-1', - '/#open-jarvis-chat', - '/learn/students', - '/pricing', + '/express/', + '/express/create/story/instagram', + '/express/create/video/instagram/reel', + '/express/create/post/instagram', + '/express/create/video/tiktok', + '/express/create/story/facebook', + '/express/create/post/facebook', + '/express/create/video/youtube', + '/express/create/thumbnail/youtube', + '/express/create/banner/youtube', + '/express/create/meme', + '/express/create/poster', + '/express/create/brochure', + '/express/create/invitation', + '/express/create/menu', + '/express/create/card', + '/express/create/certificate', + '/express/create/resume', + '/express/create/invoice', + '/express/feature/image/qr-code-generator', + '/express/create/print/flyer', + '/express/create/print/poster', + '/express/create/print/card', + '/express/create/print/invitation', + '/express/create/print/business-card', + '/express/create/print/t-shirt', + '/express/print', + '/express/feature/content-scheduler', + '/express/create/business-card', + '/express/create/flyer', + '/express/create/logo', + '/express/create/advertisement', + '/express/create/photo-collage', + '/express/create/presentation', + '/express/create/profile-picture', + '/express/create', + '/express/feature/image/editor', + '/express/feature/video/editor', + '/express/templates', + '/express/feature/image/remove-background', + '/express/feature/image/resize', + '/express/feature/image/convert/png-to-jpg', + '/express/feature/image/convert/jpg-to-png', + '/express/feature/image/convert/jpg-to-svg', + '/express/feature/image/crop', + '/express/feature/video/convert/video-to-gif', + '/express/feature/video/crop', + '/express/feature/video/trim', + '/express/feature/video/resize', + '/express/feature/video/merge', + '/express/feature/video/convert/mp4', + '/express/feature/video/animate/audio', + '/express/feature/video/add-caption', + '/express/feature', + '/express/feature/video/remove-background', + '/express/business/teams', + '/express/business', + '/express/nonprofits', + '/express/entitled', + '/express/business#sales-contact-form-1', + '/express/#open-jarvis-chat', + '/express/learn/students', + '/express/pricing', ], tags: '@regression @express', 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}`); + } + }); + }); +});