dimsum-e2e-tests 1.0.0-rc.1

package/ds-modal-slide/ModalSlide.visual.spec.js

@@ -0,0 +1,121 @@
+/* eslint-disable wdio/no-pause */
+import ModalSlideCO from './ModalSlideCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-4434 - ModalSlide:: with datagrid', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.withDataGrid.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('slide should cover all the screen', async () => {
+      // this should work, but in my (yuri) local machine fails, @andres please check
+      const tallBodyRadio = await ModalSlideCO.getRadioByIndex(4);
+      await tallBodyRadio.click();
+      await (await ModalSlideCO.getToggle(0)).click();
+      await (await $('div*=ON')).waitForDisplayed({ timeout: 10000 });
+      await (await ModalSlideCO.getToggleSlide()).click();
+      await ModalSlideCO.waitModalSlide();
+      const snapshot = await browser.checkSnapshot(ModalSlideCO.snapshotPath('with-data-grid'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-5414 - ModalSlide:: Half container', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('slide should cover half screen', async () => {
+      await (await ModalSlideCO.getToggleSlide()).waitForDisplayed();
+      await (await ModalSlideCO.getToggleSlide()).click();
+      await ModalSlideCO.waitModalSlide();
+      const snapshot = await browser.checkSnapshot(ModalSlideCO.snapshotPath('half-open-slide'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9519 - ModalSlide:: Without footer', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.withoutFooterURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('slide should cover half screen', async () => {
+      await (await ModalSlideCO.getToggleSlide()).waitForDisplayed();
+      await (await ModalSlideCO.getToggleSlide()).click();
+      await ModalSlideCO.waitModalSlide();
+      const snapshot = await browser.checkSnapshot(ModalSlideCO.snapshotPath('without-footer-slide'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9516 - ModalSlide:: Full Container & Custom Header', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.customHeaderURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('slide should cover the full container', async () => {
+      await (await ModalSlideCO.getToggleSlide()).waitForDisplayed();
+      await (await ModalSlideCO.getToggleSlide()).click();
+      await ModalSlideCO.waitModalSlide();
+      const snapshot = await browser.checkSnapshot(ModalSlideCO.snapshotPath('full-open-slide'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9517 - ModalSlide:: Within Modal', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.modalURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('slide should be correctly displayed within a modal', async () => {
+      await browser.eyesOpen();
+      await browser.maximizeWindow();
+      const openModal = await ModalSlideCO.getOpenModal();
+      await openModal.waitForDisplayed();
+      await openModal.click();
+      const modalButton = await ModalSlideCO.getModalButton();
+      await modalButton.waitForDisplayed();
+      await modalButton.click();
+      await ModalSlideCO.waitModalSlide();
+      const snapshot = await browser.eyesCheckSnapshot(ModalSlideCO.snapshotPath('modal-modal-slide'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9518 - ModalSlide:: Without Header', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.withoutHeaderURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('slide should not have a header', async () => {
+      await (await ModalSlideCO.getToggleSlide()).waitForDisplayed();
+      await (await ModalSlideCO.getToggleSlide()).click();
+      await ModalSlideCO.waitModalSlide();
+      const snapshot = await browser.checkSnapshot(ModalSlideCO.snapshotPath('without-header-slide'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}
+if (browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-9692 - ModalSlide:: Resize - portrait and landscape on tablet', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.resize.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display modalslide opened - Portrait', async () => {
+      await browser.eyesOpen();
+      await (await ModalSlideCO.getOpenModalBtn()).waitForDisplayed();
+      await (await ModalSlideCO.getOpenModalBtn()).click();
+      await ModalSlideCO.waitModalSlide();
+      const snapshot = await browser.eyesCheckSnapshot(ModalSlideCO.snapshotPath('modalslide-portrait'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display modalslide opened - Landscape', async () => {
+      await browser.eyesOpen();
+      await browser.setOrientation('LANDSCAPE');
+      await browser.pause(2000);
+      const snapshot = await browser.eyesCheckSnapshot(ModalSlideCO.snapshotPath('modalslide-landscape'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-modal-slide/ModalSlideCO.js

@@ -0,0 +1,77 @@
+import { PATH_E2E_MODALSLIDE } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export default class ModalSlideCO extends PageObject {
+  // notice all the PATH are from PATH_E2E_*
+  //   e2e for this component is 100% separated from documentation
+  static basicURL = new Urlbuilder(PATH_E2E_MODALSLIDE, 'basic-test');
+
+  static customHeaderURL = new Urlbuilder(PATH_E2E_MODALSLIDE, 'custom-header-test');
+
+  static modalURL = new Urlbuilder(PATH_E2E_MODALSLIDE, 'modal-test');
+
+  static withoutHeaderURL = new Urlbuilder(PATH_E2E_MODALSLIDE, 'without-header-test');
+
+  static pui3844 = new Urlbuilder(PATH_E2E_MODALSLIDE, 'pui-3844-date-time-modal-slide');
+
+  static withoutFooterURL = new Urlbuilder(PATH_E2E_MODALSLIDE, 'without-footer-test');
+
+  static resize = new Urlbuilder(PATH_E2E_MODALSLIDE, 'resize');
+
+  static withDataGrid = new Urlbuilder(PATH_E2E_MODALSLIDE, 'with-data-grid-test');
+
+  static cardsURL = new Urlbuilder(PATH_E2E_MODALSLIDE, 'cards-test');
+
+  static async getModalSlide() {
+    return $('[data-testid="ds-modal-slide"]');
+  }
+
+  // same "selector" used for "ds controlled form radio" e2e test
+  static async getRadios() {
+    return $$('[data-testid="ds-radio"]');
+  }
+
+  // same method used for "ds controlled form radio" e2e test
+  static getRadioByIndex = async (index) => getElementByIndex(this.getRadios, index);
+
+  static async getToggle(index) {
+    return $$('[data-testid="ds-controlled-toggle-checkbox"]')[index];
+  }
+
+  static async getToggleSlide() {
+    return $('[data-testid="ds-button"]');
+  }
+
+  static async getRejectedBtn() {
+    return $('[data-testid="modal-footer-reject-btn"]');
+  }
+
+  static async getHeaderCloserBtn() {
+    return $('[data-testid="modal-slider-header-close"]');
+  }
+
+  static async getOpenModal() {
+    return $('[data-testid="ds-button"]');
+  }
+
+  static async getModalButton() {
+    return $('[data-testid="modal-footer-confirm-btn"]');
+  }
+
+  static async getBodyContent() {
+    return $('[role="contentinfo"]');
+  }
+
+  static async waitModalSlide() {
+    await (await this.getModalSlide()).waitForDisplayed({ timeout: 5000 });
+  }
+
+  static async getOpenModalBtn() {
+    return $('[data-testid="open-modal-slide-button"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('ModalSlide', example, 'ds-modal-slide');
+  }
+}

package/ds-notification-badge/DSNotificationBadge.axe-core.func.spec.js

@@ -0,0 +1,62 @@
+import DSNotificationBadgeCO from './DSNotificationBadgeCO';
+import { axeCoreCheck } from '../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-11414:: [NotificationBadge] Relate to component - Axe-core Validation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSNotificationBadgeCO.relateToComponent.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate NotificationBadge accessibility with axe-core when relate to component', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-11415:: [NotificationBadge] Background color - Axe-core Validation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSNotificationBadgeCO.backgroundColor.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate NotificationBadge accessibility with axe-core when have custom background', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-11416:: [NotificationBadge] Alphanumerical - Axe-core Validation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSNotificationBadgeCO.alphaNumerical.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate NotificationBadge accessibility with axe-core - Alphanumerical', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11417:: [NotificationBadge] Chip, Icon and Button integration - Axe-core Validation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSNotificationBadgeCO.componentCasesTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate NotificationBadge accessibility with axe-core - component integration', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11418:: [NotificationBadge] Custom Component Integration - Axe-core Validation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSNotificationBadgeCO.customComponentTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate NotificationBadge accessibility with axe-core - custom component integration', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-notification-badge/DSNotificationBadge.visual.spec.js

@@ -0,0 +1,72 @@
+import DSNotificationBadgeCO from './DSNotificationBadgeCO';
+
+describe('PUI-9354:: Notification Badge: Relate to component', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSNotificationBadgeCO.relateToComponent.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('Should display relate to component', async () => {
+    await browser.eyesOpen();
+    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-relate-to-component'));
+    await expect(snapshot).toEqual(0);
+  });
+});
+
+describe('PUI-9353:: Notification Badge: Disabled', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSNotificationBadgeCO.disabled.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('Should display disabled badge', async () => {
+    await browser.eyesOpen();
+    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-disabled'));
+    await expect(snapshot).toEqual(0);
+  });
+});
+
+describe('PUI-9352:: Notification Badge: Background color', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSNotificationBadgeCO.backgroundColor.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('Should display custom background color badges', async () => {
+    await browser.eyesOpen();
+    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-background-color'));
+    await expect(snapshot).toEqual(0);
+  });
+});
+
+describe('PUI-9355:: Notification Badge: Alphanumerical', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSNotificationBadgeCO.alphaNumerical.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('Should display custom background color badges', async () => {
+    await browser.eyesOpen();
+    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-alpha-chars'));
+    await expect(snapshot).toEqual(0);
+  });
+});
+
+describe('PUI-11412:: Notification Badge: Chip, Icon and Button integration', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSNotificationBadgeCO.componentCasesTest.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('Should display integration with Chips and Button components correctly', async () => {
+    await browser.eyesOpen();
+    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-component-cases'));
+    await expect(snapshot).toEqual(0);
+  });
+});
+describe('PUI-11413:: Notification Badge: Custom Component Integration', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSNotificationBadgeCO.customComponentTest.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('Should display integration with custom components correctly', async () => {
+    await browser.eyesOpen();
+    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-custom-component'));
+    await expect(snapshot).toEqual(0);
+  });
+});

package/ds-notification-badge/DSNotificationBadgeCO.js

@@ -0,0 +1,26 @@
+import { PATH_NOTIFICATION_BADGE, PATH_E2E_NOTIFICATION_BADGE } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSPillsCO extends PageObject {
+  // Desktop
+  static relateToComponent = new Urlbuilder(PATH_E2E_NOTIFICATION_BADGE, 'relate-to-component-test');
+
+  static backgroundColor = new Urlbuilder(PATH_E2E_NOTIFICATION_BADGE, 'background-color-test');
+
+  static disabled = new Urlbuilder(PATH_E2E_NOTIFICATION_BADGE, 'disabled-test');
+
+  static alphaNumerical = new Urlbuilder(PATH_E2E_NOTIFICATION_BADGE, 'alpha-characters-test');
+
+  static componentCasesTest = new Urlbuilder(PATH_E2E_NOTIFICATION_BADGE, 'component-cases-test');
+
+  static customComponentTest = new Urlbuilder(PATH_E2E_NOTIFICATION_BADGE, 'custom-component-test');
+
+  static getUrl(component = 'relate-to-component') {
+    return PageObject.getUrl(PATH_NOTIFICATION_BADGE, component);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'relate-to-component') {
+    return PageObject.getSnapshotPathBuilder('NotificationBadge', example);
+  }
+}

package/ds-page-header/DSPageHeader.axe-core.func.spec.js

@@ -0,0 +1,41 @@
+import DSPageHeaderCO from './DSPageHeaderCO';
+import { axeCoreCheck } from '../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-11906: Page header, basic -AxeCore', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSPageHeaderCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+      const title = await DSPageHeaderCO.getTitle();
+      await title.waitForDisplayed();
+    });
+    it('01: should display the basic page header and pass axe-core scan', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should display page header with dropdown menu open and pass axe-core scan', async () => {
+      await (await DSPageHeaderCO.getDropDownMenuBtn()).click();
+      await (await DSPageHeaderCO.getDropDownMenu()).waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-11907, Page header:: Skeleton -AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPageHeaderCO.skeletonPropURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display skeleton (prop) for page header component and pass axe-core scan', async () => {
+      const skeleton = await DSPageHeaderCO.getSkeletonsByIndex(0);
+      await skeleton.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-page-header/DSPageHeader.visual.spec.js

@@ -0,0 +1,128 @@
+import DSPageHeaderCO from './DSPageHeaderCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('Page header, visual test', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSPageHeaderCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+      const title = await DSPageHeaderCO.getTitle();
+      await title.waitForDisplayed();
+    });
+    it('should display the page header', async () => {
+      const snapshot = await browser.checkSnapshot(DSPageHeaderCO.snapshotPath('pageheader-default'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display page header with dropdown menu open', async () => {
+      await (await DSPageHeaderCO.getDropDownMenuBtn()).click();
+      await (await DSPageHeaderCO.getDropDownMenu()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSPageHeaderCO.snapshotPath('dropdown-menu--basic'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should scroll page header dropdown menu to the bottom', async () => {
+      await (await DSPageHeaderCO.getDropDownMenuBtn()).click();
+      await (await DSPageHeaderCO.getDropDownMenu()).waitForDisplayed();
+      await (await DSPageHeaderCO.getMenuOption(7)).scrollIntoView();
+      await (await DSPageHeaderCO.getMenuOption(7)).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSPageHeaderCO.snapshotPath('scroll--basic'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should select one option from page header with dropdown menu', async () => {
+      await (await DSPageHeaderCO.getDropDownMenuBtn()).click();
+      await (await DSPageHeaderCO.getDropDownMenu()).waitForDisplayed();
+      await (await DSPageHeaderCO.getMenuOption(7)).scrollIntoView();
+      await (await DSPageHeaderCO.getMenuOption(7)).waitForDisplayed();
+      await (await DSPageHeaderCO.getMenuOption(2)).scrollIntoView();
+      await (await DSPageHeaderCO.getMenuOption(2)).waitForDisplayed();
+      await (await DSPageHeaderCO.getMenuOption(2)).click();
+      const snapshot = await browser.checkSnapshot(DSPageHeaderCO.snapshotPath('dropdown-menu--select-option'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('Page header, visual test full example', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSPageHeaderCO.fullExample.go();
+      if (errorOnGo) throw errorOnGo;
+      const title = await DSPageHeaderCO.getTitle();
+      await title.waitForDisplayed();
+    });
+    it('should display full example correctly', async () => {
+      const snapshot = await browser.checkSnapshot(DSPageHeaderCO.snapshotPath('page-header-full'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('Page header, visual test no border bottom', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSPageHeaderCO.noBorderURL.go();
+      if (errorOnGo) throw errorOnGo;
+      const title = await DSPageHeaderCO.getTitle();
+      await title.waitForDisplayed();
+    });
+    it('should show no border bottom', async () => {
+      const snapshot = await browser.checkSnapshot(DSPageHeaderCO.snapshotPath('no-border-bottom'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-7165, Page header:: seachBox position after toggle', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSPageHeaderCO.fullExample.go();
+      if (errorOnGo) throw errorOnGo;
+      const title = await DSPageHeaderCO.getTitle();
+      await title.waitForDisplayed();
+    });
+    it('should display searchbox opened', async () => {
+      await (await DSPageHeaderCO.getOpenSearchBtn()).click();
+      const snapshot = await browser.checkSnapshot(DSPageHeaderCO.snapshotPath('page-header-searchbox-opened'));
+      await expect(snapshot).toEqual(0);
+    });
+    // there is an issue: element not interactable: element not interactable
+    it.skip('should display searchbox closed', async () => {
+      await (await DSPageHeaderCO.getSearchBtn()).click();
+      const snapshot = await browser.checkSnapshot(DSPageHeaderCO.snapshotPath('page-header-searchbox-closed'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  if (!browser.capabilities['ice:options'].isTablet) {
+    describe('PUI-7251, Page header:: truncated title', () => {
+      beforeEach('loading page', async () => {
+        const errorOnGo = await DSPageHeaderCO.truncated.go();
+        if (errorOnGo) throw errorOnGo;
+        const title = await DSPageHeaderCO.getTitle();
+        await title.waitForDisplayed();
+      });
+      it('should display tooltip opened', async () => {
+        await mouseOver(await DSPageHeaderCO.getTitle());
+        const snapshot = await browser.checkSnapshot(DSPageHeaderCO.snapshotPath('page-header-tooltip'));
+        await expect(snapshot).toEqual(0);
+      });
+      it('should display truncated text without tooltip', async () => {
+        await mouseOver(await DSPageHeaderCO.getTitle(), 100, 100);
+        const snapshot = await browser.checkSnapshot(DSPageHeaderCO.snapshotPath('page-header-truncated'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+  }
+  describe('PUI-11064, Page header:: Skeleton -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPageHeaderCO.skeletonCompURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display skeleton for page header component', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSPageHeaderCO.snapshotPath('page-header-comp-skeleton'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-11893, Page header:: Skeleton -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPageHeaderCO.skeletonPropURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display skeleton for page header component', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSPageHeaderCO.snapshotPath('page-header-prop-skeleton'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-page-header/DSPageHeaderCO.js

@@ -0,0 +1,68 @@
+/* eslint-disable import/no-relative-packages */
+import { PATH_PAGE_HEADER_EXAMPLES, PATH_E2E_PAGEHEADER } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export default class DSPageHeaderCO extends PageObject {
+  // Desktop
+  static basicURL = new Urlbuilder(PATH_E2E_PAGEHEADER, 'basic-test');
+
+  static fullExample = new Urlbuilder(PATH_E2E_PAGEHEADER, 'full-example-test');
+
+  static noBorderURL = new Urlbuilder(PATH_E2E_PAGEHEADER, 'no-border-test');
+
+  static truncated = new Urlbuilder(PATH_E2E_PAGEHEADER, 'truncated-test');
+
+  static skeletonCompURL = new Urlbuilder(PATH_E2E_PAGEHEADER, 'with-skeleton-components-test');
+
+  static skeletonPropURL = new Urlbuilder(PATH_E2E_PAGEHEADER, 'with-skeleton-prop-test');
+
+  static getUrl(component = 'basic') {
+    return PageObject.getUrl(PATH_PAGE_HEADER_EXAMPLES, component);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('PageHeader', example);
+  }
+
+  // selectors
+
+  static async getTitle() {
+    return $('[data-testid="ds-page-header-title"]');
+  }
+
+  static async getButtons() {
+    return $$('[data-testid="ds-button"]');
+  }
+
+  static getDropDownMenuBtn = async () => getElementByIndex(this.getButtons, 1);
+
+  static async getDropDownMenu() {
+    return $('[data-testid="dropdown-menu-listbox"]');
+  }
+
+  static async getMenuOption(number) {
+    return $(`#id${number}`);
+  }
+
+  static async getButton(index) {
+    return $$('[data-testid="button-wrapper"]')[index];
+  }
+
+  static async getSearchBtn() {
+    return $('[data-testid="ds-searchbox-button"]');
+  }
+
+  static async getSkeletonsByIndex(index = 0) {
+    return $$('[data-testid="ds-skeleton-root"]')[index];
+  }
+
+  static async getOpenSearchBtn() {
+    return $('[data-testid="ds-toolbar-item"]').$('[data-testid="ds-button"]');
+  }
+
+  // data-testid="ds-searchbox-button"
+
+  // actions
+  // utils
+}

package/ds-page-layout/PageLayout.visual.spec.js

@@ -0,0 +1,44 @@
+import PageLayoutCO from './PageLayoutCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6272 - PageLayout - Basic Page', () => {
+    before(async () => {
+      const errorOnGo = await PageLayoutCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display basic page layout', async () => {
+      const snapshot = await browser.checkSnapshot(PageLayoutCO.snapshotPath('basic-page'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6273 - PageLayout - Complex Page', () => {
+    before(async () => {
+      const errorOnGo = await PageLayoutCO.complexURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display complex page layout', async () => {
+      const snapshot = await browser.checkSnapshot(PageLayoutCO.snapshotPath('complex-page'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6274 - PageLayout - Integrated Example', () => {
+    before(async () => {
+      const errorOnGo = await PageLayoutCO.integratedURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display complex page integrated example', async () => {
+      const snapshot = await browser.checkSnapshot(PageLayoutCO.snapshotPath('integrated-page-example'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display leftNav opened', async () => {
+      await (await PageLayoutCO.getLeftNavItem(0)).click();
+      const snapshot = await browser.checkSnapshot(PageLayoutCO.snapshotPath('integrated-page-example'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display leftNav and SidePanel opened', async () => {
+      await (await PageLayoutCO.getSidePanelBtn()).click();
+      const snapshot = await browser.checkSnapshot(PageLayoutCO.snapshotPath('integrated-page-example'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-page-layout/PageLayoutCO.js

@@ -0,0 +1,23 @@
+import { PATH_PAGE_LAYOUT_TEMPLATE } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class PageLayoutCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_PAGE_LAYOUT_TEMPLATE, 'basic');
+
+  static complexURL = new Urlbuilder(PATH_PAGE_LAYOUT_TEMPLATE, 'complex-page');
+
+  static integratedURL = new Urlbuilder(PATH_PAGE_LAYOUT_TEMPLATE, 'integrated-example');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('PageLayout', example, 'ds-page-layout');
+  }
+
+  static async getLeftNavItem(index) {
+    return $$('[data-testid="leftnav-leftcomponent"]')[index];
+  }
+
+  static async getSidePanelBtn() {
+    return $('span*=Open');
+  }
+}