dimsum-e2e-tests 3.70.0-next.4 → 3.70.0-next.41

package/ds-form-date-range-picker/date-segment-aria-labels/DateRangePicker.date-segment-aria-labels.func.spec.js

@@ -0,0 +1,64 @@
+import { Key } from 'webdriverio';
+import DateRangePickerCO from '../DateRangePickerCO';
+
+// Tests for the fix introduced in PUI-15568 — each day/month/year segment now exposes a
+// name-only aria-label ("day"/"month"/"year") with no native role word and no sibling-field
+// state; per-field state lives on role="spinbutton" + aria-valuetext.
+// Chrome-only: pure DOM-attribute assertions are identical across browsers.
+
+// Asserts a single segment input is name-only: aria-label === field name, spinbutton role,
+// empty value-text, and none of the leaked phrases the defect used to inject into the label.
+const assertNameOnlyEmptySegment = async (input, name) => {
+  await expect(input).toHaveAttribute('aria-label', name);
+  await expect(input).toHaveAttribute('role', 'spinbutton');
+  await expect(input).toHaveAttribute('aria-valuetext', 'empty');
+  const label = await input.getAttribute('aria-label');
+  expect(label).not.toContain('input field');
+  expect(label).not.toContain('current values');
+};
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18653 - DSControlledDateRangePicker:: date segment aria-labels - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DateRangePickerCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    // Static reads on the empty initial state — consolidated into one it() (no interaction).
+    // index 0 = Start date group, index 1 = End date group.
+    it('01: each segment exposes a name-only aria-label, spinbutton role and empty value-text', async () => {
+      // Start date group
+      await assertNameOnlyEmptySegment(await DateRangePickerCO.getMonthInputByIndex(0), 'month');
+      await assertNameOnlyEmptySegment(await DateRangePickerCO.getDayInputByIndex(0), 'day');
+      await assertNameOnlyEmptySegment(await DateRangePickerCO.getYearInputByIndex(0), 'year');
+      // End date group
+      await assertNameOnlyEmptySegment(await DateRangePickerCO.getMonthInputByIndex(1), 'month');
+      await assertNameOnlyEmptySegment(await DateRangePickerCO.getDayInputByIndex(1), 'day');
+      await assertNameOnlyEmptySegment(await DateRangePickerCO.getYearInputByIndex(1), 'year');
+    });
+
+    it('02: filling one segment does not leak its value into sibling aria-labels', async () => {
+      const month = await DateRangePickerCO.getMonthInputByIndex(0);
+      await month.click();
+      await browser.keys(Key.ArrowUp); // 01 / January
+      await browser.keys(Key.ArrowUp); // 02 / February
+
+      // filled field announces its OWN value via aria-valuetext; label stays name-only
+      await expect(month).toHaveAttribute('aria-label', 'month');
+      await expect(month).toHaveAttribute('aria-valuetext', 'February');
+
+      // siblings stay name-only + empty — no "February" leaks into their names
+      const day = await DateRangePickerCO.getDayInputByIndex(0);
+      const year = await DateRangePickerCO.getYearInputByIndex(0);
+      await expect(day).toHaveAttribute('aria-label', 'day');
+      await expect(day).toHaveAttribute('aria-valuetext', 'empty');
+      await expect(year).toHaveAttribute('aria-label', 'year');
+      await expect(year).toHaveAttribute('aria-valuetext', 'empty');
+    });
+  });
+}

package/ds-form-native-select/NativeSelect.axe-core.func.spec.js

@@ -54,4 +54,43 @@ if (
       expect(result.length).toBe(0);
     });
   });
