dimsum-e2e-tests 1.0.35 → 1.1.0

package/ds-indeterminate-progress-indicator/DSIndetermintateProgressIndicator.axe-core.func.spec.js

@@ -0,0 +1,31 @@
+import DSIndeterminateProgressIndicatorCO from './DSIndeterminateProgressIndicatorCO';
+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-17525 - IndeterminateProgressIndicator - dynamic title', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSIndeterminateProgressIndicatorCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should pass accessibility check', async () => {
+      const title = await DSIndeterminateProgressIndicatorCO.getIndeterminateProgressIndicatorTitle();
+      await title.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should display a diferent title after 3 seconds and pass accessibility check', async () => {
+      const title = await DSIndeterminateProgressIndicatorCO.getIndeterminateProgressIndicatorTitle();
+      await title.waitForDisplayed();
+      // eslint-disable-next-line wdio/no-pause
+      await browser.pause(3000);
+      await expect(title).toHaveText(expect.stringContaining('Title changed'));
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

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

@@ -12,14 +12,14 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await menuItemWrapper.waitForDisplayed();
       const menuItem2 = await DSMenuItems.getMenuItem('2');
       await menuItem2.click();
-      const actionTriggered = DSMenuItems.getActionTriggered();
-      await expect(actionTriggered).toHaveTextContaining('option id #2 triggered');
+      const actionTriggered = await DSMenuItems.getActionTriggered();
+      await expect(actionTriggered).toHaveText(expect.stringContaining('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');
+      const actionTriggered = await DSMenuItems.getActionTriggered();
+      await expect(actionTriggered).toHaveText(expect.stringContaining('option id #3 triggered'));
     });
   });
   describe('PUI-11567 - DSMenuItems:: Single Menu Item - func', () => {
@@ -32,16 +32,16 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await menuItemWrapper.waitForDisplayed();
       const menuItem3 = await DSMenuItems.getMenuItem('3');
       await menuItem3.click();
-      const innerRef = DSMenuItems.getInnerRef();
-      await expect(innerRef).toHaveTextContaining('Single menu item 3');
+      const innerRef = await DSMenuItems.getInnerRef();
+      await expect(innerRef).toHaveText(expect.stringContaining('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 innerRef = await DSMenuItems.getInnerRef();
       const menuItem4 = await DSMenuItems.getMenuItem('4');
-      await expect(innerRef).toHaveTextContaining('Single menu item 4');
+      await expect(innerRef).toHaveText(expect.stringContaining('Single menu item 4'));
       await expect(menuItem4).toHaveAttribute('aria-selected', 'true');
     });
   });
@@ -55,16 +55,16 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await menuItemWrapper.waitForDisplayed();
       const menuItem3 = await DSMenuItems.getMenuItem('3');
       await menuItem3.click();
-      const innerRef = DSMenuItems.getInnerRef();
-      await expect(innerRef).toHaveTextContaining('multi menu item 3');
+      const innerRef = await DSMenuItems.getInnerRef();
+      await expect(innerRef).toHaveText(expect.stringContaining('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');
+      const innerRef = await DSMenuItems.getInnerRef();
+      await expect(innerRef).toHaveText(expect.stringContaining('multi menu item 4'));
       await expect(menuItem4).toHaveAttribute('aria-selected', 'true');
     });
   });
@@ -78,16 +78,16 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       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');
+      const innerRef = await DSMenuItems.getInnerRef();
+      await expect(innerRef).toHaveText(expect.stringContaining('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');
+      const innerRef = await DSMenuItems.getInnerRef();
+      await expect(innerRef).toHaveText(expect.stringContaining('section menu item 4'));
       await expect(menuItem4).toHaveAttribute('aria-selected', 'true');
     });
   });

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

@@ -10,10 +10,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     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,
-      );
+      const snapshot = await browser.checkSnapshot(DSMenuItems.snapshotPath('ds-menu-items-action-menu'));
       await expect(snapshot).toEqual(0);
     });
     it('02: should display action menu items correctly - hover and click', async () => {
@@ -25,10 +22,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       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,
-      );
+      const snapshot = await browser.checkSnapshot(DSMenuItems.snapshotPath('ds-menu-items-action-menu-states'));
       await expect(snapshot).toEqual(0);
     });
   });
