dimsum-e2e-tests 1.0.0-rc.1

package/ds-leftnavigation/LeftNavigationCO.js

@@ -0,0 +1,249 @@
+/* eslint-disable max-lines */
+import { PATH_E2E_LEFT_NAVIGATION } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class LeftNavCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_E2E_LEFT_NAVIGATION, 'basic-test');
+
+  static wrapped = new Urlbuilder(PATH_E2E_LEFT_NAVIGATION, 'wrapped-text-test');
+
+  static skeletonURL = new Urlbuilder(PATH_E2E_LEFT_NAVIGATION, 'loading-skeleton-test');
+
+  static isSkeletonURL = new Urlbuilder(PATH_E2E_LEFT_NAVIGATION, 'with-skeleton-prop-test');
+
+  static customFooterURL = new Urlbuilder(PATH_E2E_LEFT_NAVIGATION, 'custom-footer-item-test');
+
+  static customizationTest = new Urlbuilder(PATH_E2E_LEFT_NAVIGATION, 'customization-test');
+
+  static showcaseURL = new Urlbuilder(PATH_E2E_LEFT_NAVIGATION, 'showcase-test');
+
+  static fullFeatures = new Urlbuilder(PATH_E2E_LEFT_NAVIGATION, 'full-features-test');
+
+  static notificationBadgingURL = new Urlbuilder(PATH_E2E_LEFT_NAVIGATION, 'notification-badging-combinations-test');
+
+  static loading = new Urlbuilder(PATH_E2E_LEFT_NAVIGATION, 'loading-test');
+
+  static keepingItems = new Urlbuilder(PATH_E2E_LEFT_NAVIGATION, 'keeping-items-test');
+
+  static withContent = new Urlbuilder(PATH_E2E_LEFT_NAVIGATION, 'with-content-test');
+
+  static async loadingIndicator() {
+    return $('[data-testid="ds-circular-indeterminate-indicator-root"]');
+  }
+
+  static async loadingIndicatorTooltip() {
+    return $('[data-testid="ds-tooltip-v3-tooltip-text-wrapper"]');
+  }
+
+  static async leftComponent(index) {
+    if (index) {
+      return $$('[data-testid="leftnav-leftcomponent"]')[index];
+    }
+    return $('[data-testid="leftnav-leftcomponent"]');
+  }
+
+  static async leftChevron() {
+    return $('[data-testid="leftnav-leftcomponent-chevron"]');
+  }
+
+  static async itemLabel(index) {
+    return $$('[data-testid="leftnav-itemlabel"]')[index];
+  }
+
+  static async itemLabelLength() {
+    return (await $$('[data-testid="leftnav-itemlabel"]')).length;
+  }
+
+  static async subItemLabel(index) {
+    return $$('[data-testid="leftnav-subitem-text-label"]')[index];
+  }
+
+  static async subItemLabelLength() {
+    return (await $$('[data-testid="leftnav-subitem-text-label"]')).length;
+  }
+
+  static async getTruncatedText(index) {
+    return $$('[data-testid="DS-SimpleTruncateText"]')[index];
+  }
+
+  static async getTooltip() {
+    return $('[data-testid="popover-container"]');
+  }
+
+  static async getSubItemBtn() {
+    return $('[data-testid="sub-item-button"]');
+  }
+
+  static async getMenuItemBtn() {
+    return $('[data-testid="menu-item-button"]');
+  }
+
+  static async getSkeletonByIndex(index = 0) {
+    return $$('[data-testid="ds-skeleton-root"]')[index];
+  }
+
+  // Notifications
+
+  static async listItiemLabel(index) {
+    return $$('[data-testid="leftnav-list-item-label"]')[index];
+  }
+
+  static async listItemLength() {
+    return (await $$('[data-testid="leftnav-list-item-label"]')).length;
+  }
+
+  static listItemDateLabel(index) {
+    return $$('[data-testid="leftnav-list-item-date"]')[index];
+  }
+
+  static async rightComponent(index) {
+    return $$('[data-testid="leftnav-rightcomponent"]')[index];
+  }
+
+  static async overflowMenu() {
+    return $$('//div[@data-testid="leftnav-right-component"]/span')[1];
+  }
+
+  static async getDrillDownItem(index) {
+    return $$('[data-testid="leftnav-drilldown-item"]')[index];
+  }
+
+  static async getToggleSearchBtn() {
+    return $('[aria-label="Toggle search"]');
+  }
+
+  static async getInputField() {
+    return $('[data-testid="ds-input_main-component"]');
+  }
+
+  static async getSearchBtn() {
+    return $('[data-testid="ds-searchbox-button"]');
+  }
+
+  static async getFilterBtn() {
+    return $('[aria-label="Toggle search"]');
+  }
+
+  static async getSearchboxClearBtn() {
+    return $('[data-testid="ds-searchbox-button-clear"]');
+  }
+
+  static async getIconButtonByIndex(index = 0) {
+    return $$(`[data-testid="ds-icon-root"][role="button"]`)[index];
+  }
+
+  // Footer
+  static async footerBtn() {
+    return $('[data-testid="leftnav-footer-btn"]');
+  }
+
+  static async footerLabel() {
+    return $('[data-testid="leftnav-itemlabel"]');
+  }
+
+  static async getFooter() {
+    return $('[data-testid="leftnav-container"]');
+  }
+
+  static async leftNavItem(index) {
+    const item = (await $$('[data-testid="leftnav-item-container"]'))[index];
+    return item;
+  }
+
+  static async verticalSideBarIndicator(index) {
+    const item = await this.leftNavItem(index);
+    const verticalBarColor = await item.getCSSProperty('box-shadow');
+    return verticalBarColor.parsed.hex + verticalBarColor.parsed.alpha;
+  }
+
+  static async getItemPseudoElementProperty(index, pseudo, property) {
+    return browser.execute(
+      (_index, _pseudo, _property) => {
+        const row = window.getComputedStyle(
+          // eslint-disable-next-line no-underscore-dangle
+          document.querySelectorAll('[data-testid="leftnav-item-container"]')[_index],
+          _pseudo,
+        );
+        return row.getPropertyValue(_property);
+      },
+      index,
+      pseudo,
+      property,
+    );
+  }
+
+  static async getByTestId(data) {
+    return $(`[data-testid="${data}"]`);
+  }
+
+  static async checkItemPseudoBorder(index) {
+    const expectedBorderColor = 'rgb(0, 106, 169)';
+    await this.getItemPseudoElementProperty(index, '::before', 'border-color');
+    return (
+      (await this.getItemPseudoElementProperty(index, '::before', 'border-color')) === expectedBorderColor ||
+      (await this.getItemPseudoElementProperty(index, '::before', 'border-bottom-color')) === expectedBorderColor ||
+      (await this.getItemPseudoElementProperty(index, '::before', 'border-left-color')) === expectedBorderColor ||
+      (await this.getItemPseudoElementProperty(index, '::before', 'border-right-color')) === expectedBorderColor ||
+      (await this.getItemPseudoElementProperty(index, '::before', 'border-top-color')) === expectedBorderColor
+    );
+  }
+
+  static async isFocused(index) {
+    if (await this.checkItemPseudoBorder(index)) {
+      return true;
+    }
+    return false;
+  }
+
+  static async isHovered(index) {
+    const item = await this.leftNavItem(index);
+    const bg = await item.getCSSProperty('background-color');
+    const verticalBar = await this.verticalSideBarIndicator(index);
+    if (bg.parsed.hex === '#ebf6ff' && verticalBar === '#a3d6ff1') {
+      return true;
+    }
+    return false;
+  }
+
+  static async isActive(index) {
+    const item = await this.leftNavItem(index);
+    const bg = await item.getCSSProperty('background-color');
+    const verticalBar = await this.verticalSideBarIndicator(index);
+    if (bg.parsed.hex === '#ebf6ff' && verticalBar === '#52a6ec1') {
+      return true;
+    }
+    return false;
+  }
+
+  static async isActiveFocused(index) {
+    // eslint-disable-next-line no-return-await
+    return (await this.isActive(index)) && (await this.isFocused(index));
+  }
+
+  static async isDefault(index) {
+    const item = await this.leftNavItem(index);
+    const bg = await item.getCSSProperty('background-color');
+    const leftBorder = await this.verticalSideBarIndicator(index);
+    if (
+      bg.parsed.hex === '#ffffff' &&
+      leftBorder === '#0000000' &&
+      !(await this.isFocused(index)) &&
+      !(await this.isHovered(index)) &&
+      !(await this.isActive(index))
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  static async isActiveElement(element) {
+    const key = 'element-6066-11e4-a52e-4f735466cecf';
+    const selected = await browser.getActiveElement();
+    return element[key] === selected[key];
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('LeftNavigation', example, 'ds-leftnavigation');
+  }
+}

package/ds-list-section-header/ListSectionHeader.visual.spec.js

@@ -0,0 +1,36 @@
+import ListSectionHeaderCO from './ListSectionHeaderCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-4617 - ListSectionHeader visual test', () => {
+    describe('ListSectionHeader - basic', () => {
+      before('loading page', async () => {
+        const errorOnGo = await ListSectionHeaderCO.basic.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display a basic header correctly', async () => {
+        const snapshot = await browser.checkSnapshot(ListSectionHeaderCO.snapshotPath('basic'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('ListSectionHeader - with icon', () => {
+      before('loading page', async () => {
+        const errorOnGo = await ListSectionHeaderCO.icon.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display a header label with icon correctly', async () => {
+        const snapshot = await browser.checkSnapshot(ListSectionHeaderCO.snapshotPath('with-icon'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('ListSectionHeader - expanded', () => {
+      before('loading page', async () => {
+        const errorOnGo = await ListSectionHeaderCO.expanded.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display a header expanded with checkbox correctly', async () => {
+        const snapshot = await browser.checkSnapshot(ListSectionHeaderCO.snapshotPath('expanded'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+  });
+}

package/ds-list-section-header/ListSectionHeaderCO.js

@@ -0,0 +1,20 @@
+import { PATH_LIST_SECTION_HEADER } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class ListSectionHeaderCO extends PageObject {
+  // Desktop
+  static basic = new Urlbuilder(PATH_LIST_SECTION_HEADER, 'basic');
+
+  static expanded = new Urlbuilder(PATH_LIST_SECTION_HEADER, 'expanded');
+
+  static icon = new Urlbuilder(PATH_LIST_SECTION_HEADER, 'icon');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('ListSectionHeader', example);
+  }
+
+  // selectors
+  // actions
+  // utils
+}

package/ds-loading-Indicator/LoadingIndicator.func.spec.js

@@ -0,0 +1,16 @@
+import LoadingIndicator from './LoadingIndicatorCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-5666 - Loading Indicator', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LoadingIndicator.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display loading msg', async () => {
+      await (await LoadingIndicator.getButton()).waitForDisplayed();
+      await (await LoadingIndicator.getButton()).click();
+      const loadingMsg = await LoadingIndicator.getLoadingMsg();
+      await expect(loadingMsg).toBeDisplayedInViewport();
+    });
+  });
+}

package/ds-loading-Indicator/LoadingIndicatorCO.js

@@ -0,0 +1,23 @@
+import { PATH_LOADING_INDICATOR } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class LoadingIndicator extends PageObject {
+  // Desktop
+  static basic = new Urlbuilder(PATH_LOADING_INDICATOR, 'basic');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('LoadingIndicator', example);
+  }
+
+  // selectors
+  static async getButton() {
+    return $('[data-testid="ds-button"]');
+  }
+
+  static async getLoadingMsg() {
+    return $('span*=Loading, please wait 5 seconds');
+  }
+  // actions
+  // utils
+}

package/ds-menu-item/DSMenuItems.axe-core.func.spec.js

@@ -0,0 +1,95 @@
+/* eslint-disable wdio/no-pause */
+import { axeCoreCheck, mouseOver } from '../helpers';
+import DSMenuItems from './DSMenuItemsCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-11563 - DSMenuItems:: Action Menu Item - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.actionMenuItem.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display action menu items properly and pass axecore test', async () => {
+      const menuItemWrapper = await DSMenuItems.getMenuItemsWrapper();
+      await menuItemWrapper.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should pass axecore test - click and hover', async () => {
+      const menuItem1 = await DSMenuItems.getMenuItem('1');
+      const menuItem2 = await DSMenuItems.getMenuItem('2');
+      await menuItem1.click();
+      await mouseOver(menuItem2, 40);
+      await browser.pause(300);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11564 - DSMenuItems:: Single Menu Item - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.singleMenuItem.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display single menu items properly and pass axecore test', async () => {
+      const menuItemWrapper = await DSMenuItems.getMenuItemsWrapper();
+      await menuItemWrapper.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should pass axecore test - click and hover', async () => {
+      const menuItem1 = await DSMenuItems.getMenuItem('1');
+      const menuItem2 = await DSMenuItems.getMenuItem('2');
+      await menuItem1.click();
+      await mouseOver(menuItem2, 40);
+      await browser.pause(300);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11565 - DSMenuItems:: Multi Menu Item - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.multiMenuItem.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display multi menu items properly and pass axecore test', async () => {
+      const menuItemWrapper = await DSMenuItems.getMenuItemsWrapper();
+      await menuItemWrapper.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should pass axecore test - click and hover', async () => {
+      const menuItem1 = await DSMenuItems.getMenuItem('1');
+      const menuItem2 = await DSMenuItems.getMenuItem('2');
+      await menuItem1.click();
+      await mouseOver(menuItem2, 40);
+      await browser.pause(300);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11574 - DSMenuItems:: Section Menu Item - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.sectionMenuItem.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display section menu items properly and pass axecore test', async () => {
+      const menuItemWrapper = await DSMenuItems.getMenuItemsWrapper();
+      await menuItemWrapper.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should pass axecore test - click and hover', async () => {
+      const menuItem1 = await DSMenuItems.getMenuItem('1');
+      const menuItem2 = await DSMenuItems.getMenuItem('2');
+      await menuItem1.click();
+      await mouseOver(menuItem2, 40);
+      await browser.pause(300);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-menu-item/DSMenuItems.func.spec.js

@@ -0,0 +1,94 @@
+import { Key } from 'webdriverio';
+import DSMenuItems from './DSMenuItemsCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-11566 - DSMenuItems:: Action Menu Item - func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.actionMenuItem.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should trigger the action onClick', async () => {
+      const menuItemWrapper = await DSMenuItems.getMenuItemsWrapper();
+      await menuItemWrapper.waitForDisplayed();
+      const menuItem2 = await DSMenuItems.getMenuItem('2');
+      await menuItem2.click();
+      const actionTriggered = DSMenuItems.getActionTriggered();
+      await expect(actionTriggered).toHaveTextContaining('option id #2 triggered');
+    });
+    it('02: should trigger the action onKeyDown - Space', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const actionTriggered = DSMenuItems.getActionTriggered();
+      await expect(actionTriggered).toHaveTextContaining('option id #3 triggered');
+    });
+  });
+  describe('PUI-11567 - DSMenuItems:: Single Menu Item - func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.singleMenuItem.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: innerRef test: onClick should display option label', async () => {
+      const menuItemWrapper = await DSMenuItems.getMenuItemsWrapper();
+      await menuItemWrapper.waitForDisplayed();
+      const menuItem3 = await DSMenuItems.getMenuItem('3');
+      await menuItem3.click();
+      const innerRef = DSMenuItems.getInnerRef();
+      await expect(innerRef).toHaveTextContaining('Single menu item 3');
+      await expect(menuItem3).toHaveAttribute('aria-selected', 'true');
+    });
+    it('02: innerRef test: onKeyDown should display option label', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const innerRef = DSMenuItems.getInnerRef();
+      const menuItem4 = await DSMenuItems.getMenuItem('4');
+      await expect(innerRef).toHaveTextContaining('Single menu item 4');
+      await expect(menuItem4).toHaveAttribute('aria-selected', 'true');
+    });
+  });
+  describe('PUI-11568 - DSMenuItems:: Multi Menu Item - func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.multiMenuItem.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: innerRef test: onClick should display option label', async () => {
+      const menuItemWrapper = await DSMenuItems.getMenuItemsWrapper();
+      await menuItemWrapper.waitForDisplayed();
+      const menuItem3 = await DSMenuItems.getMenuItem('3');
+      await menuItem3.click();
+      const innerRef = DSMenuItems.getInnerRef();
+      await expect(innerRef).toHaveTextContaining('multi menu item 3');
+      await expect(menuItem3).toHaveAttribute('aria-selected', 'false');
+    });
+    it('02: innerRef test: onKeyDown should display option label', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const menuItem4 = await DSMenuItems.getMenuItem('4');
+      const innerRef = DSMenuItems.getInnerRef();
+      await expect(innerRef).toHaveTextContaining('multi menu item 4');
+      await expect(menuItem4).toHaveAttribute('aria-selected', 'true');
+    });
+  });
+  describe('PUI-11573 - DSMenuItems:: Section Menu Item - func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.sectionMenuItem.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: innerRef test: onClick should display option label', async () => {
+      const menuItemWrapper = await DSMenuItems.getMenuItemsWrapper();
+      await menuItemWrapper.waitForDisplayed();
+      const menuItem3 = await DSMenuItems.getMenuItem('3');
+      await menuItem3.click({ x: 50 });
+      const innerRef = DSMenuItems.getInnerRef();
+      await expect(innerRef).toHaveTextContaining('section menu item 3');
+      await expect(menuItem3).toHaveAttribute('aria-selected', 'true');
+    });
+    it('02: innerRef test: onKeyDown should display option label', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const menuItem4 = await DSMenuItems.getMenuItem('4');
+      const innerRef = DSMenuItems.getInnerRef();
+      await expect(innerRef).toHaveTextContaining('section menu item 4');
+      await expect(menuItem4).toHaveAttribute('aria-selected', 'true');
+    });
+  });
+}

