Helpx_Before After Component Additional Test cases (#247)

Co-authored-by: Kirupaagar R M <[email protected]>
adobecom · Jan 23, 2024 · f74f7fb · f74f7fb
1 parent d3dd709
commit f74f7fb
Show file tree

Hide file tree

Showing 3 changed files with 317 additions and 0 deletions.
diff --git a/features/helpx/beforeAfter.spec.js b/features/helpx/beforeAfter.spec.js
@@ -7,5 +7,53 @@ module.exports = {
       path: '/automation/blocks/before-after-component',
       tags: '@beforeafter @regression @helpx',
     },
+    {
+      tcid: '1',
+      name: '@beforeAfterTestPageVerticalMovement',
+      path: '/automation/blocks/Before_and_After_Component/before-after-component.html',
+      tags: '@beforeafter @regression @helpx',
+    },
+    {
+      tcid: '2',
+      name: '@beforeAfterTestPageHorizontalMovement',
+      path: '/automation/blocks/Before_and_After_Component/before-after-component.html',
+      tags: '@beforeafter @regression @helpx',
+    },
+    {
+      tcid: '3',
+      name: '@beforeAfterTestPageJpgPNGMovement',
+      path: '/automation/blocks/Before_and_After_Component/before-after-component.html',
+      tags: '@beforeafter @regression @helpx',
+    },
+    {
+      tcid: '4',
+      name: '@beforeAfterTestPageCapitalHeadingMovement',
+      path: '/automation/blocks/Before_and_After_Component/before-after-component.html',
+      tags: '@beforeafter @regression @helpx',
+    },
+    {
+      tcid: '5',
+      name: '@VerifyGivingHorizontalnexttobeforeaftercomponentheading',
+      path: '/automation/blocks/Before_and_After_Component/before-after-component.html',
+      tags: '@beforeafter @regression @helpx',
+    },
+    {
+      tcid: '6',
+      name: '@VerifyBeforeAfterComponentFromXFForlefttoRight',
+      path: '/automation/blocks/Before_and_After_Component/before-after-component.html',
+      tags: '@beforeafter @regression @helpx',
+    },
+    {
+      tcid: '7',
+      name: '@VerifyBeforeAfterComponentFromXFForUptoDown',
+      path: '/automation/blocks/Before_and_After_Component/before-after-component.html',
+      tags: '@beforeafter @regression @helpx',
+    },
+    {
+      tcid: '8',
+      name: '@VerifyBeforeAfterComponentFailedforIncorrectAuthoring',
+      path: '/automation/blocks/Before_and_After_Component/before-after-component.html',
+      tags: '@beforeafter @regression @helpx',
+    },
   ],
 };