@@ -40,10 +34,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     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,
-      );
+      const snapshot = await browser.checkSnapshot(DSMenuItems.snapshotPath('ds-menu-items-single-menu'));
       await expect(snapshot).toEqual(0);
     });
     it('02: should display single menu items correctly - hover and click', async () => {
@@ -53,10 +44,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       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,
-      );
+      const snapshot = await browser.checkSnapshot(DSMenuItems.snapshotPath('ds-menu-items-single-menu-states'));
       await expect(snapshot).toEqual(0);
     });
   });
@@ -68,10 +56,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     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,
-      );
+      const snapshot = await browser.checkSnapshot(DSMenuItems.snapshotPath('ds-menu-items-multi-menu'));
       await expect(snapshot).toEqual(0);
     });
     it('02: should display action menu items correctly - hover and click', async () => {
@@ -83,10 +68,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await menuItem1.click();
       await menuItem3.click();
       await mouseOver(menuItem2);
-      const snapshot = await browser.checkRegionSnapshot(
-        DSMenuItems.snapshotPath('ds-menu-items-multi-menu-states'),
-        menuItemWrapper,
-      );
+      const snapshot = await browser.checkSnapshot(DSMenuItems.snapshotPath('ds-menu-items-multi-menu-states'));
       await expect(snapshot).toEqual(0);
     });
   });