+
+  describe('PUI-16464 - NativeSelect: ApplyAriaDisabled -AxeCore', () => {
+    before(async () => {
+      const errorOnGo = await NativeSelect.applyAriaDisabledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have applyAriaDisabled native select and pass axe-core scan', async () => {
+      const nativeSelect = await NativeSelect.getRootByIndex(0);
+      await nativeSelect.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-16464 - NativeSelect: ReadOnly -AxeCore', () => {
+    before(async () => {
+      const errorOnGo = await NativeSelect.readOnlyURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have readOnly native select and pass axe-core scan', async () => {
+      const nativeSelect = await NativeSelect.getRootByIndex(0);
+      await nativeSelect.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-16464 - NativeSelect: ApplyAriaDisabled + hasError -AxeCore', () => {
+    before(async () => {
+      const errorOnGo = await NativeSelect.applyAriaDisabledWithErrorURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have applyAriaDisabled + hasError native select and pass axe-core scan', async () => {
+      const nativeSelect = await NativeSelect.getRootByIndex(0);
+      await nativeSelect.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
 }

package/ds-form-native-select/NativeSelect.visual.spec.js

@@ -0,0 +1,33 @@
+import NativeSelect from './NativeSelectCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18537 - NativeSelect:: basic state -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await NativeSelect.controlledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render the basic controlled native select', async () => {
+      const root = await NativeSelect.getRootByIndex(0);
+      await root.waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(NativeSelect.snapshotPath('basic'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  // Coverage for the fix introduced in PUI-14617
+  // (disabled-state colors aligned with Combobox disabled-state colors to meet WCAG 1.4.3).
+  describe('PUI-18538 - NativeSelect:: disabled state -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await NativeSelect.disabledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render the disabled native select', async () => {
+      const root = await NativeSelect.getRootByIndex(0);
+      await root.waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(NativeSelect.snapshotPath('disabled'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-native-select/NativeSelectCO.js

@@ -11,6 +11,12 @@ export default class NativeSelect extends PageObject {
 
   static disabledURL = new Urlbuilder(PATH_E2E_NATIVE_SELECT, 'disabled-test');
 
+  static applyAriaDisabledURL = new Urlbuilder(PATH_E2E_NATIVE_SELECT, 'apply-aria-disabled-test');
+
+  static readOnlyURL = new Urlbuilder(PATH_E2E_NATIVE_SELECT, 'read-only-test');
+
+  static applyAriaDisabledWithErrorURL = new Urlbuilder(PATH_E2E_NATIVE_SELECT, 'apply-aria-disabled-with-error-test');
+
   // Selectors
   static async getInputSlotByIndex(index = 0) {
     return $$(`[data-dimsum-slot="dsNativeselectInput"]`)[index];

package/ds-form-native-select/option-selection/NativeSelect.option-selection.func.spec.js

@@ -0,0 +1,25 @@
+import NativeSelect from '../NativeSelectCO';
+
+// Tests for the option selection behavior of the native select introduced in PUI-14617.
+// Selecting an option must update the <select> value (options use value={index}).
+// Uses the WebDriver native select command (selectByIndex) so the native popup is opened and an
+// option committed the same way in every browser — simulated keystrokes on the OS-drawn popup are
+// not reachable by WebDriver on macOS/Safari, which is why a keystroke-based assertion is not portable.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18563 - NativeSelect:: Option selection updates value -Func', () => {
+    before(async () => {
+      const errorOnGo = await NativeSelect.controlledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should update the value when selecting an option from the popup', async () => {
+      const nativeSelect = await NativeSelect.getRootByIndex(0);
+      await nativeSelect.waitForDisplayed();
+
+      const input = await NativeSelect.getInputSlotByIndex(0);
+      await input.selectByIndex(2);
+
+      await expect(input).toHaveValue('2');
+    });
+  });
+}

package/ds-leftnavigation/LeftNavigationCO.js

@@ -71,11 +71,11 @@ export default class LeftNavCO extends PageObject {
   }
 
   static async getTruncatedText(index) {
-    return $$('[data-testid="DS-SimpleTruncateText"]')[index];
+    return $$('[data-testid="leftnav-list-item-label"]')[index];
   }
 
   static async getTooltip() {
-    return $('[data-testid="popover-container"]');
+    return $('[data-testid="ds-floating-wrapper-root"]');
   }
 
   static async getSubItemBtn() {

package/ds-menu-button/DSMenuButtonCO.js

@@ -21,6 +21,8 @@ export default class DSMenuButtonCO extends PageObject {
 
   static skeletonMenuItem = new Urlbuilder(PATH_E2E_MENU_BUTTON, 'skeleton-menu-item-test');
 
+  static slotsTest = new Urlbuilder(PATH_E2E_MENU_BUTTON, 'slots-test');
+
   // UseCases (E2E simplified versions)
   static cardExample = new Urlbuilder(PATH_MENU_BUTTON_USECASES, 'card-example-test');
 
@@ -85,6 +87,27 @@ export default class DSMenuButtonCO extends PageObject {
     return $(`${item} div span`);
   }
 
+  // Slots test selectors (by data-dimsum-slot)
+  static async getSlotsOpinionatedButtonRoot() {
+    return $('[data-dimsum-parent-slot="dsOpinionatedbuttonRoot"');
+  }
+
+  static async getSlotsFloatingWrapper() {
+    return $('[data-dimsum-parent-slot="dsFlyoutmenuFloatingWrapper"');
+  }
+
+  static async getSlotsFlyoutMenuRoot() {
+    return $('[data-dimsum-slot="dsFlyoutmenuRoot"]');
+  }
+
+  static async getSlotsListWrapper() {
+    return $('[data-dimsum-slot="dsFlyoutmenuListWrapper"]');
+  }
+
+  static async getSlotsMenuItemWrappers(index = 0) {
+    return $$('[data-dimsum-slot="dsMenuitemMenuItemWrapper"]')[index];
+  }
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('DSMenuItems', example, 'ds-menu-items');

package/ds-menu-button/slots/DSMenuButton.slots.func.spec.js

@@ -0,0 +1,40 @@
+import DSMenuButtonCO from '../DSMenuButtonCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18356 - DSMenuButton:: Slots - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuButtonCO.slotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have custom aria-label to each slot', async () => {
+      const triggerBtn = await DSMenuButtonCO.getSlotsOpinionatedButtonRoot();
+      await expect(triggerBtn).toHaveAttribute('aria-label', 'im dsOpinionatedbuttonRoot aria');
+      await triggerBtn.click();
+
+      const flyoutRoot = await DSMenuButtonCO.getSlotsFlyoutMenuRoot();
+      await flyoutRoot.waitForDisplayed();
+      const listWrapper = await DSMenuButtonCO.getSlotsListWrapper();
+      const floatingWrapper = await DSMenuButtonCO.getSlotsFloatingWrapper();
+      const menuItem = await DSMenuButtonCO.getSlotsMenuItemWrappers();
+      await expect(listWrapper).toHaveAttribute('aria-label', 'im dsFlyoutmenuListWrapper aria');
+      await expect(flyoutRoot).toHaveAttribute('aria-label', 'im dsFlyoutmenuRoot aria');
+      await expect(floatingWrapper).toHaveAttribute('aria-label', 'im dsFlyoutmenuFloatingWrapper aria');
+      await expect(menuItem).toHaveAttribute('aria-label', 'im dsMenuitemMenuItemWrapper aria');
+    });
+
+    it('02: should apply custom data-testid to each slot', async () => {
+      const triggerBtn = await DSMenuButtonCO.getSlotsOpinionatedButtonRoot();
+      const flyoutRoot = await DSMenuButtonCO.getSlotsFlyoutMenuRoot();
+      const listWrapper = await DSMenuButtonCO.getSlotsListWrapper();
+      const floatingWrapper = await DSMenuButtonCO.getSlotsFloatingWrapper();
+      const menuItem = await DSMenuButtonCO.getSlotsMenuItemWrappers();
+
+      await expect(triggerBtn).toHaveAttribute('data-testid', 'im dsOpinionatedbuttonRoot data');
+      await expect(flyoutRoot).toHaveAttribute('data-testid', 'im dsFlyoutmenuRoot data');
+      await expect(listWrapper).toHaveAttribute('data-testid', 'im dsFlyoutmenuListWrapper data');
+      await expect(floatingWrapper).toHaveAttribute('data-testid', 'im dsFlyoutmenuFloatingWrapper data');
+      await expect(menuItem).toHaveAttribute('data-testid', 'im dsMenuitemMenuItemWrapper data');
+    });
+  });
+}

package/ds-menu-button/slots/DSMenuButton.slots.visual.spec.js

@@ -0,0 +1,26 @@
+import DSMenuButtonCO from '../DSMenuButtonCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18357 - DSMenuButton:: Slots - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuButtonCO.slotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display slots story in dark theme default state correctly', async () => {
+      const triggerBtn = await DSMenuButtonCO.getSlotsOpinionatedButtonRoot();
+      await triggerBtn.waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(DSMenuButtonCO.snapshotPath('slots-default'));
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: should display slots story with menu open in dark theme correctly', async () => {
+      const triggerBtn = await DSMenuButtonCO.getSlotsOpinionatedButtonRoot();
+      await triggerBtn.click();
+      const flyoutRoot = await DSMenuButtonCO.getSlotsFlyoutMenuRoot();
+      await flyoutRoot.waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(DSMenuButtonCO.snapshotPath('slots-open'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-modal-slide/ModalSlideCO.js

@@ -31,6 +31,8 @@ export default class ModalSlideCO extends PageObject {
 
   static applyAriaDisabledFooterURL = new Urlbuilder(PATH_E2E_MODALSLIDE, 'apply-aria-disabled-footer-test');
 
+  static slotsTest = new Urlbuilder(PATH_E2E_MODALSLIDE, 'slots-test');
+
   static async getModalSlide() {
     return $('[data-testid="ds-modal-slide"]');
   }
@@ -95,6 +97,43 @@ export default class ModalSlideCO extends PageObject {
     await browser.pause(500); // pause to allow animation to finish
   }
 
+  // Slots
+  static async getSlotActualContent() {
+    return $('[data-dimsum-slot="dsModalslideActualContent"]');
+  }
+
+  static async getSlotContent() {
+    return $('[data-dimsum-slot="dsModalslideContent"]');
+  }
+
+  static async getSlotContentWrapper() {
+    return $('[data-dimsum-slot="dsModalslideContentWrapper"]');
+  }
+
+  static async getSlotFooterSeparator() {
+    return $('[data-dimsum-slot="dsModalslideFooterSeparator"]');
+  }
+
+  static async getSlotGridContent() {
+    return $('[data-dimsum-slot="dsModalslideGridContent"]');
+  }
+
+  static async getSlotHeaderSeparator() {
+    return $('[data-dimsum-slot="dsModalslideHeaderSeparator"]');
+  }
+
+  static async getSlotOverlay() {
+    return $('[data-dimsum-slot="dsModalslideOverlay"]');
+  }
+
+  static async getSlotRoot() {
+    return $('[data-dimsum-slot="dsModalslideRoot"]');
+  }
+
+  static async getSlotHeader() {
+    return $('[data-dimsum-parent-slot="dsModalslideTitle"]');
+  }
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('ModalSlide', example, 'ds-modal-slide');

package/ds-modal-slide/custom-header/ModalSlide.customHeader.focusRing.visual.spec.js

@@ -10,7 +10,8 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
 
     it('01: should show consistent focus ring on modal body (5th tab stop)', async () => {
-      await ModalSlideCO.openModalSlide();
+      const trigger = await ModalSlideCO.getOpenModalSlideBtn();
+      await trigger.click();
       // Tab through CustomHeader: backarrow(1) -> breadcrumb items(2,3,4) -> body(5)
       await browser.keys(Key.Tab);
       await browser.keys(Key.Tab);

package/ds-modal-slide/slots/ModalSlide.slots.func.spec.js

@@ -0,0 +1,74 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import ModalSlideCO from '../ModalSlideCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18428 - SquareIndicator: Slots - Func Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ModalSlideCO.slotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: each SquareIndicator slot to have custom aria-* attribute', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      const actualContent = await ModalSlideCO.getSlotActualContent();
+      const content = await ModalSlideCO.getSlotContent();
+      const contentWrapper = await ModalSlideCO.getSlotContentWrapper();
+      const footerSeparator = await ModalSlideCO.getSlotFooterSeparator();
+      const gridContent = await ModalSlideCO.getSlotGridContent();
+      const headerSeparator = await ModalSlideCO.getSlotHeaderSeparator();
+      const overlay = await ModalSlideCO.getSlotOverlay();
+      const root = await ModalSlideCO.getSlotRoot();
+      await expect(actualContent).toHaveAttribute('aria-label', 'actual content aria');
+      await expect(content).toHaveAttribute('aria-label', 'content aria');
+      await expect(contentWrapper).toHaveAttribute('aria-label', 'content wrapper aria');
+      await expect(footerSeparator).toHaveAttribute('aria-label', 'footer separator aria');
+      await expect(gridContent).toHaveAttribute('aria-label', 'grid content aria');
+      await expect(headerSeparator).toHaveAttribute('aria-label', 'header separator aria');
+      await expect(overlay).toHaveAttribute('aria-label', 'overlay aria');
+      await expect(root).toHaveAttribute('aria-label', 'root aria');
+    });
+    it('02: each SquareIndicator slot to have custom data-* attribute', async () => {
+      const actualContent = await ModalSlideCO.getSlotActualContent();
+      const content = await ModalSlideCO.getSlotContent();
+      const contentWrapper = await ModalSlideCO.getSlotContentWrapper();
+      const footerSeparator = await ModalSlideCO.getSlotFooterSeparator();
+      const gridContent = await ModalSlideCO.getSlotGridContent();
+      const headerSeparator = await ModalSlideCO.getSlotHeaderSeparator();
+      const overlay = await ModalSlideCO.getSlotOverlay();
+      const root = await ModalSlideCO.getSlotRoot();
+      await expect(actualContent).toHaveAttribute('data-testid', 'actual content data');
+      await expect(content).toHaveAttribute('data-testid', 'content data');
+      await expect(contentWrapper).toHaveAttribute('data-testid', 'content wrapper data');
+      await expect(footerSeparator).toHaveAttribute('data-testid', 'footer separator data');
+      await expect(gridContent).toHaveAttribute('data-testid', 'grid content data');
+      await expect(headerSeparator).toHaveAttribute('data-testid', 'header separator data');
+      await expect(overlay).toHaveAttribute('data-testid', 'overlay data');
+      await expect(root).toHaveAttribute('data-testid', 'root data');
+    });
+    it('03: each ModalSlide slot to have custom lang attribute', async () => {
+      const actualContent = await ModalSlideCO.getSlotActualContent();
+      const content = await ModalSlideCO.getSlotContent();
+      const contentWrapper = await ModalSlideCO.getSlotContentWrapper();
+      const footerSeparator = await ModalSlideCO.getSlotFooterSeparator();
+      const gridContent = await ModalSlideCO.getSlotGridContent();
+      const headerSeparator = await ModalSlideCO.getSlotHeaderSeparator();
+      const overlay = await ModalSlideCO.getSlotOverlay();
+      const root = await ModalSlideCO.getSlotRoot();
+      await expect(actualContent).toHaveAttribute('lang', 'en');
+      await expect(content).toHaveAttribute('lang', 'es');
+      await expect(contentWrapper).toHaveAttribute('lang', 'fr');
+      await expect(footerSeparator).toHaveAttribute('lang', 'de');
+      await expect(gridContent).toHaveAttribute('lang', 'it');
+      await expect(headerSeparator).toHaveAttribute('lang', 'pt');
+      await expect(overlay).toHaveAttribute('lang', 'ja');
+      await expect(root).toHaveAttribute('lang', 'zh');
+    });
+  });
+}

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

@@ -0,0 +1,27 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import ModalSlideCO from '../ModalSlideCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18429 - ModalSlide: Slots Test - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ModalSlideCO.slotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display ModalSlide with customized slots', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      const root = await ModalSlideCO.getSlotRoot();
+      await root.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(ModalSlideCO.snapshotPath('modal-slide-slots'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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

@@ -7,8 +7,8 @@ describe('PUI-9354:: Notification Badge: Relate to component', () => {
     if (errorOnGo) throw errorOnGo;
   });
   it('01: Should display relate to component', async () => {
-    await browser.eyesOpen();
-    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-relate-to-component'));
+    await DSNotificationBadgeCO.getNotificationBadgeByIndex(0).waitForDisplayed();
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
 });
@@ -19,8 +19,8 @@ describe('PUI-9353:: Notification Badge: Disabled', () => {
     if (errorOnGo) throw errorOnGo;
   });
   it('01: Should display disabled badge', async () => {
-    await browser.eyesOpen();
-    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-disabled'));
+    await DSNotificationBadgeCO.getNotificationBadgeByIndex(0).waitForDisplayed();
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
 });
@@ -31,8 +31,8 @@ describe('PUI-9352:: Notification Badge: Background color', () => {
     if (errorOnGo) throw errorOnGo;
   });
   it('01: Should display custom background color badges', async () => {
-    await browser.eyesOpen();
-    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-background-color'));
+    await DSNotificationBadgeCO.getNotificationBadgeByIndex(0).waitForDisplayed();
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
 });
@@ -43,8 +43,8 @@ describe('PUI-9355:: Notification Badge: Alphanumerical', () => {
     if (errorOnGo) throw errorOnGo;
   });
   it('01: Should display custom background color badges', async () => {
-    await browser.eyesOpen();
-    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-alpha-chars'));
+    await DSNotificationBadgeCO.getNotificationBadgeByIndex(0).waitForDisplayed();
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
 });
@@ -55,8 +55,8 @@ describe('PUI-11412:: Notification Badge: Chip, Icon and Button integration -Vis
     if (errorOnGo) throw errorOnGo;
   });
   it('01: Should display integration with Chips and Button components correctly', async () => {
-    await browser.eyesOpen();
-    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-chip-default'));
+    await DSNotificationBadgeCO.getNotificationBadgeByIndex(0).waitForDisplayed();
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
 });
@@ -66,8 +66,8 @@ describe('PUI-11413:: Notification Badge: Custom Component Integration -Visual T
     if (errorOnGo) throw errorOnGo;
   });
   it('01: Should display integration with custom components correctly', async () => {
-    await browser.eyesOpen();
-    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-custom-component'));
+    await DSNotificationBadgeCO.getNotificationBadgeByIndex(0).waitForDisplayed();
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
 });
@@ -81,7 +81,7 @@ describe('PUI-11817:: NotificationBadge: with LeftNavigation example -Visual', (
     await browser.eyesOpen();
     const notification = await DSNotificationBadgeCO.getNotificationBadgeByIndex(1);
     await notification.waitForDisplayed();
-    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-leftnav-default'));
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
   it('02: should display left nav with badged items selected, one focused correctly', async () => {
@@ -89,7 +89,7 @@ describe('PUI-11817:: NotificationBadge: with LeftNavigation example -Visual', (
 
     const item = await DSNotificationBadgeCO.getIconByIndex(2);
     await item.click();
-    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-leftnav-selected'));
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
 });
@@ -99,10 +99,8 @@ describe('PUI-14185:: NotificationBadge: textColor prop - Visual Test ', () => {
     if (errorOnGo) throw errorOnGo;
   });
   it('01: should display notification badge with custom textColor', async () => {
-    await browser.eyesOpen();
-    const notification = await DSNotificationBadgeCO.getNotificationBadgeByIndex(1);
-    await notification.waitForDisplayed();
-    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-with-custom-textColor'));
+    await DSNotificationBadgeCO.getNotificationBadgeByIndex(1).waitForDisplayed();
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
 });
@@ -114,12 +112,11 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should display toolbar with toolbar correctly', async () => {
-      await browser.eyesOpen();
       const notification = await DSNotificationBadgeCO.getNotificationBadgeByIndex(1);
       await notification.waitForDisplayed();
       await browser.keys(Key.Tab);
       await browser.keys(Key.ArrowRight);
-      const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-with-toolbar'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-page-layout/PageLayoutCO.js

@@ -1,12 +1,12 @@
-import { PATH_PAGE_LAYOUT_TEMPLATE } from '../paths';
+import { PATH_E2E_PAGE_LAYOUT } from '../paths';
 import { PageObject, Urlbuilder } from '../helpers';
 
 export default class PageLayoutCO extends PageObject {
-  static basicURL = new Urlbuilder(PATH_PAGE_LAYOUT_TEMPLATE, 'basic');
+  static basicURL = new Urlbuilder(PATH_E2E_PAGE_LAYOUT, 'basic-test');
 
-  static complexURL = new Urlbuilder(PATH_PAGE_LAYOUT_TEMPLATE, 'complex-page');
+  static complexURL = new Urlbuilder(PATH_E2E_PAGE_LAYOUT, 'complex-page-test');
 
-  static integratedURL = new Urlbuilder(PATH_PAGE_LAYOUT_TEMPLATE, 'integrated-example');
+  static integratedURL = new Urlbuilder(PATH_E2E_PAGE_LAYOUT, 'integrated-example-test');
 
   // Snapshots
   static snapshotPath(example = 'basic') {

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

@@ -1,3 +1,4 @@
+/* eslint-disable wdio/no-pause */
 import DSProgressIndicatorCO from './DSProgressIndicatorCO';
 import { axeCoreCheck } from '../helpers';
 
@@ -14,6 +15,7 @@ if (
     });
     it('01: should display basic progress indicator and pass axe-core', async () => {
       await (await DSProgressIndicatorCO.getUploadLabel()).waitForDisplayed();
+      await browser.pause(500);
       const result = await axeCoreCheck();
       expect(result.length).toBe(0);
     });

package/ds-progress-indicator/DSProgressIndicatorCO.js

@@ -12,7 +12,7 @@ export default class DSProgressIndicatorCO extends PageObject {
   }
 
   static async getUploadLabel() {
-    return $('//div[contains(text(), "upload")]');
+    return $('//span[contains(text(), "upload")]');
   }
 
   // Snapshots