dimsum-e2e-tests 1.0.0-rc.1

package/ds-read-more/DSReadMore.visual.spec.js

@@ -0,0 +1,66 @@
+import DSReadMoreCO from './DSReadMoreCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-9563: Read More, basic functionality -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSReadMoreCO.truncatedUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Should display ReadMore truncated with the MORE button', async () => {
+      await (await DSReadMoreCO.getMoreLessText()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSReadMoreCO.snapshotPath('truncated-more'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: Should display ReadMore not truncated after click with LESS button', async () => {
+      const button = await DSReadMoreCO.getMoreLessButton();
+      await button.click();
+      const snapshot = await browser.checkSnapshot(DSReadMoreCO.snapshotPath('truncated-less'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-9564: Read More, not truncated on short texts -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSReadMoreCO.notTruncatedUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Should display ReadMore not truncated', async () => {
+      await (await DSReadMoreCO.getMoreLessText()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSReadMoreCO.snapshotPath('not-truncated'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-9565: ReadMore, Custom More/Less button -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSReadMoreCO.customButtonUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Should display ReadMore truncated with the MORE!!! button', async () => {
+      await (await DSReadMoreCO.getMoreLessText()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSReadMoreCO.snapshotPath('custom-button-more'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: Should display ReadMore not truncated after click with LESS!!! button', async () => {
+      const button = await DSReadMoreCO.getMoreLessButton();
+      await button.click();
+      const snapshot = await browser.checkSnapshot(DSReadMoreCO.snapshotPath('custom-button-less'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  if (!browser.capabilities['ice:options'].isTablet) {
+    describe('PUI-9566: Read More, with tooltip -Visual', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSReadMoreCO.withTooltip.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('Should display tooltip on trigger hover', async () => {
+        await browser.eyesOpen();
+        const tooltipTrigger = await DSReadMoreCO.getTooltipTrigger();
+        await mouseOver(tooltipTrigger, 1, 1);
+        const snapshot = await browser.eyesCheckSnapshot(DSReadMoreCO.snapshotPath('readmore-tooltip'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+  }
+}

package/ds-read-more/DSReadMoreCO.js

@@ -0,0 +1,52 @@
+import { PATH_E2E_READMORE } from '../../environments/storybook/paths';
+import { Urlbuilder, PageObject } from '../helpers';
+
+export default class DSReadMoreCO extends PageObject {
+  // Desktop
+  static truncatedUrl = new Urlbuilder(PATH_E2E_READMORE, 'truncated-test');
+
+  static notTruncatedUrl = new Urlbuilder(PATH_E2E_READMORE, 'not-truncated-test');
+
+  static customButtonUrl = new Urlbuilder(PATH_E2E_READMORE, 'custom-button-test');
+
+  static withTooltip = new Urlbuilder(PATH_E2E_READMORE, 'with-tooltip-test');
+
+  static widthChange = new Urlbuilder(PATH_E2E_READMORE, 'width-change');
+
+  static async getMoreLessButton() {
+    return $('[data-testid="ds-read_more-button"]');
+  }
+
+  static async getTooltipTriggers() {
+    return $$('[data-testid="ds-tooltip-v3-trigger-wrapper"]');
+  }
+
+  static async getTooltipTrigger() {
+    return $('[data-testid="ds-tooltip-v3-trigger-wrapper"]');
+  }
+
+  static async getTooltip() {
+    return $('[data-testid="ds-tooltip-v3-tooltip-text-wrapper"]');
+  }
+
+  static async getMoreLessText() {
+    return $('[data-testid="ds-read_more-text"]');
+  }
+
+  static async getTextBox() {
+    return $('div*=This is a very long');
+  }
+
+  static async getButton() {
+    return $('[data-testid="ds-button"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'truncated') {
+    return PageObject.getSnapshotPathBuilder('ReadMore', example);
+  }
+
+  // selectors
+  // actions
+  // utils
+}

package/ds-ribbon/DSRibbon.visual.spec.js

@@ -0,0 +1,16 @@
+import DSRibbonCO from './DSRibbonCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-4121 - Ribbon visual test', () => {
+    beforeEach(async () => {
+      const errorOnGo = await DSRibbonCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+      const ribbon = await $('div*=Fluid');
+      await ribbon.waitForDisplayed({ timeout: 10000 });
+    });
+    it('should render a basic Ribbon', async () => {
+      const snapshot = await browser.checkSnapshot(DSRibbonCO.snapshotPath('ribbon'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-ribbon/DSRibbonCO.js

@@ -0,0 +1,15 @@
+import { PATH_RIBBON } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSRibbonCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_RIBBON, 'basic');
+
+  static async getRibbon() {
+    return $('[data-testid="button-wrapper"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Ribbon', example, 'ds-modal');
+  }
+}

package/ds-separator-v2/DSSeparatorV2.visual.spec.js

@@ -0,0 +1,14 @@
+import DSSeparatorV2 from './DSSeparatorV2CO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8197 - Separator - visual test, other options', () => {
+    before(async () => {
+      const errorOnGo = await DSSeparatorV2.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the separator v2 correctly', async () => {
+      const snapshot = await browser.checkSnapshot(DSSeparatorV2.snapshotPath('separator-basic'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-separator-v2/DSSeparatorV2CO.js

@@ -0,0 +1,11 @@
+import { PATH_SEPARATOR_V2 } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSSeparatorV2 extends PageObject {
+  static basicURL = new Urlbuilder(PATH_SEPARATOR_V2, 'basic');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('SeparatorV2', example, 'ds-separator-v2');
+  }
+}

package/ds-shuttle/DSShuttle-infinite-scroll.func.spec.js

@@ -0,0 +1,67 @@
+/* eslint-env mocha */
+import { DSShuttleCO } from './DSShuttleCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-3332 - Shuttle - infinite scroll', () => {
+    before(async () => {
+      const errorOnGo = await DSShuttleCO.infiniteScrollURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display Progress Indicator when scroll to the bottom', async () => {
+      let loadingBanner = await DSShuttleCO.loadingBanner();
+      await expect(loadingBanner).not.toBeDisplayed();
+
+      if (!browser.capabilities['ice:options'].isTablet) {
+        const item = await DSShuttleCO.getItem(13);
+        await item.scrollIntoView();
+      } else {
+        const item = await DSShuttleCO.lastItem();
+        await item.scrollIntoView();
+      }
+
+      loadingBanner = await DSShuttleCO.loadingBanner();
+      await expect(loadingBanner).toBeDisplayed();
+    });
+  });
+  describe('PUI-3333 - Shuttle - list items - add/remove one item', () => {
+    beforeEach(async () => {
+      const errorOnGo = await DSShuttleCO.infiniteScrollURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should add one item to target list', async () => {
+      let targetItemsLenght = (await DSShuttleCO.targetItems()).length;
+      await expect(targetItemsLenght).toEqual(0);
+      await (await DSShuttleCO.sourceItemMoveBtn(0)).click();
+      targetItemsLenght = (await DSShuttleCO.targetItems()).length;
+      await expect(targetItemsLenght).toEqual(1);
+    });
+    it('should remove one item from target list', async () => {
+      await (await DSShuttleCO.sourceItemMoveBtn(0)).click();
+      await (await DSShuttleCO.clearAllBtn()).click();
+      const targetItemsLenght = (await DSShuttleCO.targetItems()).length;
+      await expect(targetItemsLenght).toEqual(0);
+    });
+  });
+  describe('PUI-3334 - Shuttle - list items - add/remove some items', () => {
+    before(async () => {
+      const errorOnGo = await DSShuttleCO.infiniteScrollURL.go();
+      if (errorOnGo) throw errorOnGo;
+      const searchBtn = await DSShuttleCO.searchButton();
+      await searchBtn.waitForDisplayed({ timeout: 10000 });
+    });
+    it('should add some items to target list', async () => {
+      const itemsLenght = (await DSShuttleCO.targetItems()).length;
+      await expect(itemsLenght).toEqual(0);
+      await (await DSShuttleCO.itemByName('Accounting User (accounting)')).click();
+      await (await DSShuttleCO.itemByName('Aditi Mehra (aditilo)')).click();
+      await (await DSShuttleCO.listPanelBtn()).click();
+      const targetItemsLenght = (await DSShuttleCO.targetItems()).length;
+      await expect(targetItemsLenght).toEqual(2);
+    });
+    it('should remove all items from target list', async () => {
+      await (await DSShuttleCO.clearAllBtn()).click();
+      const targetItemsLenght = (await DSShuttleCO.targetItems()).length;
+      await expect(targetItemsLenght).toEqual(0);
+    });
+  });
+}

package/ds-shuttle/DSShuttle-infinite-scroll.visual.spec.js

@@ -0,0 +1,65 @@
+import { Key } from 'webdriverio';
+import { DSShuttleCO } from './DSShuttleCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-3336 - Shuttle Infinite Scroll', () => {
+    beforeEach(async () => {
+      const errorOnGo = await DSShuttleCO.infiniteScrollURL.go();
+      if (errorOnGo) throw errorOnGo;
+      const srchBtn = await DSShuttleCO.searchButton();
+      await srchBtn.waitForDisplayed({ timeout: 10000 });
+    });
+    it('should display Shuttle with options', async () => {
+      const snapshot = await browser.checkSnapshot(DSShuttleCO.snapshotPath());
+      await expect(snapshot).toEqual(0);
+    });
+    it('should not display blank space in the bottom of the list', async () => {
+      await (await DSShuttleCO.lastItem()).scrollIntoView();
+      const snapshot = await browser.checkSnapshot(DSShuttleCO.snapshotPath('infinite-scroll-scroll'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-3337 - Shuttle Infinite Scroll - search', () => {
+    beforeEach(async () => {
+      const errorOnGo = await DSShuttleCO.infiniteScrollURL.go();
+      if (errorOnGo) throw errorOnGo;
+      const srchBtn = await DSShuttleCO.searchButton();
+      await srchBtn.waitForDisplayed({ timeout: 10000 });
+    });
+    it('should be able to search', async () => {
+      await (await DSShuttleCO.searchButton()).waitForDisplayed({ timeout: 5000 });
+      await (await DSShuttleCO.searchButton()).click();
+      await (await DSShuttleCO.searchInput()).setValue('unexisting item');
+      await browser.keys(Key.Return);
+      const snapshot = await browser.checkSnapshot(DSShuttleCO.snapshotPath('shuttle--search'));
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('should be able to close search bar', async () => {
+      await (await DSShuttleCO.searchButton()).waitForDisplayed({ timeout: 5000 });
+      await (await DSShuttleCO.searchButton()).click();
+      await (await DSShuttleCO.searchInput()).setValue('unexisting item');
+      await browser.keys(Key.Return);
+      await (await DSShuttleCO.clearButton()).click();
+      const snapshot = await browser.checkSnapshot(DSShuttleCO.snapshotPath('shuttle--clear-search'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6031 - Shuttle - Multiple items selection', () => {
+    before(async () => {
+      const errorOnGo = await DSShuttleCO.infiniteScrollURL.go();
+      if (errorOnGo) throw errorOnGo;
+      const searchBtn = await DSShuttleCO.searchButton();
+      await searchBtn.waitForDisplayed({ timeout: 10000 });
+    });
+    it('should display list panel button', async () => {
+      await (await DSShuttleCO.itemByName('Accounting User (accounting)')).click();
+      await (await DSShuttleCO.itemByName('Aditi Mehra (aditilo)')).click();
+      await (await DSShuttleCO.itemByName('Admin User (admin)')).click();
+      const snapshot = await browser.checkSnapshot(DSShuttleCO.snapshotPath('shuttle--multiple-items-selection'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-shuttle/DSShuttle-truncate-option.visual.spec.js

@@ -0,0 +1,23 @@
+import { DSShuttleCO } from './DSShuttleCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-3338 - Shuttle Truncate Option', () => {
+    beforeEach(async () => {
+      const errorOnGo = await DSShuttleCO.truncateURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display popover', async () => {
+      await (await DSShuttleCO.sourceItem(0)).waitForDisplayed({ timeout: 10000 });
+      await mouseOver(await DSShuttleCO.sourceItemSpan(0), 5, 5);
+      await browser.pause(1000);
+      const popover = await DSShuttleCO.getPopoverContainer();
+      await expect(popover).toBeDisplayed();
+    });
+    it('should display Shuttle with a truncate label', async () => {
+      await (await DSShuttleCO.sourceItem(0)).waitForDisplayed({ timeout: 10000 });
+      const snapshot = await browser.checkSnapshot(DSShuttleCO.snapshotPath('shuttle--truncate-option'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-shuttle/DSShuttle.func.spec.js

@@ -0,0 +1,138 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import { DSShuttleCO } from './DSShuttleCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-4463 - Shuttle Controlled V2 - async loading', () => {
+    beforeEach(async () => {
+      const errorOnGo = await DSShuttleCO.asyncLoadingV2.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('button should be disabled when prop forceNotMovable is true', async () => {
+      const rightBtn = await DSShuttleCO.sourceItemMoveBtn(2);
+      const rightBtnDisabled = await rightBtn.getAttribute('aria-disabled');
+      await expect(rightBtnDisabled).toBe('true');
+    });
+    it('should display children items in source panel', async () => {
+      await (await DSShuttleCO.sourceItemDrillButton(1)).click();
+      await DSShuttleCO.waitListLoaded('source');
+      let sourceItems = await DSShuttleCO.sourceItems();
+      await expect(sourceItems).toHaveLength(2);
+      await (await DSShuttleCO.breadcrumbLevel('Category')).click();
+      await browser.pause(1000);
+      const sourceItemsLenght = (await DSShuttleCO.sourceItems()).length;
+      await expect(sourceItemsLenght).toBe(5);
+      await (await DSShuttleCO.sourceItemDrillButton(1)).click();
+      await browser.pause(1000);
+      await DSShuttleCO.waitListLoaded('source');
+      sourceItems = await DSShuttleCO.sourceItems();
+      await expect(sourceItems).toHaveLength(2);
+    });
+    it('should display children items in target panel', async () => {
+      await browser.pause(3000);
+      await (await DSShuttleCO.sourceItemMoveBtn(1)).click();
+      await browser.pause(1000);
+      await (await DSShuttleCO.targetItem(0)).waitForDisplayed();
+      await (await DSShuttleCO.targetItemDrillButton(0)).click();
+      await browser.pause(1000);
+      await DSShuttleCO.waitListLoaded('target');
+      let targetItems = await DSShuttleCO.targetItems();
+      await expect(targetItems).toHaveLength(2);
+      await (await DSShuttleCO.breadcrumbLevel('Selected Items')).click();
+      await browser.pause(1000);
+      targetItems = await DSShuttleCO.targetItems();
+      await expect(targetItems).toHaveLength(1);
+    });
+  });
+  describe('PUI-4547 - Shuttle Controlled V2 - search', () => {
+    beforeEach(async () => {
+      const errorOnGo = await DSShuttleCO.controlledURLV2.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should not filter by id', async () => {
+      await (await DSShuttleCO.sourceItemDrillButton(3)).waitForDisplayed();
+      await (await DSShuttleCO.sourceItemDrillButton(3)).click();
+      await (await DSShuttleCO.searchButton()).click();
+      // the id of `seven`
+      await (await DSShuttleCO.searchInput()).setValue('0');
+      await browser.keys(Key.Return);
+      // no items filtered by search
+      const sourceItems = await DSShuttleCO.sourceItems();
+      await expect(sourceItems).toHaveLength(0);
+    });
+    it('should filter only by name', async () => {
+      await (await DSShuttleCO.sourceItemDrillButton(0)).waitForDisplayed();
+      await (await DSShuttleCO.searchButton()).click();
+      // ignore case filter all labels with parent on it
+      await (await DSShuttleCO.searchInput()).setValue('pArEnT');
+      await browser.keys(Key.Return);
+      const sourceItems = await DSShuttleCO.sourceItems();
+      await expect(sourceItems).toHaveLength(3);
+    });
+  });
+  describe('Shuttle Controlled V2 - drill down', () => {
+    beforeEach(async () => {
+      const errorOnGo = await DSShuttleCO.controlledURLV2.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should drill down on source', async () => {
+      await browser.pause(3000);
+      await (await DSShuttleCO.sourceItemDrillButton(1)).waitForDisplayed();
+      await (await DSShuttleCO.sourceItemDrillButton(1)).click();
+      await browser.pause(1000);
+      await (await DSShuttleCO.itemByName('Item id: 33')).waitForDisplayed();
+      await (await DSShuttleCO.breadcrumbLevel('Item id: 2')).waitForDisplayed();
+      const sourceItems = await DSShuttleCO.sourceItems();
+      await expect(sourceItems).toHaveLength(2);
+    });
+    it('should drill down on target', async () => {
+      browser.pause(3000);
+      await (await DSShuttleCO.sourceItemDrillButton(1)).waitForDisplayed();
+      await (await DSShuttleCO.sourceItemMoveBtn(3)).click();
+      await (await DSShuttleCO.targetItem(0)).waitForDisplayed({ timeout: 10000 });
+      await (await DSShuttleCO.targetItemDrillButton(0)).waitForClickable();
+      await (await DSShuttleCO.targetItemDrillButton(0)).click();
+      await browser.pause(1000);
+      // wait for displayed
+      await (await DSShuttleCO.itemByName('id: seven')).waitForDisplayed({ timeout: 10000 });
+      await (await DSShuttleCO.breadcrumbLevel('Item id: 6')).waitForDisplayed();
+      const targetItems = await DSShuttleCO.targetItems();
+      await expect(targetItems).toHaveLength(1);
+    });
+  });
+
+  describe('PUI-5210 - Shuttle onSearch callback', () => {
+    before(async () => {
+      const errorOnGo = await DSShuttleCO.onSearchCallbackURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should trigger on search callback once', async () => {
+      await (await DSShuttleCO.sourceItemDrillButton(1)).waitForDisplayed();
+
+      await (await DSShuttleCO.searchButton()).click();
+      await (await DSShuttleCO.searchInput()).setValue('aditi');
+      await browser.keys(Key.Return);
+      await (await DSShuttleCO.itemByName('Aditi Mehra (aditilo)')).waitForDisplayed();
+      const searchCbCounterTxt = await (await DSShuttleCO.getOnSearchCbCounter()).getText();
+      await expect(searchCbCounterTxt).toBe('1');
+    });
+  });
+
+  describe('PUI-5984 - Shuttle - Shuttle add items fast', () => {
+    before(async () => {
+      const errorOnGo = await DSShuttleCO.fastItemsAddURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should not duplicate items on target', async () => {
+      await DSShuttleCO.waitForShuttleToBeDisplayed();
+      const moveBtns = await DSShuttleCO.getSourceMoveButtons();
+      await moveBtns[10].click();
+      await moveBtns[9].click();
+      await moveBtns[8].click();
+      await moveBtns[7].click();
+      const targetItemsLenght = (await DSShuttleCO.targetItems()).length;
+      await expect(targetItemsLenght).toBe(4);
+    });
+  });
+}

package/ds-shuttle/DSShuttleCO.js

@@ -0,0 +1,193 @@
+import { PATH_END_OF_LIFE_SHUTTLE, PATH_E2E_SHUTTLE } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export class DSShuttleCO extends PageObject {
+  static infiniteScrollURL = new Urlbuilder(PATH_END_OF_LIFE_SHUTTLE, 'infinite-scroll');
+
+  static fastItemsAddURL = new Urlbuilder(PATH_E2E_SHUTTLE, 'async-add-fast');
+
+  static onSearchCallbackURL = new Urlbuilder(PATH_E2E_SHUTTLE, 'on-search-callback');
+
+  static truncateURL = new Urlbuilder(PATH_END_OF_LIFE_SHUTTLE, 'truncate');
+
+  static controlledURL = new Urlbuilder(PATH_END_OF_LIFE_SHUTTLE, 'deprecated-controlled');
+
+  static asyncLoading = new Urlbuilder(PATH_END_OF_LIFE_SHUTTLE, 'deprecated-loading-state');
+
+  static controlledURLV2 = new Urlbuilder(PATH_END_OF_LIFE_SHUTTLE, 'controlled-basic-v-2');
+
+  static asyncLoadingV2 = new Urlbuilder(PATH_END_OF_LIFE_SHUTTLE, 'async-load-controlled-v-2');
+
+  static basicURL = new Urlbuilder(PATH_END_OF_LIFE_SHUTTLE, 'basic');
+
+  static snapshotPath(example = 'infinite-scroll') {
+    return PageObject.getSnapshotPathBuilder('Shuttle', example, 'ds-shuttle');
+  }
+
+  // selectors
+  static async getPopoverContainer() {
+    return $('[data-testid="popover-container"]');
+  }
+
+  static async getListItems() {
+    return $$('[role="listitem"]');
+  }
+
+  static async getOnSearchCbCounter() {
+    return $('[data-testid="ds-storybook-count"]');
+  }
+
+  static async getItem(index) {
+    return $$('[role="listitem"]')[index];
+  }
+
+  static async loadingBanner() {
+    return $('//div[contains(@class,"em-ds-shuttle-infinite-scroll-indicator--opened")]');
+  }
+
+  static async searchButton() {
+    return $('[data-testid="shuttle-header-search-toggle"]');
+  }
+
+  static async searchInput() {
+    return $('[data-testid="ds-input_main-component"]');
+  }
+
+  static async clearButton() {
+    return $('[data-testid="ds-input_clearable-btn"]');
+  }
+
+  static async sourceItemDrillButton(index) {
+    // eslint-disable-next-line no-return-await
+    return await (await $$('[data-testid="source-list-item"]'))[index].$('[data-testid="shuttle__drill-btn"]');
+  }
+
+  static async moveButton() {
+    return $$('/button[data-testid="ds-shuttle__move-button"]')[1];
+  }
+
+  static async getItemMoveButton(item) {
+    return item.$('[data-testid="ds-shuttle__move-button"]');
+  }
+
+  static async breadcrumbContainer(index) {
+    return $$('[data-testid="breadcrumb-nav-container"]')[index];
+  }
+
+  static async targetCloseBtn() {
+    return $('[data-testid="ds-shuttle__close-button"]');
+  }
+
+  static async clearAllBtn() {
+    return $('button=CLEAR ALL');
+  }
+
+  static async sourceItemMoveBt1n(index) {
+    // eslint-disable-next-line no-return-await
+    return await (await $$('[data-testid="source-list-item"]'))[index].$('[data-testid="ds-shuttle__move-button"]');
+  }
+
+  static async sourceItemMoveBtn(index) {
+    const listItem = await browser.waitUntil(
+      async () => {
+        const items = await $$('[data-testid="source-list-item"]');
+        if (items.length <= index) return false;
+        return items[index];
+      },
+      {
+        timeout: 3000,
+        timeoutMsg: 'Desired list item not displayed after 3 seconds',
+      },
+    );
+    return listItem.$('[data-testid="ds-shuttle__move-button"]');
+  }
+
+  static async itemByName(name) {
+    return $(`span*=${name}`);
+  }
+
+  static async breadcrumbLevel(name) {
+    return $(`a*=${name}`);
+  }
+
+  static async sourceItems() {
+    return $$('//li[@data-testid="source-list-item"]');
+  }
+
+  static async sourceMoveButtons() {
+    return $$('//li[@data-testid="source-list-item"]');
+  }
+
+  static async getSourceMoveButtons() {
+    return $$('[data-testid="ds-shuttle__move-button"]');
+  }
+
+  static async sourceItem(index) {
+    return $$('[data-testid="source-list-item"]')[index];
+  }
+
+  static async sourceItemSpan(index) {
+    return $$('[data-testid="source-list-item"] label span')[index];
+  }
+
+  static async targetItems() {
+    return $$('[data-testid="target-list-item"]');
+  }
+
+  static async targetItem(index) {
+    return $$('[data-testid="target-list-item"]')[index];
+  }
+
+  static async targetItemDrillButton(index) {
+    return $$('//li[@data-testid="target-list-item"]//button[@data-testid="shuttle__drill-btn"]')[index];
+  }
+
+  static async listPanelBtn() {
+    return $('[data-testid="list-panel-btn"]');
+  }
+
+  static async loadingList() {
+    return $('[data-testid="shuttle__loading-indicator"]');
+  }
+
+  static async getAsyncLabel() {
+    return $('[span=Async]');
+  }
+
+  static async getNotAsyncLabel() {
+    return $('//li[@data-testid="source-list-item"]//span[contains(text(), "Async no results")]');
+  }
+
+  static async getNotItemsSelected() {
+    return $('span*=No Items Selected');
+  }
+
+  // actions
+  static async lastItem() {
+    const len = (await this.getListItems()).length;
+    return this.getItem(len - 1);
+  }
+
+  static async open(component) {
+    await browser.url(this.getUrl(component));
+    // eslint-disable-next-line wdio/no-pause
+    await browser.pause(1000);
+    await (await this.searchButton()).waitForDisplayed({ timeout: 10000 });
+  }
+
+  static async waitForShuttleToBeDisplayed() {
+    await $('[data-testid="source-list-item"]').waitForDisplayed();
+  }
+
+  static async waitListLoaded(panel = 'source') {
+    await (await this.loadingList()).waitForExist({ timeout: 5000 });
+    await (await this.loadingList()).waitForExist({ timeout: 5000, reverse: true });
+    if (panel === 'source') {
+      await (await this.sourceItem(0)).waitForDisplayed({ timeout: 10000 });
+    } else {
+      await (await this.targetItem(0)).waitForDisplayed({ timeout: 10000 });
+    }
+  }
+}
+
+export default new DSShuttleCO();