dimsum-e2e-tests 1.0.0-rc.1

package/package.json

@@ -0,0 +1,125 @@
+{
+  "name": "dimsum-e2e-tests",
+  "version": "1.0.0-rc.1",
+  "description": "End-to-end tests for dimsum library",
+  "dependencies": {
+    "@elliemae/ds-legacy-accordion": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-app-picker": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-backdrop": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-accessibility": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-basic": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-banner": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-breadcrumb": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-button": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-button-group": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-button-v2": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-card": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-card-array": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-button-v1": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-card-v2": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-card-navigation": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-card-v2-action-addon": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-chat": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-card-v2-group": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-chat-bubble": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-chat-tile": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-chip": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-circular-progress-indicator": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-codeeditor": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-comments": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-controlled-form": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-csv-converter": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-datagrids": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-dataviz": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-data-table": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-dataviz-pie": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-date-picker": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-date-range-picker": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-date-range-selector": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-date-time-picker": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-date-time-recurrence-picker": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-decision-graph": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-dialog": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-drag-and-drop": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-dropdownmenu": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-fast-list": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-dropzone": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-filterbar": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-form": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-form-date-range-picker": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-form-date-time-picker": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-form-layout-blocks": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-form-layout-label": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-grid": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-global-header": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-group-box": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-header": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-hooks-fontsize-detector": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-hooks-fontsize-media": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-icon": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-image": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-icons": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-imagelibrarymodal": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-indeterminate-progress-indicator": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-label-value": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-left-navigation": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-list-section-header": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-menu": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-loading-indicator": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-menu-items": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-mini-toolbar": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-mobile": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-modal": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-modal-slide": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-page-header": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-notification-badge": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-page-header-v1": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-page-header-v2": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-number-range-field": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-page-layout": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-page-number": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-pagination": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-pills": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-popper": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-popover": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-popperjs": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-query-builder": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-progress-indicator": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-resizeable-container": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-search-field": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-read-more": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-ribbon": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-shuttle": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-separator": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-shuttle-v2": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-side-panel": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-skeleton": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-spinner": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-slider": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-square-indicator": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-stepper": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-system": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-tabs": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-svg": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-test-utils": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-text-wrapper": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-time-picker": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-toast": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-toolbar": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-toolbar-v2": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-tooltip": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-transition": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-tree-model": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-treeview": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-truncated-expandable-text": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-truncated-tooltip-text": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-typography": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-uploader": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-utilities": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-virtual-list": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-wizard": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-wysiwygeditor": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-zipcode-search": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-zoom": "1.0.0-rc.1"
+  }
+}

package/utils.js

@@ -0,0 +1 @@
+export const matcher = 0.1;

package/z-index/ZIndex.visual.spec.js

