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 <[email protected]> Co-authored-by: Aaron Mauchley <[email protected]>
adobecom · Feb 22, 2024 · 5e309e9 · 5e309e9
1 parent 93a5bc5
commit 5e309e9
Show file tree

Hide file tree

Showing 3 changed files with 388 additions and 0 deletions.
diff --git a/features/helpx/vps.spec.js 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
@@ -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
@@ -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");
+
+
+  });
+});
+
+