@@ -98,10 +80,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     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,
-      );
+      const snapshot = await browser.checkSnapshot(DSMenuItems.snapshotPath('ds-menu-items-section-menu'));
       await expect(snapshot).toEqual(0);
     });
     it('02: should display section menu items correctly - hover and click', async () => {
@@ -113,10 +92,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       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,
-      );
+      const snapshot = await browser.checkSnapshot(DSMenuItems.snapshotPath('ds-menu-items-section-menu-states'));
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-menu-item/DSMenuItemsCO.js

@@ -12,6 +12,10 @@ export default class DSMenuItemsCO extends PageObject {
 
   static skeletonMenuItem = new Urlbuilder(PATH_E2E_MENU_ITEMS, 'skeleton-menu-item-test');
 
+  static applyAriaDisabled = new Urlbuilder(PATH_E2E_MENU_ITEMS, 'apply-aria-disabled-test');
+
+  static readOnly = new Urlbuilder(PATH_E2E_MENU_ITEMS, 'read-only-test');
+
   static async getMenuItemsWrapper() {
     return $('[data-testid="menu-items-wrapper"]');
   }

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

@@ -0,0 +1,35 @@
+/* eslint-disable wdio/no-pause */
+import { axeCoreCheck } 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-14414 - [MenuItems] applyAriaDisabled prop - axe-core test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.applyAriaDisabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display single menu items with aria-disabled focused and pass axecore test', async () => {
+      const menuItem2 = await DSMenuItems.getMenuItem('2');
+      await menuItem2.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should display action menu items with aria-disabled focused and pass axecore test', async () => {
+      const menuItem6 = await DSMenuItems.getMenuItem('6');
+      await menuItem6.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('03: should display multi menu items with aria-disabled focused and pass axecore test', async () => {
+      const menuItem10 = await DSMenuItems.getMenuItem('10');
+      await menuItem10.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

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

@@ -0,0 +1,68 @@
+import { Key } from 'webdriverio';
+import DSMenuItems from '../DSMenuItemsCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-14413 - [MenuItems] applyAriaDisabled prop - visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.applyAriaDisabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: aria-disabled single menu item should be focused and not selected - mouse', async () => {
+      await browser.eyesOpen();
+      const menuItem2 = await DSMenuItems.getMenuItem('2');
+      await menuItem2.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-single-aria-disabled-mouse'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: aria-disabled single menu item should be focused and not selected', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-single-aria-disabled-kb-nav'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: aria-disabled action menu item should be focused and not selected - mouse', async () => {
+      await browser.eyesOpen();
+      const menuItem6 = await DSMenuItems.getMenuItem('6');
+      await menuItem6.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-action-aria-disabled-mouse'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('04: aria-disabled action menu item should be focused and not selected', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Enter);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-action-aria-disabled-kb-nav'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('05: aria-disabled multi menu item should be focused and not selected - mouse', async () => {
+      await browser.eyesOpen();
+      const menuItem10 = await DSMenuItems.getMenuItem('10');
+      await menuItem10.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-multi-aria-disabled-mouse'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('06: aria-disabled multi menu item should be focused and not selected', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Enter);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-multi-aria-disabled-kb-nav'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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

@@ -0,0 +1,35 @@
+/* eslint-disable wdio/no-pause */
+import { axeCoreCheck } 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-15352 - [MenuItems] readOnly prop - axe-core test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.readOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display single menu items with readOnly focused and pass axecore test', async () => {
+      const menuItem2 = await DSMenuItems.getMenuItem('2');
+      await menuItem2.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should display action menu items with readOnly focused and pass axecore test', async () => {
+      const menuItem6 = await DSMenuItems.getMenuItem('6');
+      await menuItem6.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('03: should display multi menu items with readOnly focused and pass axecore test', async () => {
+      const menuItem10 = await DSMenuItems.getMenuItem('10');
+      await menuItem10.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

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

@@ -0,0 +1,66 @@
+import { Key } from 'webdriverio';
+import DSMenuItems from '../DSMenuItemsCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-15353 - [MenuItems] applyAriaDisabled prop - visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.readOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: read-only single menu item should be focused and not selected - mouse', async () => {
+      await browser.eyesOpen();
+      const menuItem2 = await DSMenuItems.getMenuItem('2');
+      await menuItem2.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-single-read-only-mouse'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: read-only single menu item should be focused and not selected', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-single-read-only-kb-nav'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: read-only action menu item should be focused and not selected - mouse', async () => {
+      await browser.eyesOpen();
+      const menuItem6 = await DSMenuItems.getMenuItem('6');
+      await menuItem6.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-action-read-only-mouse'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('04: read-only action menu item should be focused and not selected', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-action-read-only-kb-nav'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('05: read-only multi menu item should be focused and not selected - mouse', async () => {
+      await browser.eyesOpen();
+      const menuItem10 = await DSMenuItems.getMenuItem('10');
+      await menuItem10.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSMenuItems.snapshotPath('ds-menu-items-multi-read-only-mouse'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('06: read-only multi menu item should be focused and not selected', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Enter);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-multi-read-only-kb-nav'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-number-range-field/NumberRangeFieldCO.js

@@ -8,7 +8,7 @@ export const knobs = {
   maxTo: 'knob-maxTo',
 };
 export default class NumberRangeField extends PageObject {
-  static basicURL = new Urlbuilder(PATH_NUMBER_RANGE_FIELD, 'basic');
+  static basicURL = new Urlbuilder(PATH_NUMBER_RANGE_FIELD, 'widget-usage');
 
   static async getFromInput() {
     return $('[data-testid="ds-number-range-field__from-input"]');

package/ds-page-number/DSPageNumberCO.js

@@ -3,7 +3,7 @@ import { PageObject, Urlbuilder } from '../helpers';
 
 export default class DSPageNumberCO extends PageObject {
   // Desktop
-  static basicURL = new Urlbuilder(PATH_PAGE_NUMBER, 'basic');
+  static basicURL = new Urlbuilder(PATH_PAGE_NUMBER, 'widget-usage');
 
   static getUrl(component = 'basic') {
     return PageObject.getUrl(PATH_PAGE_NUMBER, component);

package/ds-query-builder/DSQueryBuilderCO.js

@@ -119,7 +119,7 @@ export default class DSQueryBuilderCO extends PageObject {
   static async getTextBox(tbNumber) {
     return browser.waitUntil(
       async () => {
-        const tb = await $$('[data-testid="ds-input-text-input"]');
+        const tb = await $$('[data-testid="ds-inputtext-input"]');
         return tb.length > tbNumber ? tb[tbNumber] : false;
       },
       {

package/ds-shuttle-v2/DSShuttleV2CO.js

@@ -1,6 +1,41 @@
 import { PATH_E2E_SHUTTLE_V2 } from '../../environments/storybook/paths';
 import { PageObject, Urlbuilder } from '../helpers';
-import { DSShuttleV2DataTestIds } from '../../packages/data/ds-shuttle-v2/dist/cjs/config/DSShuttleV2Definitions';
+
+// Literal on purpose: importing the package runtime here loads its CJS graph inside the wdio (node) process.
+const DSShuttleV2DataTestIds = {
+  HEADER_SEARCH_ICON: 'ds-shuttle-v2-header-search-icon',
+  WRAPPER: 'ds-shuttle-v2-wrapper',
+  PANEL_WRAPPER: 'ds-shuttle-v2-panel-wrapper',
+  LIST_WRAPPER: 'ds-shuttle-v2-list-wrapper',
+  ITEM_WRAPPER: 'ds-shuttle-v2-item-wrapper',
+  ITEM_CHECKBOX: 'ds-shuttle-v2-item-checkbox',
+  ITEM_ICON_WRAPPER: 'ds-shuttle-v2-item-icon-wrapper',
+  ITEM_LABEL_WRAPPER: 'ds-shuttle-v2-item-label-wrapper',
+  ITEM_MIDSECTION_WRAPPER: 'ds-shuttle-v2-item-midsection-wrapper',
+  ITEM_SELECTION: 'ds-shuttle-v2-item-selection',
+  ITEM_ACTIONS_WRAPPER: 'ds-shuttle-v2-item-actions-wrapper',
+  ITEM_ACTION_WRAPPER: 'ds-shuttle-v2-item-action-wrapper',
+  ITEM_ACTION_BTN: 'ds-shuttle-v2-item-action-btn',
+  ITEM_ACTION_BTN_DRILLDOWN_ICON: 'ds-shuttle-v2-item-action-btn-drilldown-icon',
+  ITEM_ACTION_BTN_TO_SOURCE_ICON: 'ds-shuttle-v2-item-action-btn-to-source-icon',
+  ITEM_ACTION_BTN_TO_DESTINATION_ICON: 'ds-shuttle-v2-item-action-btn-to-destination-icon',
+  LIST_BOTTOM_LOADING_MORE: 'ds-shuttle-v2-list-bottom-loading-more',
+  LIST_BOTTOM_LOAD_MORE_BTN: 'ds-shuttle-v2-list-bottom-load-more-btn',
+  LIST_WRAPPER_BOTTOM: 'ds-shuttle-v2-list-wrapper-bottom',
+  EMPTY_LIST_WRAPPER: 'ds-shuttle-v2-empty-list-wrapper',
+  ITEMS_WRAPPER: 'ds-shuttle-v2-items-wrapper',
+  LOADING_LIST_WRAPPER: 'ds-shuttle-v2-loading-list-wrapper',
+  MOVE_MULTIPLE_WRAPPER: 'ds-shuttle-v2-move-multiple-wrapper',
+  MOVE_MULTIPLE_BTN: 'ds-shuttle-v2-move-multiple-btn',
+  LIST_WRAPPER_MID: 'ds-shuttle-v2-list-wrapper-mid',
+  LIST_WRAPPER_MID_SCROLLER: 'ds-shuttle-v2-list-wrapper-mid-scroller',
+  LIST_WRAPPER_TOP: 'ds-shuttle-v2-list-wrapper-top',
+  AREA_SEARCH_WRAPPER: 'ds-shuttle-v2-area-search-wrapper',
+  AREA_SEARCH_BAR: 'ds-shuttle-v2-area-search-bar',
+  AREA_SELECTION_HEADER: 'ds-shuttle-v2-area-selection-header',
+  AREA_SELECTION_HEADER_COUNT_LABEL: 'ds-shuttle-v2-area-selection-header-count-label',
+  DRAG_AND_DROP_HANDLE: 'ds-shuttle-v2-drag-and-drop-handle',
+};
 
 export default class DSShuttleV2CO extends PageObject {
   // URL's

package/ds-shuttle-v2/items/DSShuttleV2.items.func.spec.js

@@ -70,11 +70,13 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     it('01: should not move the item when the disabled move action button is clicked', async () => {
       const testItem = await DSShuttleV2CO.getItemWrapper(1);
       const testItemMoveBtn = await DSShuttleV2CO.getActionButtonByItemAndIndex(testItem, 1);
-      const testItemMoveBtnDisabled = await testItemMoveBtn.getAttribute('aria-disabled');
       const testItemText = await testItem.getText();
       await testItemMoveBtn.click();
       await expect(testItemText).toBe('Source 0.1');
-      await expect(testItemMoveBtnDisabled).toBe('true');
+      // PUI-17909: a natively disabled DSButton emits the native `disabled` attribute and
+      // intentionally omits aria-disabled (that is reserved for applyAriaDisabled). Assert the
+      // native disabled state instead of the now-absent aria-disabled.
+      await expect(testItemMoveBtn).toBeDisabled();
     });
     it('02: should not display the BAB when a disabled item is clicked', async () => {
       const testItem = await DSShuttleV2CO.getItemWrapper(1);

package/ds-svg/DSSvgCO.js

@@ -1,7 +1,9 @@
-import { SVG_DATA_TESTID } from '@elliemae/ds-legacy-svg';
 import { PATH_E2E_SVG } from '../../environments/storybook/paths';
 import { PageObject, Urlbuilder } from '../helpers';
 
+// Literal on purpose: importing the package runtime here loads its CJS graph inside the wdio (node) process.
+const SVG_DATA_TESTID = { ROOT: 'ds-svg-root' };
+
 export default class DSSvgCO extends PageObject {
   static basic = new Urlbuilder(PATH_E2E_SVG, 'basic');
 

package/ds-system/DSSystem.visual.spec.js

@@ -0,0 +1,19 @@
+import DSSystemCO from './DSSystemCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-12550 [DSSystem] Html Elements - visual', () => {
+    before(async () => {
+      const errorOnGo = await DSSystemCO.htmlElements.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display stlyling of html elements correctly', async () => {
+      // This test also verifies the functionality of the `innerRef` prop.
+      // It confirms that the `innerRef` prop is correctly implemented by
+      // capturing and asserting the message "The Div element is successfully referenced."
+      const div = await DSSystemCO.getDiv();
+      await div.waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSSystemCO.snapshotPath('html-elements-innerRef'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-system/DSSystemCO.js

@@ -0,0 +1,15 @@
+import { PATH_E2E_SYSTEM } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSSystemCO extends PageObject {
+  static htmlElements = new Urlbuilder(PATH_E2E_SYSTEM, 'html-elements-test');
+
+  static async getDiv() {
+    return $('//div[@data-testid="custom-data-testid"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('System', example, 'ds-system');
+  }
+}

package/ds-typography/DSTypography.func.spec.js

@@ -6,17 +6,17 @@ import DSTypographyCO from './DSTypographyCO';
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-11020 -  Typography, tabStop for link/btn -Func', () => {
     before('loading page', async () => {
-      const errorOnGo = await DSTypographyCO.showcaseURL.go();
+      const errorOnGo = await DSTypographyCO.interactiveURL.go();
       if (errorOnGo) throw errorOnGo;
     });
-    it('should tab to first Button typography', async () => {
+    it('01: should tab to first Button typography', async () => {
       await browser.keys(Key.Tab);
-      const buttonTypo = await DSTypographyCO.getTypographyByIndex(17);
+      const buttonTypo = await DSTypographyCO.getTypographyByVariant('button');
       await expect(buttonTypo).toBeFocused();
     });
-    it('should tab to first LINK typography', async () => {
+    it('02: should tab to first LINK typography', async () => {
       await browser.keys(Key.Tab);
-      const linkTypo = await DSTypographyCO.getTypographyByIndex(18);
+      const linkTypo = await DSTypographyCO.getTypographyByVariant('a');
       await expect(linkTypo).toBeFocused();
     });
   });