@@ -0,0 +1,183 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import ZIndexCO from './ZindexCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8724 - ZIndex - Side Panel, Visual test', () => {
+    before(async () => {
+      const errorOnGo = await ZIndexCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display combobox correctly', async () => {
+      await (await ZIndexCO.getOpenSidePanel()).click();
+      await browser.pause(500);
+      const combobox = await ZIndexCO.getComboOnSidePanel();
+      await combobox.click();
+      const snapshot = await browser.checkSnapshot(ZIndexCO.snapshotPath('zi-sidepanel-combobox'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display dropdown correctly', async () => {
+      await browser.keys(Key.Escape);
+      const dropdownTrigger = await ZIndexCO.getDDButtonOnSidePanel();
+      await dropdownTrigger.click();
+      const snapshot = await browser.checkSnapshot(ZIndexCO.snapshotPath('zi-sidepanel-dd'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display picker correctly', async () => {
+      await browser.keys(Key.Escape);
+      const appPickerTrigger = await ZIndexCO.getAppPickerTriggerOnSidePanel();
+      await appPickerTrigger.click();
+      const snapshot = await browser.checkSnapshot(ZIndexCO.snapshotPath('zi-sidepanel-apppicker'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display date correctly', async () => {
+      await browser.keys(Key.Escape);
+      const dateTimeTrigger = await ZIndexCO.getDateTimeTriggerOnSidePanel();
+      await dateTimeTrigger.click();
+      const snapshot = await browser.checkSnapshot(ZIndexCO.snapshotPath('zi-sidepanel-datetime'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8725 - ZIndex - ModalSlide, Visual test', () => {
+    before(async () => {
+      const errorOnGo = await ZIndexCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display combobox correctly', async () => {
+      await (await ZIndexCO.getOpenModalSlide()).click();
+      await browser.pause(500);
+      const combobox = await ZIndexCO.getComboOnModalSlide();
+      await combobox.click();
+      const snapshot = await browser.checkSnapshot(ZIndexCO.snapshotPath('zi-modalslide-combo'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display dropdown correctly', async () => {
+      await browser.keys(Key.Escape);
+      const dropDTrigger = await ZIndexCO.getDDButtonOnModalSlide();
+      await dropDTrigger.click();
+      const snapshot = await browser.checkSnapshot(ZIndexCO.snapshotPath('zi-modalslide-dd'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display picker correctly', async () => {
+      await browser.keys(Key.Escape);
+      const appPickerTrigger = await ZIndexCO.getAppPickerTriggerOnModalSlide();
+      await appPickerTrigger.click();
+      const snapshot = await browser.checkSnapshot(ZIndexCO.snapshotPath('zi-modalslide-apppicker'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display date correctly', async () => {
+      await browser.keys(Key.Escape);
+      const dateRangeTrigger = await ZIndexCO.getDateRangeTriggerOnModalSlide();
+      await dateRangeTrigger.click();
+      const snapshot = await browser.checkSnapshot(ZIndexCO.snapshotPath('zi-modalslide-date'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8728 - ZIndex - Dialog On SidePanel, Visual test', () => {
+    before(async () => {
+      const errorOnGo = await ZIndexCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display combobox correctly', async () => {
+      await browser.eyesOpen();
+      await (await ZIndexCO.getOpenSidePanel()).click();
+      await (await ZIndexCO.getOpenDialogOnSidePanel()).click();
+      await browser.pause(500);
+      const combobox = await ZIndexCO.getComboOnSidePanelDialog();
+      await combobox.click();
+      const snapshot = await browser.eyesCheckSnapshot(ZIndexCO.snapshotPath('zi-sidepanel-dialog-combobox'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display dropdown correctly', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Enter);
+      const dropDTrigger = await ZIndexCO.getDDOnSidePanelDialog();
+      await dropDTrigger.click();
+      const snapshot = await browser.eyesCheckSnapshot(ZIndexCO.snapshotPath('zi-sidepanel-dialog-dropdown'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display picker correctly', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Escape);
+      const appPickerTrigger = await ZIndexCO.getAppPickerTriggerOnSidePanelDialog();
+      await appPickerTrigger.click();
+      const snapshot = await browser.eyesCheckSnapshot(ZIndexCO.snapshotPath('zi-sidepanel-dialog-picker'));
+      await expect(snapshot).toEqual(0);
+    });
+    if (browser.capabilities.browserName !== 'Safari') {
+      it('should display date correctly', async () => {
+        await browser.eyesOpen();
+        await (await ZIndexCO.getPickerChip(2)).click();
+        await browser.keys(Key.Escape);
+        await (await ZIndexCO.getOpenDialogOnSidePanel()).click();
+        const dateTrigger = await ZIndexCO.getDateTimeOnSidePanelDialog();
+        await dateTrigger.click();
+        const snapshot = await browser.eyesCheckSnapshot(ZIndexCO.snapshotPath('zi-sidepanel-dialog-date'));
+        await expect(snapshot).toEqual(0);
+      });
+    }
+  });
+
+  describe('PUI-8727 - ZIndex - Dialog on ModalSlide, Visual test', () => {
+    before(async () => {
+      const errorOnGo = await ZIndexCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display combobox correctly', async () => {
+      await browser.eyesOpen();
+      await (await ZIndexCO.getOpenModalSlide()).click();
+      await (await ZIndexCO.getOpenDialogOnModalSlide()).click();
+      await browser.pause(500);
+      const combobox = await ZIndexCO.getComboOnModalSlideDialog();
+      await combobox.click();
+      const snapshot = await browser.eyesCheckSnapshot(ZIndexCO.snapshotPath('zi-modalSlide-dialog-combobox'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display dropdown correctly', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Enter);
+      const dropDTrigger = await ZIndexCO.getDDOnModalSlideDialog();
+      await dropDTrigger.click();
+      const snapshot = await browser.eyesCheckSnapshot(ZIndexCO.snapshotPath('zi-modalSlide-dialog-dropdown'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: should display picker correctly', async () => {
+      await browser.eyesOpen();
+      const dropDTrigger = await ZIndexCO.getDDOnModalSlideDialog();
+      await dropDTrigger.click();
+      const header = await $('h3*=App Picker');
+      await header.scrollIntoView();
+      const appPickerTrigger = await ZIndexCO.getAppPickerTriggerOnSidePanelDialog();
+      await appPickerTrigger.click();
+      const snapshot = await browser.eyesCheckSnapshot(ZIndexCO.snapshotPath('zi-modalSlide-dialog-picker'));
+      await expect(snapshot).toEqual(0);
+    });
+    if (browser.capabilities.browserName !== 'Safari') {
+      it('04: should display date correctly', async () => {
+        await browser.eyesOpen();
+        await (await ZIndexCO.getPickerChip(2)).click();
+        await browser.keys(Key.Escape);
+        await (await ZIndexCO.getOpenDialogOnModalSlide()).click();
+        await browser.pause(500);
+        const dateTrigger = await ZIndexCO.getDateRangeOnModalSlideDialog();
+        await dateTrigger.click();
+        const snapshot = await browser.eyesCheckSnapshot(ZIndexCO.snapshotPath('zi-modalSlide-dialog-date'));
+        await expect(snapshot).toEqual(0);
+      });
+      it('05: should display nestest popover correctly', async () => {
+        await browser.eyesOpen();
+        await browser.keys(Key.Escape);
+        await (await ZIndexCO.getOpenDialogOnModalSlide()).click();
+        await (await ZIndexCO.getOpenNestestModalSlide()).click();
+        await browser.pause(500);
+        const nestest = await ZIndexCO.getNestestDD();
+        await nestest.click();
+        const snapshot = await browser.checkSnapshot(ZIndexCO.snapshotPath('zi-modalslide-dialog-nestest'));
+        await expect(snapshot).toEqual(0);
+      });
+    }
+  });
+}

package/z-index/ZindexCO.js

@@ -0,0 +1,155 @@
+/* eslint-disable max-lines */
+// eslint-disable-next-line import/no-relative-packages
+import { PATH_Z_INDEX } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export default class ZIndexCO extends PageObject {
+  static basic = new Urlbuilder(PATH_Z_INDEX, 'basic');
+
+  // All
+
+  static async getOpenSidePanel() {
+    return $('[data-testid="toggle-btn-sidepanel"]');
+  }
+
+  static async getOpenModalSlide() {
+    return $('[data-testid="toggle-btn-modal"]');
+  }
+
+  static async getDateTimeSidePanelTriggers() {
+    return $$('[data-testid="controlled-datetimepicker-side-panel"] button');
+  }
+
+  static async getDateTimeModalSlideTriggers() {
+    return $$('[data-testid="controlled-datetimepicker-modal-content"] button');
+  }
+
+  static async getDateRangeSidePanelTriggers() {
+    return $$('[data-testid="controlled-daterange-side-panel"] button');
+  }
+
+  static async getDateRangeModalSlideTriggers() {
+    return $$('[data-testid="controlled-daterange-modal-content"] button');
+  }
+
+  static async getAppPickerTriggers() {
+    return $$('[data-testid="app-picker__button"]');
+  }
+
+  static async getSliderThumbs() {
+    return $$('[data-testid="slider-thumb"]');
+  }
+
+  // Side Panel
+
+  static async getOpenDialogOnSidePanel() {
+    return $('[data-testid="open-dialog-dialog1-side-panel"]');
+  }
+
+  static async getComboOnSidePanel() {
+    return $('[data-testid="combobox-side-panel"]');
+  }
+
+  static async getDDButtonOnSidePanel() {
+    return $('[data-testid="dd-button-side-panel"]');
+  }
+
+  static getDateTimeTriggerOnSidePanel = async () => getElementByIndex(this.getDateTimeSidePanelTriggers, 0);
+
+  static getDateRangeTriggerOnSidePanel = async () => getElementByIndex(this.getDateRangeSidePanelTriggers, 0);
+
+  static getAppPickerTriggerOnSidePanel = async () => getElementByIndex(this.getAppPickerTriggers, 0);
+
+  // Modal Slide
+
+  static async getOpenDialogOnModalSlide() {
+    return $('[data-testid="open-dialog-dialog1-modal-content"]');
+  }
+
+  static async getComboOnModalSlide() {
+    return $('[data-testid="combobox-modal-content"]');
+  }
+
+  static async getDDButtonOnModalSlide() {
+    return $('[data-testid="dd-button-modal-content"]');
+  }
+
+  static getDateTimeTriggerOnModalSlide = async () => getElementByIndex(this.getDateTimeModalSlideTriggers, 0);
+
+  static getDateRangeTriggerOnModalSlide = async () => getElementByIndex(this.getDateRangeModalSlideTriggers, 0);
+
+  static getAppPickerTriggerOnModalSlide = async () => getElementByIndex(this.getAppPickerTriggers, 0);
+
+  // Dialog from side panel
+
+  static getToggleModalSlideWithinDialog() {
+    return $('[data-testid="toggle-btn"]');
+  }
+
+  static getComboOnSidePanelDialog() {
+    return $('[data-testid="combobox-dialog1-side-panel"]');
+  }
+
+  static getDDOnSidePanelDialog() {
+    return $('[data-testid="dd-button-dialog1-side-panel"]');
+  }
+
+  static getAppPickerTriggerOnSidePanelDialog = async () => getElementByIndex(this.getAppPickerTriggers, 4);
+
+  static getSliderOnSidePanelDialog = async () => getElementByIndex(this.getSliderThumbs, 8);
+
+  static getDateTimeOnSidePanelDialog() {
+    return $('[data-testid="controlled-datetimepicker-dialog1-side-panel"] button');
+  }
+
+  static getDateRangeOnSidePanelDialog() {
+    return $('[data-testid="ds-controlled-date-time-picker-calendar-trigger-icon"]');
+  }
+
+  // dialog from modalslide
+
+  static getComboOnModalSlideDialog() {
+    return $('[data-testid="combobox-dialog1-modal-content"]');
+  }
+
+  static getDDOnModalSlideDialog() {
+    return $('[data-testid="dd-button-dialog1-modal-content"  ]');
+  }
+
+  static getAppPickerTriggerOnModalSlideDialog = async () => getElementByIndex(this.getAppPickerTriggers, 8);
+
+  static getDateTimeOnModalSlideDialog() {
+    return $('[data-testid="controlled-datetimepicker-dialog1-modal-content"] button');
+  }
+
+  static getDateRangeOnModalSlideDialog() {
+    return $(
+      // eslint-disable-next-line max-len
+      '[data-testid="controlled-daterange-dialog1-modal-content"] [data-testid="ds-controlled-date-time-picker-calendar-trigger-icon"]',
+    );
+  }
+
+  // only useful on modalslide within dialog within modalslide
+  static async getNestedDDButtons() {
+    return $$('[data-testid="dd-button-dialog1-modal-content"]');
+  }
+
+  static getNestestDD = async () => getElementByIndex(this.getNestedDDButtons, 1);
+
+  // to give lost focus from picker
+
+  static async getOpenNestestModalSlide() {
+    return $('[data-testid="toggle-btn"]');
+  }
+
+  static async getChips() {
+    return $$('[data-testid="app-picker__chip"]');
+  }
+
+  static getPickerChip = async (index) => getElementByIndex(this.getChips, index);
+
+  // Snapshots
+  static snapshotPath(example = 'zindex') {
+    return PageObject.getSnapshotPathBuilder('ZIndex', example, 'z-index');
+  }
+}

package/zzz-eol/ds-date-range-selector/DSDateRangeSelector.axe-core.func.spec.js

@@ -0,0 +1,48 @@
+import { Key } from 'webdriverio';
+import DSDateRangeSelectorCO from './DSDateRangeSelectorCO';
+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-11837 - EOL: DateRangeSelector, migrated example -AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDateRangeSelectorCO.migrationExample.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display migrated example default state', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should display migrated example with expanded menu', async () => {
+      const dateRangeSel = await DSDateRangeSelectorCO.getExampleDRS();
+      await dateRangeSel.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('03: should display migrated example with option selected', async () => {
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Enter);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('04: should display with custom option menu open', async () => {
+      const dateRangeSel = await DSDateRangeSelectorCO.getExampleDRS();
+      await dateRangeSel.click();
+      const opt = await DSDateRangeSelectorCO.getOptionByIndex(5);
+      await opt.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('05: should display with custom option selected', async () => {
+      const dateRangeSel = await DSDateRangeSelectorCO.getButtonByIndex(1);
+      await dateRangeSel.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/zzz-eol/ds-date-range-selector/DSDateRangeSelector.func.spec.js

@@ -0,0 +1,22 @@
+import { Key } from 'webdriverio';
+import DSDateRangeSelectorCO from './DSDateRangeSelectorCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-11583 - EOL: DateRangeSelector, Basic -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDateRangeSelectorCO.basicUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display with custom option selected', async () => {
+      const dateRangeSel = await DSDateRangeSelectorCO.getExampleDRS();
+      await dateRangeSel.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Enter);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Enter);
+      const selectedOpt = await (await DSDateRangeSelectorCO.getExampleDRSText()).getText();
+      await expect(selectedOpt).toEqual('Yesterday');
+    });
+  });
+}

package/zzz-eol/ds-date-range-selector/DSDateRangeSelector.visual.spec.js

@@ -0,0 +1,115 @@
+import { Key } from 'webdriverio';
+import DSDateRangeSelectorCO from './DSDateRangeSelectorCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-11580 - EOL: DateRangeSelector, Basic -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDateRangeSelectorCO.dateInitUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display with custom option selected', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSDateRangeSelectorCO.snapshotPath('daterangesel-dateinit'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display with menu expanded', async () => {
+      await browser.eyesOpen();
+      const dateRangeSel = await DSDateRangeSelectorCO.getExampleDRS();
+      await dateRangeSel.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSDateRangeSelectorCO.snapshotPath('daterangesel-menuexpand'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display with custom option', async () => {
+      await browser.eyesOpen();
+      const customOpt = await DSDateRangeSelectorCO.getOptionByIndex(5);
+      await customOpt.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSDateRangeSelectorCO.snapshotPath('daterangesel-customoptmenu'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-11581 - EOL: DateRangeSelector, No custom opt -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDateRangeSelectorCO.disableCustomOptUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display without custom option', async () => {
+      await browser.eyesOpen();
+      const dateRangeSel = await DSDateRangeSelectorCO.getExampleDRS();
+      await dateRangeSel.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSDateRangeSelectorCO.snapshotPath('daterangesel-nocustom'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-11582 - EOL: DateRangeSelector, Form/Error -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDateRangeSelectorCO.withFormUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display with error', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSDateRangeSelectorCO.snapshotPath('daterangesel-error'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display with errored menu expanded', async () => {
+      await browser.eyesOpen();
+      const dateRangeSel = await DSDateRangeSelectorCO.getExampleDRS();
+      await dateRangeSel.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSDateRangeSelectorCO.snapshotPath('daterangesel-errormenu'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display with errored form with option selected', async () => {
+      await browser.eyesOpen();
+      const opt = await DSDateRangeSelectorCO.getOptionByIndex(2);
+      await opt.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSDateRangeSelectorCO.snapshotPath('daterangesel-erroropt'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-11836 - EOL: DateRangeSelector, migrated example -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDateRangeSelectorCO.migrationExample.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display migrated example default state', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSDateRangeSelectorCO.snapshotPath('daterecusel-default'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display migrated example with expanded menu', async () => {
+      await browser.eyesOpen();
+      const dateRangeSel = await DSDateRangeSelectorCO.getExampleDRS();
+      await dateRangeSel.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSDateRangeSelectorCO.snapshotPath('daterangesel-openmenu'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: should display migrated example with option selected', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Enter);
+      const snapshot = await browser.eyesCheckSnapshot(DSDateRangeSelectorCO.snapshotPath('daterangesel-optsel'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('04: should display with custom option menu open', async () => {
+      await browser.eyesOpen();
+      const dateRangeSel = await DSDateRangeSelectorCO.getExampleDRS();
+      await dateRangeSel.click();
+      const opt = await DSDateRangeSelectorCO.getOptionByIndex(5);
+      await opt.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSDateRangeSelectorCO.snapshotPath('daterangesel-customopt'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('05: should display with custom option selected', async () => {
+      await browser.eyesOpen();
+      const dateRangeSel = await DSDateRangeSelectorCO.getButtonByIndex(1);
+      await dateRangeSel.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSDateRangeSelectorCO.snapshotPath('daterangesel-customsel'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}