diff --git a/selectors/helpx/beforeafter.page.js b/selectors/helpx/beforeafter.page.js
@@ -6,5 +6,48 @@ export default class BeforeAfter {
     this.beforeAftr = page.locator("(//div[@class='before-after-slider vertical'])[1]");
     this.beforeafterVertical = page.locator(['@beforeafter-vertical']);
     this.beforeafterVerticalmoved = page.locator(['@beforeafter-vertical-moved']);
+
+
+    //Before After Page-Slider Up and Down
+    this.sliderUp = page.locator("(//div[@class='slider-thumb-container'])[1]");
+    this.imageBefore = page.locator("//div[contains(@class,'image before')][1]").first();
+    this.sliderThumbContainer = page.locator("(//div[@class='slider-thumb-container'])[1]").first();
+
+     //Before After Page-Slider left and right
+     this.slidereleft = page.locator("(//div[@class='slider-thumb-container'])[2]");
+     this.imageBeforeLeft = page.locator("(//div[contains(@class,'image before')])[2]").first();
+     this.sliderThumbContainerLeft = page.locator("(//div[@class='slider-thumb-container'])[2]").first();
+
+      //Before After Page-Slider jpg and PNG
+      this.sliderbw = page.locator("(//div[@class='slider-thumb-container'])[3]");
+      this.imageBeforebw= page.locator("(//div[contains(@class,'image before')])[3]").first();
+      this.sliderThumbContainerbw = page.locator("(//div[@class='slider-thumb-container'])[3]").first();
+
+      //Before After Page-Slider capital Heading
+      this.slidercapitalHeading = page.locator("(//div[@class='slider-thumb-container'])[4]");
+      this.imageBeforecapitalHeading= page.locator("(//div[contains(@class,'image before')])[4]").first();
+      this.sliderThumbContainercapitalHeading = page.locator("(//div[@class='slider-thumb-container'])[4]").first();
+
+      //Before After Page-Slider Giving Horizontal before image
+      this.sliderHorizontalbeforeHeading = page.locator("(//div[@class='slider-thumb-container'])[5]");
+      this.imageHorizontalbeforeHeading= page.locator("(//div[contains(@class,'image before')])[5]").first();
+      this.sliderThumbContainerHorizontalbeforeHeading = page.locator("(//div[@class='slider-thumb-container'])[5]").first();
+
+      //Before After Page-Slider for xf left to right
+      this.sliderXFfromlefttoright = page.locator("(//div[@class='slider-thumb-container'])[6]");
+      this.imageXFfromlefttoright= page.locator("(//div[contains(@class,'image before')])[6]").first();
+      this.sliderThumbContainerXFfromlefttoright = page.locator("(//div[@class='slider-thumb-container'])[6]").first();
+
+
+      //Before After Page-Slider for xf up to down
+      this.sliderXFfromUptoDown = page.locator("(//div[@class='slider-thumb-container'])[7]");
+      this.imageXFfromUptoDown= page.locator("(//div[contains(@class,'image before')])[7]").first();
+      this.sliderThumbContainerXFfromUptoDown = page.locator("(//div[@class='slider-thumb-container'])[7]").first();
+
+      //Before After Page-Slider for xf up to down
+      this.sliderFailedForIncorrectAuthoring = page.locator("//div[contains(@class,'bfore-after-slider')][contains(@data-reason,'Failed loading bfore-after-slider block.')]");
+
+
+
   }
 }
diff --git a/tests/helpx/beforeafter.test.js b/tests/helpx/beforeafter.test.js
@@ -3,9 +3,40 @@ import { features } from '../../features/helpx/beforeAfter.spec.js';
 import BeforeAfter from '../../selectors/helpx/beforeafter.page.js';
 import config from '../../configs/helpx.config.js';
 
+
 let beforeAftr;
 let page;
 
+//Move the element
+async function dragElementByDistance(page, elementSelector, distanceToDragX, distanceToDragY, waitTime,scrollHeight) {
+
+  const scrollToHeight = scrollHeight;
+
+  await page.evaluate((scrollToHeight) => {
+      window.scrollTo(0, scrollToHeight);
+  }, scrollToHeight);
+
+
+  const elementToDrag = await elementSelector;
+
+  if (!elementToDrag) {
+    console.error(`Element with selector '${elementSelector}' not found.`);
+    return;
+  }
+
+  const elementBoundingBox = await elementToDrag.boundingBox();
+  const targetX = elementBoundingBox.x + distanceToDragX;
+  const targetY = elementBoundingBox.y + distanceToDragY;
+
+  await page.mouse.move(elementBoundingBox.x, elementBoundingBox.y);
+  await page.mouse.down();
+  await page.mouse.move(targetX, targetY);
+  await page.mouse.up();
+
+  await page.waitForTimeout(waitTime);
+}
+
+
 test.beforeAll(async ({ browser }) => {
   if (process.env.HLX_TKN !== undefined && process.env.HLX_TKN !== '') {
     // The environment variable is set and has a non-blank value
@@ -47,3 +78,198 @@ test.describe('BeforeAfter Sanity test suite', () => {
     });
   });
 });