package/ds-menu-item/DSMenuItems.visual.spec.js

@@ -0,0 +1,123 @@
+import { mouseOver } from '../helpers';
+import DSMenuItems from './DSMenuItemsCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-11569 - DSMenuItems:: Action Menu Item - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.actionMenuItem.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display action menu items correctly', async () => {
+      const menuItemWrapper = await DSMenuItems.getMenuItemsWrapper();
+      await menuItemWrapper.waitForDisplayed();
+      const snapshot = await browser.checkRegionSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-action-menu'),
+        menuItemWrapper,
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display action menu items correctly - hover and click', async () => {
+      const menuItemWrapper = await DSMenuItems.getMenuItemsWrapper();
+      await menuItemWrapper.waitForDisplayed();
+      const menuItem1 = await DSMenuItems.getMenuItem('1');
+      const menuItem2 = await DSMenuItems.getMenuItem('2');
+      await menuItem1.click();
+      await mouseOver(menuItem2, 40);
+      // eslint-disable-next-line wdio/no-pause
+      await browser.pause(300);
+      const snapshot = await browser.checkRegionSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-action-menu-states'),
+        menuItemWrapper,
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-115670 - DSMenuItems:: Single Menu Item - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.singleMenuItem.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display single menu items correctly', async () => {
+      const menuItemWrapper = await DSMenuItems.getMenuItemsWrapper();
+      await menuItemWrapper.waitForDisplayed();
+      const snapshot = await browser.checkRegionSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-single-menu'),
+        menuItemWrapper,
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display single menu items correctly - hover and click', async () => {
+      const menuItemWrapper = await DSMenuItems.getMenuItemsWrapper();
+      await menuItemWrapper.waitForDisplayed();
+      const menuItem1 = await DSMenuItems.getMenuItem('1');
+      const menuItem2 = await DSMenuItems.getMenuItem('2');
+      await menuItem1.click();
+      await mouseOver(menuItem2);
+      const snapshot = await browser.checkRegionSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-single-menu-states'),
+        menuItemWrapper,
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-11571 - DSMenuItems:: Multi Menu Item - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.multiMenuItem.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display action menu items correctly', async () => {
+      const menuItemWrapper = await DSMenuItems.getMenuItemsWrapper();
+      await menuItemWrapper.waitForDisplayed();
+      const snapshot = await browser.checkRegionSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-multi-menu'),
+        menuItemWrapper,
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display action menu items correctly - hover and click', async () => {
+      const menuItemWrapper = await DSMenuItems.getMenuItemsWrapper();
+      await menuItemWrapper.waitForDisplayed();
+      const menuItem1 = await DSMenuItems.getMenuItem('1');
+      const menuItem2 = await DSMenuItems.getMenuItem('2');
+      const menuItem3 = await DSMenuItems.getMenuItem('3');
+      await menuItem1.click();
+      await menuItem3.click();
+      await mouseOver(menuItem2);
+      const snapshot = await browser.checkRegionSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-multi-menu-states'),
+        menuItemWrapper,
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-11572 - DSMenuItems:: Section Menu Item - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.sectionMenuItem.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display section menu items correctly', async () => {
+      const menuItemWrapper = await DSMenuItems.getMenuItemsWrapper();
+      await menuItemWrapper.waitForDisplayed();
+      const snapshot = await browser.checkRegionSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-section-menu'),
+        menuItemWrapper,
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display section menu items correctly - hover and click', async () => {
+      const menuItemWrapper = await DSMenuItems.getMenuItemsWrapper();
+      await menuItemWrapper.waitForDisplayed();
+      const menuItem1 = await DSMenuItems.getMenuItem('1');
+      const menuItem2 = await DSMenuItems.getMenuItem('2');
+      const menuItem3 = await DSMenuItems.getMenuItem('3');
+      await menuItem1.click({ x: 50 });
+      await menuItem3.click({ x: 50 });
+      await mouseOver(menuItem2);
+      const snapshot = await browser.checkRegionSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-section-menu-states'),
+        menuItemWrapper,
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}