From 5e309e9630fbb7e8e1bec0e52a9d8c8e1241b594 Mon Sep 17 00:00:00 2001 From: kirupacommit <94790097+kirupacommit@users.noreply.github.com> Date: Thu, 22 Feb 2024 09:58:43 +0530 Subject: [PATCH] Helpx_Viewport Specific Container cases (#267) * Helpx_Before After Component Additional Test cases * Helpx_Code Block Component Test Cases * Helpx_Note Text Component testcases * Helpx_note component Changes * Helpx_Legal Notices Test cases and Xpaths fix based on Analytics Change * renamed legalNotices File * Helpx_Changed from networkidle to domcontentloaded * Helpx_Download Component test cases * Helpx_TOC on XF page test cases * Helpx_Viewport specifi Container Test cases * vps_changes on review comments --------- Co-authored-by: Kirupaagar R M Co-authored-by: Aaron Mauchley --- features/helpx/vps.spec.js | 53 +++++++ selectors/helpx/vps.page.js | 34 ++++ tests/helpx/vps.test.js | 301 ++++++++++++++++++++++++++++++++++++ 3 files changed, 388 insertions(+) create mode 100644 features/helpx/vps.spec.js create mode 100644 selectors/helpx/vps.page.js create mode 100644 tests/helpx/vps.test.js diff --git a/features/helpx/vps.spec.js b/features/helpx/vps.spec.js new file mode 100644 index 00000000..9249a4ec --- /dev/null +++ b/features/helpx/vps.spec.js @@ -0,0 +1,53 @@ +module.exports = { + name: 'viewportspecificcontainer', + features: [ + { + tcid: '0', + name: '@verifyVpsForHiddenDesktop', + path: '/automation/blocks/ViewPort_Specific_Container/viewport-specific-container-image-video.html', + tags: '@vps @regression @helpx', + }, + { + tcid: '1', + name: '@verifyVpsForHiddenTablet', + path: '/automation/blocks/ViewPort_Specific_Container/viewport-specific-container-image-video.html', + tags: '@vps @regression @helpx', + }, + { + tcid: '2', + name: '@verifyVpsForHiddenMobile', + path: '/automation/blocks/ViewPort_Specific_Container/viewport-specific-container-image-video.html', + tags: '@vps @regression @helpx', + }, + { + tcid: '3', + name: '@verifyVpsForHiddenDesktopandTablet', + path: '/automation/blocks/ViewPort_Specific_Container/viewport-specific-container-image-video.html', + tags: '@vps @regression @helpx', + }, + { + tcid: '4', + name: '@verifyVpsForHiddenDesktopandMobile', + path: '/automation/blocks/ViewPort_Specific_Container/viewport-specific-container-image-video.html', + tags: '@vps @regression @helpx', + }, + { + tcid: '5', + name: '@verifyVpsForHiddenTabletandMobile', + path: '/automation/blocks/ViewPort_Specific_Container/viewport-specific-container-image-video.html', + tags: '@vps @regression @helpx', + }, + { + tcid: '6', + name: '@verifyVpsForHiddenTabletandMobileandDesktop', + path: '/automation/blocks/ViewPort_Specific_Container/viewport-specific-container-image-video.html', + tags: '@vps @regression @helpx', + }, + { + tcid: '7', + name: '@verifyVpsForHiddenTabletandMobileandDesktopForVideo', + path: '/automation/blocks/ViewPort_Specific_Container/viewport-specific-container-image-video.html', + tags: '@vps @regression @helpx', + }, + ], +}; diff --git a/selectors/helpx/vps.page.js b/selectors/helpx/vps.page.js new file mode 100644 index 00000000..5a13e4a2 --- /dev/null +++ b/selectors/helpx/vps.page.js @@ -0,0 +1,34 @@ +export default class vps { + constructor(page) { + this.page = page; + + // vps Selectors for hidden desktop + this.vpsForHiddenDesktop = page.locator("//div[contains(@daa-lh,'b2|generic')][contains(@class,'generic hidden-desktop')]"); + this.vpsForImginHiddenDesktop = page.locator("//div[contains(@daa-lh,'b2|generic')][contains(@class,'generic hidden-desktop')]/descendant::picture/img"); + + // vps Selectors for hidden Tablet + this.vpsForHiddenTabletB4 = page.locator("//div[contains(@class, 'generic hidden-tablet')][contains(@daa-lh, 'b4|generic')]"); + this.vpsForImginHiddenTabletB4 = page.locator("//div[contains(@class, 'generic hidden-tablet')][contains(@daa-lh, 'b4|generic')]/div/div/picture/img"); + + // XPath for the div with class 'generic hidden-mobile' and attribute 'daa-lh' containing the value 'b6|generic' + this.vpsForHiddenMobileB6 = page.locator("//div[contains(@class, 'generic hidden-mobile')][contains(@daa-lh, 'b6|generic')]"); + this.vpsForImginHiddenMobileB6 = page.locator("//div[contains(@class, 'generic hidden-mobile')][contains(@daa-lh, 'b6|generic')]/div/div/picture/img"); + + this.vpsForHiddenDesktopTabletB8 = page.locator("//div[contains(@class, 'generic') and contains(@class, 'hidden-desktop') and contains(@class, 'hidden-tablet')][contains(@daa-lh, 'b8|generic')]"); + this.vpsForImginHiddenDesktopTabletB8 = page.locator("//div[contains(@class, 'generic') and contains(@class, 'hidden-desktop') and contains(@class, 'hidden-tablet')][contains(@daa-lh, 'b8|generic')]/div/div/picture/img"); + + this.vpsForHiddenDesktopMobileB10 = page.locator("//div[contains(@class, 'generic') and contains(@class, 'hidden-desktop') and contains(@class, 'hidden-mobile')][contains(@daa-lh, 'b10|generic')]"); + this.vpsForImginHiddenDesktopMobileB10 = page.locator("//div[contains(@class, 'generic') and contains(@class, 'hidden-desktop') and contains(@class, 'hidden-mobile')][contains(@daa-lh, 'b10|generic')]/div/div/picture/img"); + + this.vpsForHiddenTabletMobileB12 = page.locator("//div[contains(@class, 'generic') and contains(@class, 'hidden-tablet') and contains(@class, 'hidden-mobile')][contains(@daa-lh, 'b12|generic')]"); + this.vpsForImginHiddenTabletMobileB12 = page.locator("//div[contains(@class, 'generic') and contains(@class, 'hidden-tablet') and contains(@class, 'hidden-mobile')][contains(@daa-lh, 'b12|generic')]/div/div/picture/img"); + + + this.vpsForHiddenTabletMobileDesktopB14 = page.locator("//div[contains(@class, 'generic') and contains(@class, 'hidden-tablet') and contains(@class, 'hidden-mobile') and contains(@class, 'hidden-desktop')][contains(@daa-lh, 'b14|generic')]"); + this.vpsForImginHiddenTabletMobileDesktopB14 = page.locator("//div[contains(@class, 'generic') and contains(@class, 'hidden-tablet') and contains(@class, 'hidden-mobile') and contains(@class, 'hidden-desktop')][contains(@daa-lh, 'b14|generic')]/div/div/picture/img"); + + this.vpsForHiddenTabletMobileB26 = page.locator("//div[contains(@class, 'generic') and contains(@class, 'hidden-tablet') and contains(@class, 'hidden-mobile')][contains(@daa-lh, 'b26|generic')]"); + this.linkForHiddenTabletMobileB26 = page.locator("//div[contains(@class, 'generic') and contains(@class, 'hidden-tablet') and contains(@class, 'hidden-mobile')][contains(@daa-lh, 'b26|generic')]/div/a"); + + } +} diff --git a/tests/helpx/vps.test.js b/tests/helpx/vps.test.js new file mode 100644 index 00000000..9b11700a --- /dev/null +++ b/tests/helpx/vps.test.js @@ -0,0 +1,301 @@ +import { expect, test } from '@playwright/test'; +import { features } from '../../features/helpx/vps.spec.js'; +import vpsPage from '../../selectors/helpx/vps.page.js'; +import helpxconfig from '../../configs/helpx.config.js'; + +let vps; +let page; +let context; + +test.beforeAll(async ({ browser }) => { + //Verify TOKEN is set at environment variables + if (process.env.HLX_TKN !== undefined && process.env.HLX_TKN !== '') { + // The environment variable is set and has a non-blank value + console.log('Environment variable is set and not blank'); + } else { + // The environment variable is either not set or has a blank value + const errorMessage = + "Environment variable 'HLX_TKN' is not set or blank. Please ensure it is properly configured."; + throw new Error(errorMessage); + } + + const authToken = process.env.HLX_TKN; + context = await browser.newContext(); + // Set the authorization token in the header + await context.setExtraHTTPHeaders({ authorization: `token ${authToken}` }); + //create a new page + page = await context.newPage(); + vps = new vpsPage(page); + +}); + +const vpsTag = features[7].path; +test.describe('Verify hidden Tablet and mobile and Desktop for video in Viewport specific container', () => { + + test(`${features[7].name}, ${features[7].tags}`, async ({ baseURL }) => { + await page.goto(`${baseURL}${vpsTag}`); + await page.waitForLoadState('domcontentloaded'); + console.log(`[Test Page]: ${baseURL}${vpsTag}`); + await test.step('Navigate to Viewport specific container page', async () => { + await expect(page).toHaveURL(`${baseURL}${vpsTag}`); + }); + + + await page.waitForTimeout(1000); + await expect(vps.vpsForHiddenTabletMobileB26).not.toBeVisible(); + await expect(vps.linkForHiddenTabletMobileB26).not.toBeVisible(); + + // Set viewport size for mobile + await page.setViewportSize({ width: 375, height: 812 }); + await expect(vps.vpsForHiddenTabletMobileB26).not.toBeVisible(); + await expect(vps.linkForHiddenTabletMobileB26).not.toBeVisible(); + + await page.waitForTimeout(1000); + // Set viewport size for tablet + await page.setViewportSize({ width: 768, height: 1024 }); + await expect(vps.vpsForHiddenTabletMobileB26).not.toBeVisible(); + await expect(vps.linkForHiddenTabletMobileB26).not.toBeVisible(); + }); +}); + +test.describe('Verify hidden desktop in Viewport specific container', () => { + + test(`${features[0].name}, ${features[0].tags}`, async ({ baseURL }) => { + await page.goto(`${baseURL}${vpsTag}`); + await page.waitForLoadState('domcontentloaded'); + console.log(`[Test Page]: ${baseURL}${vpsTag}`); + await test.step('Navigate to Viewport specific container page', async () => { + await expect(page).toHaveURL(`${baseURL}${vpsTag}`); + }); + + await page.setViewportSize({ width: 1280, height: 800 }); + + //Hidden Desktop + await expect(vps.vpsForHiddenDesktop).not.toBeVisible(); + await expect(vps.vpsForHiddenDesktop).toHaveCSS("display","none") + await expect(vps.vpsForImginHiddenDesktop).not.toBeVisible(); + + await page.waitForTimeout(1000); + // Set viewport size for mobile + await page.setViewportSize({ width: 375, height: 812 }); + await expect(vps.vpsForHiddenDesktop).toBeVisible(); + + + await page.waitForTimeout(1000) + // Set viewport size for tablet + await page.setViewportSize({ width: 768, height: 1024 }); + await expect(vps.vpsForHiddenDesktop).toBeVisible(); + + + + }); +}); + +test.describe('Verify hidden tablet in Viewport specific container', () => { + + test(`${features[1].name}, ${features[1].tags}`, async ({ baseURL }) => { + await page.goto(`${baseURL}${vpsTag}`); + await page.waitForLoadState('domcontentloaded'); + console.log(`[Test Page]: ${baseURL}${vpsTag}`); + await test.step('Navigate to Viewport specific container page', async () => { + await expect(page).toHaveURL(`${baseURL}${vpsTag}`); + }); + + await page.waitForTimeout(1000); + await page.setViewportSize({ width: 1280, height: 800 }); + + //Hidden Desktop + await expect(vps.vpsForHiddenTabletB4).toBeVisible(); + await expect(vps.vpsForImginHiddenTabletB4).toBeVisible(); + + await page.waitForTimeout(1000); + await page.setViewportSize({ width: 375, height: 812 }); + await expect(vps.vpsForHiddenTabletB4).toBeVisible(); + + + await page.waitForTimeout(1000) + await page.setViewportSize({ width: 768, height: 1024 }); + await expect(vps.vpsForHiddenTabletB4).not.toBeVisible(); + await expect(vps.vpsForHiddenTabletB4).toHaveCSS("display","none") + + }); +}); + +test.describe('Verify hidden mobile in Viewport specific container', () => { + + test(`${features[2].name}, ${features[2].tags}`, async ({ baseURL }) => { + await page.goto(`${baseURL}${vpsTag}`); + await page.waitForLoadState('domcontentloaded'); + console.log(`[Test Page]: ${baseURL}${vpsTag}`); + await test.step('Navigate to Viewport specific container page', async () => { + await expect(page).toHaveURL(`${baseURL}${vpsTag}`); + }); + + await page.waitForTimeout(1000); + await page.setViewportSize({ width: 1280, height: 800 }); + + // Hidden Mobile Assertions + await expect(vps.vpsForHiddenMobileB6).toBeVisible(); + await expect(vps.vpsForImginHiddenMobileB6).toBeVisible(); + + await page.waitForTimeout(1000); + + // Set viewport size for mobile + await page.setViewportSize({ width: 375, height: 812 }); + await expect(vps.vpsForHiddenMobileB6).not.toBeVisible(); + await expect(vps.vpsForHiddenMobileB6).toHaveCSS("display","none"); + + + await page.waitForTimeout(1000); + + // Set viewport size for tablet + await page.setViewportSize({ width: 768, height: 1024 }); + await expect(vps.vpsForHiddenMobileB6).toBeVisible(); + }); +}); + +test.describe('Verify hidden desktop and tablet in Viewport specific container', () => { + + test(`${features[3].name}, ${features[3].tags}`, async ({ baseURL }) => { + await page.goto(`${baseURL}${vpsTag}`); + await page.waitForLoadState('domcontentloaded'); + console.log(`[Test Page]: ${baseURL}${vpsTag}`); + await test.step('Navigate to Viewport specific container page', async () => { + await expect(page).toHaveURL(`${baseURL}${vpsTag}`); + }); + + await page.setViewportSize({ width: 1280, height: 800 }); + await page.waitForTimeout(1000); + + // Hidden Desktop and Tablet Assertions + await expect(vps.vpsForHiddenDesktopTabletB8).not.toBeVisible(); + await expect(vps.vpsForImginHiddenDesktopTabletB8).not.toBeVisible(); + await expect(vps.vpsForHiddenDesktopTabletB8).toHaveCSS("display", "none"); + + + await page.waitForTimeout(1000); + + // Set viewport size for mobile + await page.setViewportSize({ width: 375, height: 812 }); + await expect(vps.vpsForHiddenDesktopTabletB8).toBeVisible(); + + await page.waitForTimeout(1000); + + // Set viewport size for tablet + await page.setViewportSize({ width: 768, height: 1024 }); + await expect(vps.vpsForHiddenDesktopTabletB8).not.toBeVisible(); + await expect(vps.vpsForHiddenDesktopTabletB8).toHaveCSS("display", "none"); + + + }); +}); + +test.describe('Verify hidden desktop and mobile in Viewport specific container', () => { + + test(`${features[4].name}, ${features[4].tags}`, async ({ baseURL }) => { + await page.goto(`${baseURL}${vpsTag}`); + await page.waitForLoadState('domcontentloaded'); + console.log(`[Test Page]: ${baseURL}${vpsTag}`); + await test.step('Navigate to Viewport specific container page', async () => { + await expect(page).toHaveURL(`${baseURL}${vpsTag}`); + }); + + await page.setViewportSize({ width: 1280, height: 800 }); + + await page.waitForTimeout(1000); + + // Hidden Desktop and Mobile Assertions + await expect(vps.vpsForHiddenDesktopMobileB10).not.toBeVisible(); + await expect(vps.vpsForImginHiddenDesktopMobileB10).not.toBeVisible(); + + + await page.waitForTimeout(1000); + + // Set viewport size for mobile + await page.setViewportSize({ width: 375, height: 812 }); + await expect(vps.vpsForHiddenDesktopMobileB10).not.toBeVisible(); + await expect(vps.vpsForHiddenDesktopMobileB10).toHaveCSS("display", "none"); + + await page.waitForTimeout(1000); + + // Set viewport size for tablet + await page.setViewportSize({ width: 768, height: 1024 }); + await expect(vps.vpsForHiddenDesktopMobileB10).toBeVisible(); + + }); +}); + +test.describe('Verify hidden Tablet and mobile in Viewport specific container', () => { + + test(`${features[5].name}, ${features[5].tags}`, async ({ baseURL }) => { + await page.goto(`${baseURL}${vpsTag}`); + await page.waitForLoadState('domcontentloaded'); + console.log(`[Test Page]: ${baseURL}${vpsTag}`); + await test.step('Navigate to Viewport specific container page', async () => { + await expect(page).toHaveURL(`${baseURL}${vpsTag}`); + }); + + await page.setViewportSize({ width: 1280, height: 800 }); + + await page.waitForTimeout(1000); + + // Hidden Tablet and Mobile Assertions + await expect(vps.vpsForHiddenTabletMobileB12).toBeVisible(); + await expect(vps.vpsForImginHiddenTabletMobileB12).toBeVisible(); + + await page.waitForTimeout(1000); + + // Set viewport size for mobile + await page.setViewportSize({ width: 375, height: 812 }); + await expect(vps.vpsForHiddenTabletMobileB12).not.toBeVisible(); + await expect(vps.vpsForHiddenTabletMobileB12).toHaveCSS("display", "none"); + + await page.waitForTimeout(1000); + + // Set viewport size for tablet + await page.setViewportSize({ width: 768, height: 1024 }); + await expect(vps.vpsForHiddenTabletMobileB12).not.toBeVisible(); + await expect(vps.vpsForHiddenTabletMobileB12).toHaveCSS("display", "none"); + + }); +}); + +test.describe('Verify hidden Tablet and mobile and Desktop in Viewport specific container', () => { + + test(`${features[6].name}, ${features[6].tags}`, async ({ baseURL }) => { + await page.goto(`${baseURL}${vpsTag}`); + await page.waitForLoadState('domcontentloaded'); + console.log(`[Test Page]: ${baseURL}${vpsTag}`); + await test.step('Navigate to Viewport specific container page', async () => { + await expect(page).toHaveURL(`${baseURL}${vpsTag}`); + }); + + + await page.setViewportSize({ width: 1280, height: 800 }); + + await page.waitForTimeout(1000); + + // Set viewport size for mobile + await page.setViewportSize({ width: 375, height: 812 }); + await expect(vps.vpsForHiddenTabletMobileDesktopB14).not.toBeVisible(); + await expect(vps.vpsForHiddenTabletMobileDesktopB14).toHaveCSS("display", "none"); + + await page.waitForTimeout(1000); + + // Set viewport size for tablet + await page.setViewportSize({ width: 768, height: 1024 }); + await expect(vps.vpsForHiddenTabletMobileDesktopB14).not.toBeVisible(); + await expect(vps.vpsForHiddenTabletMobileDesktopB14).toHaveCSS("display", "none"); + + await page.waitForTimeout(1000); + + // Set viewport size for desktop + await page.setViewportSize({ width: 1280, height: 800 }); + await expect(vps.vpsForHiddenTabletMobileDesktopB14).not.toBeVisible(); + await expect(vps.vpsForHiddenTabletMobileDesktopB14).toHaveCSS("display", "none"); + + + }); +}); + +