+
+async function gotoBeforeAfterPage(tag){
+  await page.goto(`${config.use?.baseURL}${tag}`);
+  await page.waitForLoadState('networkidle');
+  console.log(`[Test Page]: ${config.use?.baseURL}${tag}`);
+}
+
+test.describe('Verify Before After Component For Vertical Movement', () => {
+  // Go To Page
+  test(`${features[1].name}, ${features[1].tags}`, async () => {
+    console.log("features[1].name" + features[1].name);
+    const BeforeAfterTag = features[1].path;
+    await gotoBeforeAfterPage(BeforeAfterTag)
+
+      //Drag the slider-->up
+      const elementToDrag = beforeAftr.sliderUp;
+      await dragElementByDistance(page, elementToDrag, 100, -180, 2000);
+
+       //verify the Image Properties
+      await expect(beforeAftr.imageBefore).toHaveAttribute("style", "clip-path: inset(0px 0px 100%);");
+      await expect(beforeAftr.sliderThumbContainer).toHaveAttribute("style","top: 0%;")
+
+      //Drag the slider-->Down
+     await dragElementByDistance(page, elementToDrag, 100, 350, 2000);
+     await expect(beforeAftr.imageBefore).toHaveAttribute("style", "clip-path: inset(0px 0px 0%);");
+     await expect(beforeAftr.sliderThumbContainer).toHaveAttribute("style","top: 100%;")
+
+  });
+});
+
+
+
+test.describe('Verify Before After Component For Horizontal Movement', () => {
+  // Go To Page
+  test(`${features[2].name}, ${features[2].tags}`, async () => {
+    console.log("features[2].name" + features[2].name);
+    const BeforeAfterTag = features[2].path;
+    await gotoBeforeAfterPage(BeforeAfterTag)
+
+
+      const elementToDrag = beforeAftr.slidereleft;
+
+      //Drag the slider-->right
+     await dragElementByDistance(page, elementToDrag, -350, 50, 2000);
+     await expect(beforeAftr.imageBeforeLeft).toHaveAttribute("style", "clip-path: inset(0px 100% 0px 0px);");
+     await expect(beforeAftr.sliderThumbContainerLeft).toHaveAttribute("style","left: 0%;")
+
+      //Drag the slider-->left
+      await dragElementByDistance(page, elementToDrag, 750, 50, 2000);
+      await expect(beforeAftr.imageBeforeLeft).toHaveAttribute("style", "clip-path: inset(0px 0% 0px 0px);");
+      await expect(beforeAftr.sliderThumbContainerLeft).toHaveAttribute("style","left: 100%;")
+
+
+
+  });
+});
+
+test.describe('Verify Before After Component For jpg and png Movement', () => {
+  // Go To Page
+  test(`${features[3].name}, ${features[3].tags}`, async () => {
+    console.log("features[3].name" + features[3].name);
+    const BeforeAfterTag = features[3].path;
+    await gotoBeforeAfterPage(BeforeAfterTag)
+
+
+      const elementToDrag = beforeAftr.sliderbw;
+
+      //Drag the slider-->right
+     await dragElementByDistance(page, elementToDrag, -350, 50, 2000,700);
+     await expect(beforeAftr.imageBeforebw).toHaveAttribute("style", "clip-path: inset(0px 100% 0px 0px);");
+     await expect(beforeAftr.sliderThumbContainerbw).toHaveAttribute("style","left: 0%;")
+
+      //Drag the slider-->left
+      await dragElementByDistance(page, elementToDrag, 750, 50, 2000,700);
+      await expect(beforeAftr.imageBeforebw).toHaveAttribute("style", "clip-path: inset(0px 0% 0px 0px);");
+      await expect(beforeAftr.sliderThumbContainerbw).toHaveAttribute("style","left: 100%;")
+
+
+
+  });
+});
+
+test.describe('Verify Before After Component For Capital Letter Before After Component', () => {
+  // Go To Page
+  test(`${features[4].name}, ${features[4].tags}`, async () => {
+    console.log("features[4].name" + features[4].name);
+    const BeforeAfterTag = features[4].path;
+    await gotoBeforeAfterPage(BeforeAfterTag)
+
+
+      const elementToDrag = beforeAftr.slidercapitalHeading;
+
+      //Drag the slider-->right
+     await dragElementByDistance(page, elementToDrag, -350, 50, 2000,1200);
+     await expect(beforeAftr.imageBeforecapitalHeading).toHaveAttribute("style", "clip-path: inset(0px 100% 0px 0px);");
+     await expect(beforeAftr.sliderThumbContainercapitalHeading).toHaveAttribute("style","left: 0%;")
+
+      //Drag the slider-->left
+      await dragElementByDistance(page, elementToDrag, 750, 50, 2000,1200);
+      await expect(beforeAftr.imageBeforecapitalHeading).toHaveAttribute("style", "clip-path: inset(0px 0% 0px 0px);");
+      await expect(beforeAftr.sliderThumbContainercapitalHeading).toHaveAttribute("style","left: 100%;")
+
+
+
+  });
+});
+
+test.describe('Verify Before After Component For Horizontal Before After Component', () => {
+  // Go To Page
+  test(`${features[5].name}, ${features[5].tags}`, async () => {
+    console.log("features[5].name" + features[5].name);
+    const BeforeAfterTag = features[5].path;
+    await gotoBeforeAfterPage(BeforeAfterTag)
+
+
+      const elementToDrag = beforeAftr.sliderHorizontalbeforeHeading;
+
+      //Drag the slider-->right
+     await dragElementByDistance(page, elementToDrag, -350, 50, 2000,1700);
+     await expect(beforeAftr.imageHorizontalbeforeHeading).toHaveAttribute("style", "clip-path: inset(0px 100% 0px 0px);");
+     await expect(beforeAftr.sliderThumbContainerHorizontalbeforeHeading).toHaveAttribute("style","left: 0%;")
+
+      //Drag the slider-->left
+      await dragElementByDistance(page, elementToDrag, 750, 50, 2000,1700);
+      await expect(beforeAftr.imageHorizontalbeforeHeading).toHaveAttribute("style", "clip-path: inset(0px 0% 0px 0px);");
+      await expect(beforeAftr.sliderThumbContainerHorizontalbeforeHeading).toHaveAttribute("style","left: 100%;")
+
+
+
+  });
+});
+
+test.describe('Verify Before After Component From XF', () => {
+  // Go To Page
+  test(`${features[6].name}, ${features[6].tags}`, async () => {
+    console.log("features[6].name" + features[6].name);
+    const BeforeAfterTag = features[6].path;
+    await gotoBeforeAfterPage(BeforeAfterTag)
+
+
+      const elementToDrag = beforeAftr.sliderXFfromlefttoright;
+
+      //Drag the slider-->right
+     await dragElementByDistance(page, elementToDrag, -350, 50, 2000,2000);
+     await expect(beforeAftr.imageXFfromlefttoright).toHaveAttribute("style", "clip-path: inset(0px 100% 0px 0px);");
+     await expect(beforeAftr.sliderThumbContainerXFfromlefttoright).toHaveAttribute("style","left: 0%;")
+
+      //Drag the slider-->left
+      await dragElementByDistance(page, elementToDrag, 750, 50, 2000,2000);
+      await expect(beforeAftr.imageXFfromlefttoright).toHaveAttribute("style", "clip-path: inset(0px 0% 0px 0px);");
+      await expect(beforeAftr.sliderThumbContainerXFfromlefttoright).toHaveAttribute("style","left: 100%;")
+
+
+
+  });
+});
+
+test.describe('Verify Before After Component From XF for up to down', () => {
+  // Go To Page
+  test(`${features[7].name}, ${features[7].tags}`, async () => {
+    console.log("features[7].name" + features[7].name);
+    const BeforeAfterTag = features[7].path;
+    await gotoBeforeAfterPage(BeforeAfterTag)
+
+
+      const elementToDrag = beforeAftr.sliderXFfromUptoDown;
+
+      //Drag the slider-->right
+     await dragElementByDistance(page, elementToDrag, 100, -400, 2000,2500);
+     await expect(beforeAftr.imageXFfromUptoDown).toHaveAttribute("style", "clip-path: inset(0px 0px 100%);");
+     await expect(beforeAftr.sliderThumbContainerXFfromUptoDown).toHaveAttribute("style","top: 0%;")
+
+      //Drag the slider-->left
+      await dragElementByDistance(page, elementToDrag, 100,800, 2000,2500);
+      await expect(beforeAftr.imageXFfromUptoDown).toHaveAttribute("style", "clip-path: inset(0px 0px 0%);");
+      await expect(beforeAftr.sliderThumbContainerXFfromUptoDown).toHaveAttribute("style","top: 100%;")
+
+
+
+  });
+});
+
+test.describe('Verify Before After Component For Incorrect Authoring', () => {
+  // Go To Page
+  test(`${features[8].name}, ${features[8].tags}`, async () => {
+    console.log("features[8].name" + features[8].name);
+    const BeforeAfterTag = features[8].path;
+    await gotoBeforeAfterPage(BeforeAfterTag)
+
+
+      const elementToDrag = beforeAftr.sliderFailedForIncorrectAuthoring;
+      expect(elementToDrag).toBeTruthy();
+
+  });
+});